A lightweight e-commerce web application built with Angular, Tailwind CSS, PrimeNG, and JSON Server. It demonstrates state management with RxJS and BehaviorSubject.
- 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)
- Angular 19.2.7
- Tailwind CSS for utility-first styling
- PrimeNG for ready-made UI components
- RxJS with
BehaviorSubjectfor reactive state - JSON Server to simulate a RESTful backend
git clone https://github.com/yamanerkam/mini-e-commerce.git
cd mini-e-commerce
npm install
ng serve
Visit: http://localhost:4200
npx json-server --watch db.json
JSON server will run on http://localhost:3000
If you prefer global install:
npm install -g json-server
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
Contributions are welcome! Please open an issue or pull request for enhancements or bug fixes.
This project is licensed under the MIT License.