TechMart - Modern E-commerce Platform

A modern, high-performance e-commerce platform built with Angular 19, PrimeNG, and Tailwind CSS v4.

Features

Customer Features

• 🛍️ Product Catalog - Advanced filtering, search, and pagination
• 🛒 Shopping Cart - Persistent cart with real-time updates
• 💳 Checkout Process - Multi-step checkout with payment integration
• 👤 User Accounts - Registration, login, profile management
• 📦 Order Tracking - Real-time order status and delivery tracking
• ⭐ Reviews & Ratings - Product reviews and rating system
• 💝 Wishlist - Save favorite products for later

Admin Features

• 📊 Dashboard - Sales analytics and key performance indicators
• 📦 Product Management - CRUD operations with image management
• 📋 Order Management - Order processing and fulfillment
• 👥 Customer Management - User accounts and customer analytics
• 📈 Reports - Sales reports and business intelligence
• ⚙️ Settings - Store configuration and preferences

Technical Features

• 🚀 Server-Side Rendering (SSR) - Optimized for SEO and performance
• 📱 Responsive Design - Mobile-first approach with Tailwind CSS
• ⚡ Angular Signals - Modern reactive state management
• 🎨 Modern UI - PrimeNG components with custom Tailwind styling
• 🔒 Authentication - JWT-based authentication with route guards
• 📊 Real-time Updates - Live inventory and order status
• 🌙 Dark Mode - Theme switching capability

Tech Stack

Frontend

• Framework: Angular 19 with Standalone Components
• UI Library: PrimeNG 19 with Aura Theme
• Styling: Tailwind CSS v4 with Lightning CSS
• State Management: Angular Signals
• HTTP Client: Axios with interceptors
• Notifications: NGX-Toastr
• Icons: PrimeIcons

Development Tools

• Language: TypeScript 5.7
• Build Tool: Angular CLI with Vite
• Package Manager: npm
• Linting: ESLint + Prettier
• Testing: Jasmine + Karma
• CI/CD: GitHub Actions

Quick Start

Prerequisites

• Node.js 18+
• npm 8+
• Git

Installation

1. Clone the repository

   git clone https://github.com/yourusername/techmart-app.git
   cd techmart-app

2. Install dependencies

   npm install

3. Start development server

   npm start

4. Open your browser

   http://localhost:4200
   

Available Scripts

Command	Description
npm start	Start development server
npm run build	Build for production
npm run build:ssr	Build with server-side rendering
npm test	Run unit tests
npm run test:watch	Run tests in watch mode
npm run e2e	Run end-to-end tests
npm run lint	Run ESLint
npm run format	Format code with Prettier

Project Structure

src/
├── app/
│   ├── core/                    # Core functionality
│   │   ├── guards/              # Route guards
│   │   ├── interceptors/        # HTTP interceptors
│   │   ├── models/              # TypeScript interfaces
│   │   └── services/            # Core services
│   ├── features/                # Feature modules
│   │   ├── auth/                # Authentication
│   │   ├── catalog/             # Product catalog
│   │   ├── cart/                # Shopping cart
│   │   ├── checkout/            # Checkout process
│   │   ├── dashboard/           # Admin dashboard
│   │   ├── orders/              # Order management
│   │   └── users/               # User management
│   ├── layout/                  # Layout components
│   │   ├── header/              # Navigation header
│   │   ├── footer/              # Footer
│   │   └── sidebar/             # Navigation sidebar
│   ├── services/                # Business logic services
│   │   ├── auth/                # Authentication service
│   │   ├── cart/                # Cart service with Signals
│   │   ├── catalog/             # Product service
│   │   └── orders/              # Order service
│   └── shared/                  # Shared components
│       ├── components/          # Reusable components
│       ├── directives/          # Custom directives
│       └── pipes/               # Custom pipes
├── assets/                      # Static assets
├── environments/                # Environment configs
└── styles.css                   # Global styles

Architecture

State Management with Angular Signals

TechMart uses Angular Signals for reactive state management:

@Injectable({
  providedIn: "root",
})
export class CartService {
  private _items = signal<CartItem[]>([]);
  private _loading = signal(false);

  // Public readonly signals
  readonly items = this._items.asReadonly();
  readonly loading = this._loading.asReadonly();
  readonly totalItems = computed(() => this._items().length);
  readonly totalPrice = computed(() => this._items().reduce((sum, item) => sum + item.price * item.quantity, 0));

  // Actions
  addItem(product: Product, quantity = 1) {
    this._items.update((items) => {
      const existingItem = items.find((item) => item.productId === product.id);
      if (existingItem) {
        return items.map((item) => (item.productId === product.id ? { ...item, quantity: item.quantity + quantity } : item));
      }
      return [...items, { productId: product.id, quantity, ...product }];
    });
  }
}

CSS Architecture

The project uses a layered CSS approach with proper ordering:

/* styles.css */
@import "tailwindcss";
@plugin "tailwindcss-primeui";

/* CSS Layer Order: theme, base, primeng */

Development Guidelines

Component Structure

• Use standalone components
• Implement OnPush change detection
• Follow Angular style guide
• Use Signals for reactive state

Styling Guidelines

• Mobile-first responsive design
• Use Tailwind utility classes
• Leverage PrimeNG components
• Maintain consistent spacing (4px grid)

Code Quality

• Write unit tests for services
• Use TypeScript strict mode
• Follow ESLint rules
• Document complex logic

Deployment

Production Build

npm run build:ssr

Docker Deployment

docker build -t techmart-app .
docker run -p 80:80 techmart-app

Environment Variables

Variable	Description	Default
API_URL	Backend API URL	http://localhost:3000/api
NODE_ENV	Environment	development

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

Commit Convention

Follow Conventional Commits:

• feat: new features
• fix: bug fixes
• docs: documentation changes
• style: formatting changes
• refactor: code refactoring
• test: adding tests
• chore: maintenance tasks

Browser Support

Browser	Version
Chrome	111+
Firefox	128+
Safari	16.4+
Edge	111+

Performance

• ⚡ 5x faster full builds with Tailwind CSS v4
• 🚀 100x faster incremental builds
• 📦 Tree-shaking with standalone components
• 🗜️ Optimized bundles with Angular CLI

License

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

Roadmap

• Payment gateway integration (Stripe, PayPal)
• Multi-language support (i18n)
• PWA capabilities
• Advanced analytics dashboard
• Mobile app with Ionic
• Microservices backend
• AI-powered product recommendations

Support

• 📧 Email: support@techmart.com
• 💬 Discord: TechMart Community
• 📖 Documentation: docs.techmart.com
• 🐛 Issues: GitHub Issues

---

Made with ❤️ by Miguel Barreto