This is a fully responsive e-commerce website built with Angular 19 and Tailwind CSS, fetching real product data from the Fake Store API. The site features intuitive navigation, smooth dynamic routing, and a clean, modern UI with both light and dark modes. Users can browse, filter, and explore product listings with ease on any device.
https://job-fair-project.vercel.app/home
📽️ Video Demo: Watch on Google Drive
- Angular 19
- HTML, SCSS, TypeScript
- Tailwind CSS (for modern, utility-first styling)
- Fake Store API (for product data)
- Angular Routing (for seamless navigation)
- Responsive Design (optimized for mobile & desktop)
- Dark Mode Support (with toggle switch)
- ✅ Dynamic product fetching from Fake Store API
- ✅ Full products page with grid layout
- ✅ Product detail page with detailed view
- ✅ Dark Mode toggle for enhanced accessibility
- ✅ Responsive design for all screen sizes
- ✅ Filter by name (ascending/descending)
- ✅ Filter by price range
- ✅ Clean UI with Tailwind CSS
- ✅ Seamless page transitions with Angular routing
Make sure you have the following installed:
- Node.js (latest LTS version recommended)
- Angular CLI (compatible with Angular 19)
npm install -g @angular/cli
- A modern web browser (Chrome, Firefox, Edge, etc.)
-
Clone the repository:
git clone https://github.com/your-username/your-repo-name.git
-
Navigate to the project directory:
cd your-repo-name -
Install dependencies:
npm install
-
Start the development server:
ng serve --open
-
View the app in your browser at:
http://localhost:4200/
- 🛒 Add cart functionality
- 🔐 Implement user authentication & protected routes
- 💳 Add a checkout and payment system
- 💅 Improve UX with animations and transitions
- 🔍 Add advanced filtering (category, rating, availability)
- 📦 Connect to a real e-commerce backend or CMS