https://github.com/erkamyaman/mini-e-commerce

Lightweight e-commerce app built with Angular, Tailwind CSS, PrimeNG, RxJS, and JSON Server – features cart, authentication, and role-based access control.
https://github.com/erkamyaman/mini-e-commerce

angular frontend jsonserver primeng rxjs tailwindcss typescript

Last synced: 2 months ago
JSON representation

Lightweight e-commerce app built with Angular, Tailwind CSS, PrimeNG, RxJS, and JSON Server – features cart, authentication, and role-based access control.

• Host: GitHub
• URL: https://github.com/erkamyaman/mini-e-commerce
• Owner: erkamyaman
• Created: 2025-05-11T12:36:38.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-23T20:17:37.000Z (about 1 year ago)
• Last Synced: 2025-06-23T20:35:09.171Z (about 1 year ago)
• Topics: angular, frontend, jsonserver, primeng, rxjs, tailwindcss, typescript
• Language: TypeScript
• Homepage:
• Size: 313 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
🛒 Mini E-Commerce

A lightweight e-commerce web application built with Angular, Tailwind CSS, PrimeNG, and JSON Server. It demonstrates state management with RxJS and BehaviorSubject.


🚀 Features



  
Product listing and browsing

  
Shopping cart functionality

  
Responsive design with Tailwind CSS

  
Rich UI with PrimeNG

  
Mock backend with JSON Server

  
State management using Angular services and BehaviorSubject

  
Routing with Angular Router

  
Authentication guard for protected routes

  
Role-based access control (e.g., Admin, Logged-in users)



🛠️ Tech Stack



  


Angular 19.2.7

  


Tailwind CSS for utility-first styling

  


PrimeNG for ready-made UI components

  


RxJS with BehaviorSubject for reactive state

  


JSON Server to simulate a RESTful backend



📦 Installation

git clone https://github.com/yamanerkam/mini-e-commerce.git

cd mini-e-commerce

npm install



🧑‍💻 Development


Start Angular server

ng serve



Visit: http://localhost:4200


Start JSON server

npx json-server --watch db.json



JSON server will run on http://localhost:3000


If you prefer global install:

npm install -g json-server



📁 Project Structure


mini-e-commerce/

├── .vscode/                 # VS Code editor settings

├── public/                  # Static assets

├── src/

│   ├── app/

│   │   ├── core/            # Singleton services and interceptors

│   │   │   ├── guard/       # Route guards (auth, role-based)

│   │   │   ├── service/     # Core/global services (auth, user, etc.)

│   │   │   ├── types/       # Global TypeScript interfaces/types

│   │   ├── layout/          # Layout components (header, footer, etc.)

│   │   ├── pages/           # Page-level features (Home, Product, etc.)

│   │   ├── shared/          # Reusable components, directives, pipes

│   │   ├── app.routes.ts    # Central routing config

│   │   ├── app.component.ts/html/css

│   │   ├── app.service.ts   # App-level logic

│   │   └── app.config.ts    # Global app config

│   ├── assets/              # Images, icons, etc.

│   ├── environments/        # Environment files (dev, prod)

│   ├── main.ts              # App entry point

│   └── index.html           # Base HTML template

├── db.json                  # JSON Server mock API

├── primeNG.config.ts        # PrimeNG setup and themes

├── tailwind.config.js       # Tailwind CSS config

├── angular.json             # Angular workspace config

├── package.json             # Project dependencies

├── .editorconfig            # Coding style config

├── .prettierrc.json         # Prettier formatting rules

├── tsconfig.app.json        # TypeScript config

├── README.md                # Project documentation



🤝 Contributing

Contributions are welcome! Please open an issue or pull request for enhancements or bug fixes.


📄 License

This project is licensed under the MIT License.