AlphaTech Electronics Store

Modern Angular e-commerce platform for electronics and tech products.

🌟 Live Demo

Visit the live application: AlphaTech Store

📱 Features

• Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• Product Categories - Browse computers, TVs, and smartphones
• Product Details - Detailed product information and specifications
• Shopping Cart - Add/remove items with real-time updates
• Wishlist - Save products for later
• Search & Filter - Sort products by price
• Smooth Navigation - Hash-based routing for GitHub Pages compatibility
• Scroll to Top - Convenient navigation button

🛠️ Technologies Used

• Angular 19 - Frontend framework
• TypeScript - Type-safe JavaScript
• Bootstrap 5 - UI components and responsive design
• Bootstrap Icons - Icon library
• SCSS - Styling preprocessor
• GitHub Pages - Deployment platform

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Installation

1. Clone the repository:

git clone https://github.com/nadeemalimohammed/alpha-tech.git
cd alpha-tech

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open your browser and navigate to http://localhost:4200

🏗️ Build

To build the project for production:

npm run build:prod

The build artifacts will be stored in the dist/ directory.

📦 Deployment

This project is configured for automatic deployment to GitHub Pages using GitHub Actions. Every push to the main branch triggers a new deployment.

Manual Deployment Steps:

1. Build the project: npm run build:prod
2. Deploy the dist/alpha-tech-store folder to GitHub Pages

🎨 Project Structure

src/
├── app/
│   ├── components/          # Reusable UI components
│   │   ├── navbar/         # Navigation bar
│   │   ├── footer/         # Footer component
│   │   ├── product-card/   # Product display card
│   │   ├── cart/           # Shopping cart
│   │   ├── wishlist/       # Wishlist component
│   │   └── scroll-to-top/  # Scroll to top button
│   ├── pages/              # Page components
│   │   ├── home/           # Home page
│   │   ├── category/       # Category listing
│   │   └── checkout/       # Checkout page
│   ├── services/           # Angular services
│   │   ├── product.service.ts
│   │   ├── cart.service.ts
│   │   └── wishlist.service.ts
│   └── models/             # TypeScript interfaces
│       └── product.model.ts
├── assets/                 # Static assets
│   └── images/            # Product images and logos
└── styles.scss            # Global styles

🛍️ Product Categories

• Computers - Laptops, desktops, and gaming rigs
• TVs - Smart TVs, OLED, and 4K displays
• Smartphones - Latest mobile devices from top brands

🔧 Development

Running Tests

npm test

Code Linting

ng lint

Build for Development

npm run build

🤝 Contributing

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

👨‍💻 Author

Nadeem Ali Mohammed

• GitHub: @nadeemalimohammed