Angular Full Stack (MEAN Stack) application for users to browse and purchase products, manage their shopping cart, and handle orders efficiently. This application features user authentication, product listings, and an admin dashboard for managing inventory.
Visit the Store as Customer Store Demo.
Visit the Store Dashboard as Admin Dashboard Demo. (please be patient, it may take a minute to load)
Back-End API Docs API Swagger (still working on it)
- User Authentication: Sign up or sign in to your own profile using JWT for secure user sessions.
- Product Search: Users can browse, search, and filter products by categories and view detailed product pages.
- Cart and Wishlist Management: Add or delete products from your cart and wishlist.
- Order Submission: Submit your order (order: selected products from your cart and user information) to the backend.
- Admin Dashboard: Admin can manage products, orders, and users accounts.
- Product Management: View all products, and create, update, or delete products in the shop.
- Order Management: View all submitted orders along with customer information.
- MongoDB: NoSQL database for storing product and user data.
- Angular: Frontend framework for building the user interface.
- Express.js: Web framework for Node.js for handling requests.
- Node.js: JavaScript runtime for server-side development.
- Mongoose: ODM library for MongoDB to model application data.
- JWT (JSON Web Tokens): Used for secure user authentication, ensuring that user sessions are protected.
- Bcrypt.js: Library for hashing passwords to enhance security in user authentication.
- Bootstrap: CSS framework for responsive design.
- PrimeNG: A rich UI component library for Angular applications.
- Angular Material: A set of reusable UI components that implement Google's Material Design.
This project utilizes an Angular Workspace structure to manage multiple applications within a single codebase. The workspace contains two primary applications:
- User Application: The main frontend application for end-users.
- Admin Application: A separate application for administrators, providing features for managing the inventory.
Prerequisites
- Install Angular CLI:
npm install -g @angular/cli
Run
- In a new terminal, install the frontend dependencies:
npm i
- Start the Angular application as Customer:
ng serve shop
- Start the Angular application as Admin:
ng serve admin