Skip to content
/ e-store Public

A full-stack Angular application using the MEAN stack that enables users to browse and purchase products, manage their shopping cart, and features an admin dashboard for inventory management.

Notifications You must be signed in to change notification settings

A13DO/e-store

Repository files navigation

E-Store

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.

Live Web Project

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)

E-store

Table of Contents

Features

Customer Side

  • 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 Side (Dashboard)

  • 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.

Technologies Used

MEAN Stack

  • 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.

Other tools and technologies used

  • 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.

Angular Workspaces

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.

Getting Started

Prerequisites

  1. Install Angular CLI:
    npm install -g @angular/cli
    

Run

  1. In a new terminal, install the frontend dependencies:
    npm i
  2. Start the Angular application as Customer:
    ng serve shop
  3. Start the Angular application as Admin:
    ng serve admin
    

About

A full-stack Angular application using the MEAN stack that enables users to browse and purchase products, manage their shopping cart, and features an admin dashboard for inventory management.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published