Skip to content

Mariem213/ME.Store

BranchesTags

Repository files navigation

🛍️ ME.Store

Angular TypeScript Bootstrap RxJS

A modern, full-featured e-commerce web application built with Angular 19

Live Demo · Getting Started · Project Structure

📖 About the Project

ME.Store is a responsive, single-page e-commerce application built with Angular 19. It provides a seamless online shopping experience — from browsing products to completing a purchase — with a clean, modern UI powered by Bootstrap 5 and Font Awesome icons.

The app follows Angular best practices: standalone components, lazy-loaded routes, HTTP interceptors for authentication, route guards for access control, and a service-oriented architecture for clean data management.

✨ Key Features

  • 🔐 Authentication — Login / Register with JWT token management via HTTP interceptor
  • 🛒 Shopping Cart — Add, remove, and update product quantities in real time
  • 🔍 Product Browsing — Browse, search, and filter products by category
  • 📦 Order Management — View order history and track order status
  • 👤 User Profile — Manage personal information and preferences
  • 🛡️ Route Guards — Protected pages that require authentication
  • 📱 Fully Responsive — Mobile-first design using Bootstrap 5 grid

🎯 Target Users

User Type Description
Shoppers End customers who browse, search, and purchase products online
Guest Users Visitors who can browse the catalog without an account
Registered Users Authenticated customers with cart, orders, and profile access
Developers Teams looking for a scalable Angular e-commerce starter template

🚀 Deployment

Environment URL
Production https://me-store-nine.vercel.app/

🖥️ UI Screens

Below is an overview of the main screens in the application:

1. 🏠 Home Page

The landing page displaying featured products, promotional banners, and category highlights.

2. 📋 Product Listing Page

A grid/list view of all products with filtering by category, price range, and sorting options.

3. 🔍 Product Detail Page

A dedicated page per product showing images, description, price, stock status, and an "Add to Cart" button.

4. 🛒 Shopping Cart

A sidebar or full-page cart showing selected items, quantities, subtotal, and a checkout button.

5. 🔐 Login / Register Pages

Clean authentication forms with validation feedback and redirect-after-login support.

6. 👤 User Profile Page

Displays user information with options to edit personal details and change the password.

7. 📦 Orders Page

A history of past orders with statuses (Pending, Shipped, Delivered) and order details.

8. ❌ 404 Not Found Page

A friendly error page for unmatched routes.

📁 Project Structure

my-store/
├── src/
│   ├── app/
│   │   ├── components/          # Shared/reusable UI components
│   │   │   ├── navbar/          #   Top navigation bar
│   │   │   ├── footer/          #   Site footer
│   │   │   ├── product-card/    #   Product card component
│   │   │   └── ...
│   │   ├── guards/              # Route guards (auth protection)
│   │   │   └── auth.guard.ts
│   │   ├── interceptors/        # HTTP interceptors
│   │   │   └── auth.interceptor.ts  # Attaches JWT to API requests
│   │   ├── pages/               # Lazy-loaded route pages
│   │   │   ├── home/
│   │   │   ├── products/
│   │   │   ├── product-detail/
│   │   │   ├── cart/
│   │   │   ├── login/
│   │   │   ├── register/
│   │   │   ├── profile/
│   │   │   ├── orders/
│   │   │   └── not-found/
│   │   ├── services/            # Angular services (API, state)
│   │   │   ├── auth.service.ts
│   │   │   ├── product.service.ts
│   │   │   ├── cart.service.ts
│   │   │   └── order.service.ts
│   │   ├── app.component.ts     # Root component
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   ├── app.config.ts        # Application providers config
│   │   └── app.routes.ts        # Application routing
│   ├── index.html               # HTML entry point
│   ├── main.ts                  # Angular bootstrap
│   └── styles.css               # Global styles
├── public/                      # Static assets (images, icons)
├── angular.json                 # Angular CLI configuration
├── package.json
└── tsconfig.json

🗄️ Database Schema

The following schema represents a typical REST API backend that would power this Angular frontend.

users Table

Column Type Description
id INT (PK) Unique user identifier
name VARCHAR(100) Full name
email VARCHAR(150) Unique email address
password_hash VARCHAR(255) Hashed password
role ENUM('user','admin') User role
created_at TIMESTAMP Account creation date

products Table

Column Type Description
id INT (PK) Unique product identifier
name VARCHAR(200) Product name
description TEXT Product description
price DECIMAL(10,2) Product price
stock INT Available quantity
category_id INT (FK) Reference to categories
image_url VARCHAR(500) Product image URL
created_at TIMESTAMP Date added

categories Table

Column Type Description
id INT (PK) Unique category identifier
name VARCHAR(100) Category name
slug VARCHAR(100) URL-friendly identifier

cart_items Table

Column Type Description
id INT (PK) Unique cart item identifier
user_id INT (FK) Reference to users
product_id INT (FK) Reference to products
quantity INT Item quantity
added_at TIMESTAMP When item was added

orders Table

Column Type Description
id INT (PK) Unique order identifier
user_id INT (FK) Reference to users
total_price DECIMAL(10,2) Order total
status ENUM('pending','shipped','delivered','cancelled') Order status
created_at TIMESTAMP Order date

order_items Table

Column Type Description
id INT (PK) Unique identifier
order_id INT (FK) Reference to orders
product_id INT (FK) Reference to products
quantity INT Purchased quantity
unit_price DECIMAL(10,2) Price at time of purchase

⚙️ Getting Started

Prerequisites

Make sure you have the following installed:

Tool Version Download
Node.js v18+ nodejs.org
npm v9+ Bundled with Node.js
Angular CLI v19 See below

Install Angular CLI globally:

npm install -g @angular/cli@19

🔧 Installation

1. Clone the repository

git clone https://github.com/your-username/my-store.git
cd my-store

2. Install dependencies

npm install

3. Configure environment

Create src/environments/environment.ts:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'   // Your backend API URL
};

4. Start the development server

ng serve

Open your browser and navigate to http://localhost:4200. The app will automatically reload on file changes.

🏗️ Build for Production

ng build

The production-optimized output is placed in the dist/my-store/ directory, ready to be served from any static hosting platform (Netlify, Vercel, Firebase Hosting, AWS S3, etc.).

🧪 Running Tests

# Unit tests
ng test

# Single run (CI mode)
ng test --watch=false --browsers=ChromeHeadless

🛠️ Tech Stack

Layer Technology
Framework Angular 19 (Standalone Components)
Language TypeScript 5.7
Styling Bootstrap 5.3 + Bootstrap Icons
Icons Font Awesome 7
HTTP Client Angular HttpClient + RxJS 7.8
Routing Angular Router (Lazy Loading)
Auth JWT via HTTP Interceptor

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch: git checkout -b feature/amazing-feature
  3. Commit your changes: git commit -m 'Add amazing feature'
  4. Push to the branch: git push origin feature/amazing-feature
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

Made with ❤️ using Angular 19

About

E-commerce Angular Project

me-store-nine.vercel.app/

Topics

api services angular typescript html5 css3 routing bootstrap5

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages