EduHub

A modern, responsive university website built with React and Vite. EduHub demonstrates modern frontend development practices, including reusable React components, client-side routing with React Router, responsive layouts, and a clean user interface.

The project is a React implementation of a traditional HTML/CSS/JavaScript university website, redesigned using a component-based architecture for improved maintainability, scalability, and performance.

---

Preview

Add screenshots or a live demo link here.

Live Demo: https://your-live-demo-link.com

---

Features

• Responsive design for desktop, tablet, and mobile devices
• Component-based architecture
• Client-side routing with React Router
• Reusable UI components
• Interactive navigation menu
• University information pages
• Course showcase
• Campus and facilities sections
• Student testimonials
• Contact page with Google Maps integration
• Contact form with EmailJS support
• Clean and maintainable project structure

---

Tech Stack

Frontend

• React
• Vite
• JavaScript (ES6+)
• React Router DOM
• HTML5
• CSS3

Third-Party Services

• EmailJS
• Google Maps Embed API
• Font Awesome

---

Project Structure

src
├── assets
│   └── image
├── components
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── SubHeader.jsx
│   └── ...
├── pages
│   ├── Home
│   ├── About
│   ├── Course
│   ├── Blog
│   └── Contact
├── App.jsx
├── main.jsx
└── App.css

---

Installation

Clone the repository

git clone https://github.com/your-username/eduhub-react.git

Navigate to the project directory

cd eduhub-react

Install dependencies

npm install

Start the development server

npm run dev

Open your browser and visit

http://localhost:5173

---

Production Build

Build the application

npm run build

Preview the production build

npm run preview

---

Key Learning Outcomes

• Building reusable React components
• Component composition and props
• React Hooks (useState)
• Client-side routing with React Router
• Responsive web design
• Managing assets in React
• Integrating external services (EmailJS and Google Maps)
• Converting a static website into a React application

---

Future Enhancements

• User Authentication
• Student Dashboard
• Online Admission System
• Course Enrollment
• Search Functionality
• Admin Dashboard
• Backend API Integration
• Database Support
• Dark Mode
• Form Validation
• Loading States and Notifications

---

Author

Muhammad Asim Kundi

• GitHub: https://github.com/muhammadasimkundi
• LinkedIn: https://www.linkedin.com/in/muhammadasimkundi/

---

License

This project is available for educational and portfolio purposes.

---

If you found this project useful, consider giving it a ⭐ on GitHub.