🎓 Campus Hub

---

📜 Project Overview

Welcome to Campus Hub 🎓, a MERN stack-based web platform where users can explore colleges, view detailed admission processes, research work, events, and sports facilities. The system also allows students to apply for admission, manage their booked colleges, and share reviews.

With a user-friendly interface, robust authentication, and responsive design, the platform ensures a smooth experience for students looking to explore and book college facilities. 🚀

---

🚀 Live Links

• Client Repo: College Booking Client
• Server Repo: College Booking Server
• Live Site: College Booking System

---

🔍 React Concepts Used

• Components for modular design
• Hooks: useState, useEffect, useContext
• React Router v7: useParams, useLocation, useNavigate
• Conditional Rendering for protected routes
• Context API for authentication state
• React Hook Form for admission & profile forms
• JWT Authentication for secure access

---

🛠️ Technologies Used

👩🏼‍💻 Frontend

• React.js
• Firebase Authentication
• Tailwind CSS
• DaisyUI
• React Router
• React Hook Form
• React Hot Toast
• React Icons

⚙️ Backend

• Node.js
• Express.js

🛢️ Database

• MongoDB

---

✨ Key Features

• 🔍 College Search: Search colleges by name and view results instantly.
• 📚 College Details Page: Includes admission process, events, research works, sports categories, and image galleries.
• 🎓 Admission System: Students can apply by filling out a detailed admission form.
• 📌 My College Dashboard: Users can view their booked college and submit reviews.
• ⭐ Review System: Students can add ratings and reviews which appear on the homepage.
• 🔐 Authentication:
  • Email/Password registration
  • Google Sign-in
  • Social login
  • Password reset feature
• 👤 User Profile:
  • View profile details
  • Edit and update profile (name, email, university, address)
• ⚠️ 404 Page: Custom creative "Page Not Found" design.
• 📱 Responsive UI: Fully responsive across desktop, tablet, and mobile.

---

🧰 NPM Packages Used

• "firebase"
• "axios"
• "react"
• "react-dom"
• "react-router-dom"
• "react-hook-form"
• "react-hot-toast"
• "react-icons"
• "jsonwebtoken"
• "cors"
• "dotenv"
• "express"
• "mongodb"
• "nodemon"

---

🛠 Installation

Prerequisites

• Node.js and npm installed
• MongoDB connection string

---

Client Side Setup

1. Clone the client-side repository:

   git clone https://github.com/shorifulbd1st/college-booking
   cd Body-Build-House

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open the project in a code editor:

   code .

5. Add the .env file in the root directory and include the following environment variables:

   VITE_apiKey=................................
   VITE_authDomain=................................
   VITE_projectId=................................
   VITE_storageBucket=................................
   VITE_messagingSenderId=................................
   VITE_appId=................................
   

Server Side Setup

1. Clone the server-side repository:

   git clone https://github.com/shorifulbd1st/college-booking-server
   cd college-booking-server

2. Install dependencies:

   npm install

3. Start the server:

   node index.js

   --- OR ---

   nodemon index.js

4. Open the project in a code editor:

   code .

5. Add the .env file in the root directory and include the following environment variables:

   DB_USER=..........................................
   DB_PASS=..........................................
   ACCESS_TOKEN_SECRET=..........................................

🧑‍💻 Authors

• Shoriful Islam (Lead Developer)
• Lead Developer & Maintainer
• Connect with me on GitHub