E-Commerce Storefront

A modern, responsive e-commerce storefront built with Angular 20 and Supabase. This application provides a complete shopping experience with product browsing, cart management, and checkout functionality.

🚀 Features

• Product Catalog: Browse products with filtering by categories
• Product Details: Detailed product view with image gallery and stock information
• Shopping Cart: Add, remove, and modify items in your cart
• Checkout Process: Complete order placement with customer information
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Real-time Updates: Live stock updates and cart synchronization
• Guest Shopping: Shop without registration using session-based cart
• Modern UI: Built with Tailwind CSS and smooth animations

📸 Screenshots

Home Page

Product Catalog

Product Details Modal

Shopping Cart

Checkout Process

🛠️ Tech Stack

• Frontend: Angular 20 with TypeScript
• Styling: Tailwind CSS with custom animations
• Backend: Supabase (PostgreSQL database with real-time capabilities)
• Authentication: Supabase Auth (optional - supports guest shopping)
• Build Tool: Angular CLI
• Package Manager: npm

📋 Prerequisites

Before running this project, make sure you have the following installed:

• Node.js (version 18 or higher)
• npm (comes with Node.js)
• Angular CLI (npm install -g @angular/cli)

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/aminmguidich/e-commerce-storefront.git
cd e-commerce-storefront

2. Install Dependencies

npm install

3. Set Up Supabase

1. Create a new project at Supabase
2. Run the migration script located in supabase/migrations/20251005143654_create_ecommerce_schema.sql
3. Create a .env file in the root directory with your Supabase configuration:

SUPABASE_URL=your_supabase_project_url
SUPABASE_ANON_KEY=your_supabase_anon_key

4. Configure Environment

Update the Supabase configuration in your Angular environment files:

// src/environments/environment.ts
export const environment = {
  production: false,
  supabaseUrl: 'your_supabase_project_url',
  supabaseKey: 'your_supabase_anon_key'
};

5. Run the Development Server

npm start

Navigate to http://localhost:4200/ to view the application.

🏗️ Project Structure

src/
├── app/
│   ├── components/           # Feature components
│   │   ├── cart/            # Shopping cart component
│   │   ├── categories/      # Product categories
│   │   ├── checkout/        # Checkout process
│   │   ├── footer/          # Footer component
│   │   ├── header/          # Header with navigation
│   │   ├── product-details/ # Product detail modal
│   │   └── product-list/    # Product catalog
│   ├── models/              # TypeScript interfaces
│   ├── services/            # Business logic services
│   └── shared/              # Shared components and utilities
│       ├── components/      # Reusable UI components
│       └── styles/          # Global styles
├── supabase/
│   └── migrations/          # Database schema
└── screenshots/             # Application screenshots

🔧 Available Scripts

• npm start - Start the development server
• npm run build - Build the project for production
• npm run ng - Run Angular CLI commands

🎨 Customization

Styling

The project uses Tailwind CSS for styling. You can customize the design by:

1. Modifying tailwind.config.js for global theme changes
2. Updating component-specific CSS files
3. Modifying the global styles in src/global_styles.css

Product Data

Products are stored in Supabase. You can:

1. Add new products through the Supabase dashboard
2. Modify the product model in src/app/models/product.model.ts
3. Update the sample data in the migration file

🗄️ Database Schema

The application uses the following main tables:

• products: Product information (name, price, description, stock, etc.)
• cart_items: Shopping cart items linked to user sessions
• orders: Order information and customer details
• order_items: Individual items within orders

🚀 Deployment

Build for Production

npm run build:prod

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

Deploy to Vercel (Recommended)

This project is optimized for Vercel deployment:

1. Quick Deploy:

   • Push your code to GitHub
   • Connect your repository to Vercel
   • Deploy automatically

2. Manual Configuration:

   • Build Command: npm run build:prod
   • Output Directory: dist/demo
   • Framework Preset: Other

For detailed deployment instructions, see DEPLOYMENT.md.

Deploy to Other Platforms

This Angular application can also be deployed to:

• Netlify: Connect your repository and deploy automatically
• GitHub Pages: Use GitHub Actions for automated deployment
• Firebase Hosting: Deploy using Firebase CLI
• AWS S3: Upload build files to S3 with CloudFront

🤝 Contributing

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

📝 License

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

🆘 Support

If you have any questions or run into issues, please:

1. Check the existing issues in the repository
2. Create a new issue with a detailed description
3. Include steps to reproduce any bugs

🙏 Acknowledgments

• Angular team for the amazing framework
• Supabase for providing an excellent backend-as-a-service
• Tailwind CSS for the utility-first CSS framework
• Pexels for providing sample product images

---

Made with ❤️ using Angular and Supabase