🎓 StudySync — Find Your Perfect Study Partner

StudySync is a modern, responsive web application designed to help learners connect, collaborate, and find the right study partners based on interests, skills, and learning goals.
Built with React (Vite) and Tailwind CSS on the frontend, Firebase Authentication + Hosting, and an Express + MongoDB backend API.

🌐 Live Website: https://study-mate-c175a.web.app/
📁 Frontend Repo: https://github.com/Zihan231/StudySync-BackEnd.git

---

📚 Table of Contents

• About
• Features
• Tech Stack
• Screenshots
• Installation
• Contact

🧩 About

StudySync helps learners discover the right study partners based on shared subjects, skill levels, and study preferences.

The project focuses on:

• A clean and intuitive UI
• Secure authentication with Firebase
• Smooth navigation using React Router
• Dark/Light mode to enhance user experience
• A fast, responsive experience across devices

---

🚀 Features

✨ Modern UI/UX – Built with Tailwind CSS and DaisyUI
🔐 Firebase Authentication – Google login + Email/Password
🌙 Dark & Light Theme – User-friendly theme toggle
📌 User Profiles – Show skills, subjects, and study interests
🤝 Study Partner Matching – API-based partner browsing and filtering
⚡ Fast Navigation – Client-side routing with React Router
📱 Fully Responsive – Optimized for mobile, tablet, and desktop
🎞️ Interactive Sliders – Built with Swiper (React Swiper)
⏳ Smooth Loading States – Handled with React Spinners
🍬 Sweet Alerts – Clean feedback with SweetAlert2

---

🛠️ Tech Stack

🎨 Frontend

• React (Vite)
• Tailwind CSS
• DaisyUI
• React Router
• React Icons
• React Spinners
• Swiper (React Swiper)

⚙ Backend

Git Link: https://github.com/Zihan231/StudySync-BackEnd

• Express.js (Node.js)
• MongoDB

🔐 Auth & Hosting

• Firebase Authentication
• Firebase Hosting

🧰 Other Tools & Libraries

• Axios
• SweetAlert2
• Vite

---

🖼️ Screenshots

⚙ Installation

1️⃣ Clone the repository

git clone https://github.com/Zihan231/StudySync-FrontEnd.git
cd StudySync-FrontEnd

2️⃣ Install dependencies

npm install

3️⃣ Configure environment variables

Create a .env file (or use Vite-style env like .env.local) and add your Firebase configuration:

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 development server

npm run dev

5️⃣ Build for production

npm run build

6️⃣ Preview the production build

npm run preview

📬 Contact

StudySync was created with ❤️ by Zihan231

        

🧠 This website is a demo showcase project created for learning purposes.