A premium, full-stack digital solution designed to revolutionize zoo operations and visitor experiences. This system seamlessly integrates an Express-powered REST API with a modern React Native (Expo) mobile application, featuring a cutting-edge Glassmorphism design system.
- Animal Encyclopedia: Explore detailed information about zoo inhabitants with rich media.
- Animal Encounters: Real-time schedules for live feeding, photo sessions, and educational talks.
- Smart Ticketing: Digital ticket purchasing and QR-code based entry system.
- Online Store: Browse and purchase souvenirs, merchandise, and food with a seamless cart experience.
- Interactive Feedback: A dedicated inquiry system for visitors to ask questions and provide suggestions.
- Dashboard Analytics: Overview of sales, visitor traffic, and animal welfare status.
- Store & Inventory: Comprehensive tool for managing product stock, categories, and order fulfillment.
- Encounter Management: Schedule and manage staff-animal interactions.
- Inquiry Handling: Centralized system for responding to visitor feedback and issues.
- Media Management: Automated image hosting and optimization via Cloudinary.
- Framework: React Native (Expo SDK 54)
- Navigation: React Navigation v6 (Native Stack)
- Styling: Glassmorphism UI, Expo Blur, Lucide Icons
- State Management: React Context API
- Networking: Axios with custom API client
- Runtime: Node.js & Express
- Database: MongoDB Atlas (Mongoose ODM)
- Authentication: JWT (JSON Web Tokens) with Bcrypt encryption
- File Handling: Multer & Cloudinary (Cloud-based asset management)
- Security: Helmet.js, CORS, and Express Validator
- Node.js (v18+ recommended)
- npm or yarn
- Expo Go app (for physical device testing)
- A Cloudinary account (for image uploads)
- A MongoDB Atlas cluster
cd backend
npm install
# Configure environment variables
# Copy .env.example to .env and fill in your credentials
npm run devRequired .env Variables (Backend):
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_secure_random_string
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
PORT=5000cd frontend
npm install
# Start the Metro bundler
npx expo start --port 8085Required .env Variables (Frontend):
# Replace with your local IP for physical device testing
EXPO_PUBLIC_API_URL=http://192.168.x.x:5000/apiThe application follows a Modern Premium aesthetic:
- Glassmorphism: Translucent backgrounds and subtle blurs for a futuristic feel.
- Micro-animations: Smooth transitions and interactive feedback using
Animated. - Custom UI Components: Reusable
StatusModal,Card, andButtoncomponents ensuring consistency. - Responsive Layouts: Optimized for both iOS and Android devices.
Zoo-Management/
├── backend/ # Express.js Server
│ ├── src/
│ │ ├── controllers/ # Business logic
│ │ ├── models/ # MongoDB Schemas
│ │ ├── routes/ # API Endpoints
│ │ ├── middleware/ # Auth & Upload logic
│ │ └── config/ # DB & Cloudinary config
├── frontend/ # React Native App
│ ├── src/
│ │ ├── screens/ # Screen components
│ │ ├── navigation/ # App routing
│ │ ├── components/ # UI Design System
│ │ └── context/ # Global state
│ └── assets/ # Images & Icons
└── README.md
Group Number: WMT-DS-14
Member 1: IT24400067 – Perera M.C.D – Ticket & Show Booking Management
Member 2: IT24103181 – Gayathmika M.G.H – Event Management
Member 3: IT24100069 – Indeepa M.G.P.J – Feedback, Inquiry & Review Management
Member 4: IT24102399 – Pamithu Dulwan H.G – Animal Information & Education Management
Member 5: IT24103582 – Tharindu K.T.D.S – Animal Encounter & Photography Management
Member 6: IT24102546 – Abeygunasekera P – Online Store Management