Angular E‑commerce

Modern, responsive e‑commerce front-end — Angular 19, NgRx, Sass & Node.js with Stripe integration.

---

Table of contents

• Overview
• Features
• Tech stack
• Quick start
• Deploy to Vercel
• Project structure
• Contributing
• License
• Contact

---

Overview

A production-oriented e‑commerce front-end built with Angular 19.2, NgRx, Sass, and Node.js for Stripe payments. The project follows clean architecture, strong state management, and responsive design.

---

Features

Area	Description
Cart	Persistent cart state with NgRx
Payments	Stripe Checkout integration via Express backend
UI/UX	Responsive layout, SCSS animations, modern styling
State	NgRx Store for predictable state management
Code	Modular structure and consistent patterns

---

Tech stack

Layer	Technologies
Frontend	Angular 19.2, NgRx, RxJS, TypeScript, Sass, Stripe (client)
Backend	Node.js, Express (Stripe webhooks & checkout)
Styling	SCSS, CSS animations, responsive breakpoints
Deploy	Vercel (frontend + backend as separate projects)

---

Quick start

1. Clone and enter the repo

git clone https://github.com/ali-0407/angular-ecommerce.git
cd angular-ecommerce

2. Install and run the Angular app

cd angular-ecommerce-app
npm install
npm start

3. In another terminal — install and run the Stripe server

cd my-app-server
npm install
npm start

Open http://localhost:4200. Ensure the backend is running for checkout.

---

Deploy to Vercel

Deploy frontend and backend as two separate Vercel projects.

Project	Root Directory	Build Command	Output Directory
Frontend	angular-ecommerce-app	npm run build	dist/angular-ecommerce-app/browser
Backend	my-app-server	(none)	— (Vercel runs server.js)

Important (Angular 19): The frontend build puts files in a browser subfolder. You must set the frontend project’s Output Directory to dist/angular-ecommerce-app/browser in Vercel (Project → Settings → General). If you use dist/angular-ecommerce-app you will get 404s. The repo’s angular-ecommerce-app/vercel.json already sets this.

Backend (my-app-server) env vars: In the backend Vercel project, set Environment Variables: STRIPE_SECRET_KEY (from Stripe Dashboard), and optionally SUCCESS_URL and CANCEL_URL (e.g. https://your-frontend.vercel.app/payment/success and .../payment/cancel). If omitted, the server uses the request origin + /payment/success and /payment/cancel.

After deploying the backend: copy its URL (e.g. https://my-app-server-xxx.vercel.app). In the frontend Vercel project, add an environment variable (e.g. serverUrl or the name your Angular app uses) and set it to that backend URL so the app can call the API. Redeploy the frontend after setting the variable.

---

Project structure

angular-ecommerce/
├── angular-ecommerce-app/   # Angular frontend (UI, NgRx, Stripe client)
└── my-app-server/           # Node.js + Express (Stripe checkout & webhooks)

---

Contributing

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

For bugs or questions, open an issue.

---

License

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

---