https://github.com/yousefkhalaf0/small-e-commerce-site
small task using angular library to create e-commerce idea
https://github.com/yousefkhalaf0/small-e-commerce-site
angular auth css3 ecommerce frontend guard html5 json reactive-forms routes templatedrivenfroms typescript website
Last synced: 3 months ago
JSON representation
small task using angular library to create e-commerce idea
- Host: GitHub
- URL: https://github.com/yousefkhalaf0/small-e-commerce-site
- Owner: yousefkhalaf0
- Created: 2025-03-08T03:03:30.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-03-08T03:24:43.000Z (3 months ago)
- Last Synced: 2025-03-08T04:20:25.933Z (3 months ago)
- Topics: angular, auth, css3, ecommerce, frontend, guard, html5, json, reactive-forms, routes, templatedrivenfroms, typescript, website
- Language: TypeScript
- Homepage:
- Size: 155 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Products App
This is a small Angular application developed as part of an Angular course at ITI. The app demonstrates key Angular concepts such as routing, guards, template-driven forms, reactive forms, and component-based architecture. It also integrates Bootstrap for styling and FontAwesome for icons. The product data is fetched from a local JSON file.
## Features
- **Product Listing**: Displays a list of products fetched from a JSON file.
- **Product Details**: Shows detailed information about a selected product.
- **User Authentication**: Includes login and registration forms (template-driven and reactive forms).
- **Shopping Cart**: Allows authenticated users to view their cart (protected by an auth guard).
- **404 Page**: Handles unknown routes with a custom "Not Found" page.
- **Responsive Design**: Built using Bootstrap for a responsive and modern UI.
- **Icons**: Utilizes FontAwesome for icons.
- **JSON Data**: Product data is loaded from a local JSON file.
## Technologies Used
- **Angular**: Frontend framework.
- **Bootstrap**: CSS framework for styling.
- **FontAwesome**: Icon library.
- **Angular Router**: For navigation and routing.
- **Angular Forms**: For template-driven and reactive forms.
- **Angular Guards**: For route protection (auth guard).
- **JSON**: Local JSON file for product data.
## Project Structure
```
src/
├── app/
│ ├── products-app/
│ │ ├── auth/
│ │ │ ├── login/
│ │ │ └── register/
│ │ ├── cart/
│ │ ├── navbar/
│ │ ├── not-found-page/
│ │ ├── product-details/
│ │ └── products-list/
│ ├── guards/
│ │ └── auth.guard.ts
│ ├── app.component.ts
│ ├── app.component.html
│ ├── app.component.css
│ ├── app.routes.ts
│ ├── app.config.ts
│ └── main.ts
├── assets/
│ └── data/
│ └── products.json // JSON file containing product data
├── styles.css
└── index.html
```
## Setup Instructions
### Prerequisites
- Node.js (v16 or higher)
- Angular CLI (v15 or higher)
- Bootstrap and FontAwesome (already included in the project)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yousefkhalaf0/small-e-commerce-site.git
```
2. Navigate to the project directory:
```bash
cd small-e-commerce-site.git
```
3. Install dependencies:
```bash
npm install
```
### Running the Application
1. Start the development server:
```bash
ng serve
```
2. Open your browser and navigate to `http://localhost:4200`.
### Building the Application
To build the project for production, run:
```bash
ng build --configuration production
```
## Key Learnings
- **Routing**: Implemented Angular Router for navigation between components.
- **Guards**: Used an auth guard to protect the cart route.
- **Forms**: Created both template-driven and reactive forms for user authentication.
- **Styling**: Integrated Bootstrap and FontAwesome for a polished UI.
- **Component Architecture**: Organized the app into reusable and modular components.
- **JSON Data**: Loaded and displayed product data from a local JSON file.
## Future Improvements
- Implement a backend API for product data and user authentication.
- Add functionality to add/remove products from the cart.
- Enhance the UI with animations and transitions.
- Write unit and integration tests.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.