# 🌿 Chillout – Student Relaxation & Productivity App

**Chillout** is a full-stack web application designed to help students **relax, refresh, and refocus** during study breaks.  
It combines fun games and productivity tools in one clean, modern interface.

---

## 🚀 Live Demo
🔗 **Visit Here:** [https://chillout.vercel.app](https://chillout.vercel.app)

---

## 🧠 Overview
**Chillout** provides a digital space for students to take mindful breaks, play casual games, and organize their daily tasks — all in one place.

Users can log in using **Google Authentication** or continue as **Guest**, play built-in games like **Snake**, **Tic Tac Toe**, **2048**, and **Sudoku**, or manage daily goals through an integrated **To-Do List**.

---

## 💻 Tech Stack

**Frontend:**
- React.js (Vite)
- Tailwind CSS
- React Router DOM
- Firebase Authentication & Firestore

**Backend:**
- Firebase (Auth, Firestore)

**Deployment:**
- Vercel

---

## ✨ Features

- 🔐 **Google Sign-In / Guest Login**
- 🎮 **Built-in Games:**
  - Snake Game 🐍  
  - Sudoku 🧩  
  - 2048 🧮  
  - Tic Tac Toe ❌⭕
- 🗒️ **Productivity Tools:**
  - To-Do List (Add, Delete, Mark Completed)
  - Data Persistence with Firebase
- 🌙 **Responsive UI** – Works seamlessly on mobile and desktop
- 🧭 **Smooth Navigation** with React Router
- 🚀 **Deployed on Vercel** with custom favicon and meta title

---

## 🧩 Project Structure

chillout/ │ ├── src/ │ ├── components/ # Navbar, Loader, etc. │ ├── pages/ # Home, Games, ToDo, Login, etc. │ ├── hooks/ # useAuth (Firebase logic) │ ├── assets/ # Images & Icons │ ├── App.jsx │ └── main.jsx │ ├── public/ │ └── favicon.ico │ └── package.json

---

## 🛠️ Setup Instructions

### 1️⃣ Clone the Repository
```bash
git clone https://github.com/BMN5/chillout-web.git
cd chillout-web

2️⃣ Install Dependencies

npm install

3️⃣ Add Firebase Configuration

Create a .env file in the root folder and add your Firebase credentials:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

4️⃣ Run the App Locally

npm run dev

5️⃣ Deploy on Vercel

• Push your code to GitHub
• Go to Vercel → Import the repository
• Add the .env variables in your project settings
• Click Deploy

---

📸 Screenshots

🔐 Login Page

🏠 Home Page

🗒️ To-Do List

🧩 Sudoku Game

🐍 Snake Game

🧮 2048 Game

❌⭕ Tic Tac Toe

📜 License

This project is open source and available under the MIT License.

---

👨‍💻 Developed By

Bhavaraju Manjunadh 📧 manjunadhbhavaraju@gmail.com 💼 LinkedIn

---

“Chill. Play. Focus. Repeat.” 🌱 — The Chillout Team

---

✅ **Next steps:**
1. Save this as `README.md` in your root project folder.  
2. Commit and push it:
   ```bash
   git add README.md
   git commit -m "Added project README"
   git push origin main