The Angular Shopping Website is a feature-rich e-commerce platform that provides three dashboards for different user roles: Manager, Shipper, and Customer. This website enables seamless online shopping experiences, allowing customers to browse and purchase products, managers to manage products and users, and shippers to handle order deliveries. The application incorporates authentication, authorization guards, and Angular Material components to enhance security and user interface consistency.
Below are some screenshots of the website:
- Manager Dashboard: Managers have access to features such as adding products, managing users, viewing orders, and performing CRUD operations on products, shippers, and customers.
- Shipper Dashboard: Shippers can view assigned orders, update delivery times, and manage their own profile information.
- Customer Dashboard: Customers can browse products, place orders, view their order history, and manage their profile details.
- Product Listing: The website displays a visually appealing product listing, providing customers with essential information like product images, descriptions, and prices.
- Authentication: The application incorporates authentication mechanisms to ensure secure access to different dashboards and protect user data.
- Authorization Guards: Angular's authorization guards are implemented to control user access based on their assigned roles.
- Angular Material: Angular Material components are utilized for consistent and responsive UI design throughout the application.
Before running the application, ensure you have the following software installed:
- Node.js: https://nodejs.org
- Angular CLI: Install globally using
npm install -g @angular/cli
-
Clone this repository to your local machine:
git clone https://github.com/your-username/angular-shopping-website.git
-
Navigate to the project directory:
cd angular-shopping-website
-
Install the project dependencies:
npm install
To run the application locally, execute the following command:
ng serve
The application will be accessible at https://localhost:4200 in your web browser.
To deploy the application to a production environment, follow these steps:
-
Build the application using the Angular CLI:
ng build --prod
-
The build artifacts will be stored in the
dist/
directory. You can then deploy these files to your preferred hosting platform.
Contributions to the Angular Shopping Website are welcome! If you encounter any issues or have suggestions for improvements, please open an issue on the GitHub repository.
If you'd like to contribute code, please follow these steps:
- Fork the repository and clone it locally.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them with descriptive commit messages.
- Push your changes to your fork.
- Submit a pull request to the main repository.
This project is licensed under the MIT License. See the LICENSE file for more information.