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

• 🛍️ 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

• 📊 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

• 🚀 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

• 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

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

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

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 

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 

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 }]; }); } }

The project uses a layered CSS approach with proper ordering:

/* styles.css */ @import "tailwindcss"; @plugin "tailwindcss-primeui"; /* CSS Layer Order: theme, base, primeng */

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

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

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

npm run build:ssr

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

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

Follow Conventional Commits:

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

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

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

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

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

Made with ❤️ by Miguel Barreto