Virtual Zoo 🦒 | Alpha Safari

Alpha Safari is an interactive Virtual Zoo designed to help students learn the alphabet by exploring various animals, their names, and detailed information. This project combines education, interactive audio, and a user-friendly interface to create an engaging platform where users can learn about animals and reinforce their alphabet knowledge.

---

Features 🌟

• Interactive Zoo: Visualize a virtual environment featuring various animals, each linked to a letter of the alphabet.
• Animal Information: Learn about the characteristics, features, lifestyle, and general description of each animal.
• Audio Descriptions: Each animal has an associated audio track where it "describes itself," providing an immersive learning experience.
• Search and Filter: Quickly find specific animals based on their names or the alphabet letter they represent.
• User-Friendly Interface: Intuitive and responsive design suitable for all devices, ensuring ease of use for young learners.
• Alphabet Learning Integration: Animals are presented in a way that directly aids in alphabet recognition and association.
• Secure Authentication: User registration, login, and password reset flows.
• Contact Form: Users can reach out via a contact form, with backend email delivery.

---

Tech Stack

• Frontend: React, Vite, Styled Components
• Backend: Node.js, Express, MongoDB (Atlas), Nodemailer
• Deployment: Frontend on Vercel, Backend on Render

---

Getting Started 🚀

Prerequisites

• Node.js (v16+ recommended)
• npm
• MongoDB Atlas account (or local MongoDB for development)

1. Clone the Repository

git clone <your-repo-url>
cd AlphaSafari

2. Backend Setup

1. Navigate to the backend folder:

   cd backend

2. Install dependencies:

   npm install

3. Create a .env file in the backend folder:

   MONGO_URI=your-mongodb-uri
   EMAIL_USER=your-gmail@gmail.com
   EMAIL_PASS=your-gmail-app-password
   BASE_URL=http://localhost:5173
   JWT_SECRET=your_jwt_secret_here
   PORT=5000

   • BASE_URL: The frontend URL, used for password reset links.
   • JWT_SECRET: Secret key for signing JWT tokens (authentication).
4. Start the backend server:

   node index.js
   # or for development
   npx nodemon index.js

3. Frontend Setup

1. Navigate to the frontend folder:

   cd ../frontend

2. Install dependencies:

   npm install

3. Create a .env file in the frontend folder:

   VITE_API_URL=http://localhost:5000

   • For production, set this to your Render backend URL.
4. Start the frontend dev server:

   npm run dev

---

Deployment

• Frontend: Deploy to Vercel. Set VITE_API_URL in Vercel dashboard to your Render backend URL.
• Backend: Deploy to Render. Set all environment variables in the Render dashboard.

---

Folder Structure

AlphaSafari/
├── backend/
│   ├── index.js
│   ├── package.json
│   ├── .env
│   ├── routes/
│   │   ├── auth.js
│   │   └── contact.js
│   ├── models/
│   │   └── User.js
│   └── README.md
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── alphabetCards/
│   │   ├── assets/
│   │   ├── context/
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── public/
│   │   └── logo.png
│   ├── index.html
│   ├── package.json
│   ├── .env
│   ├── vite.config.js
│   ├── eslint.config.js
│   └── README.md
├── README.md
└── .gitignore

---

Future Enhancements 🌱

• AI-based Quizzes: Interactive games to test alphabet and animal knowledge.
• Augmented Reality (AR): More immersive, real-life animal viewing experience.
• User Profiles: Personalized learning paths and progress tracking.
• 3D Model Visualization: Enhanced 3D animal models and interactions.

---

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

---

License

MIT

---

Acknowledgements

• Animal images and sounds are for educational use only.
• Inspired by the need for fun, interactive, and effective early learning tools.