A modern, full-stack e-commerce platform built with React, TypeScript, and Supabase. This project implements a robust, scalable, and user-friendly shopping experience with advanced features and best practices in web development.
This e-commerce platform is a modern web application that provides a seamless shopping experience with features like real-time inventory management, secure authentication, and a responsive design. Built with performance and user experience in mind, it leverages the latest web technologies and follows industry best practices.
- 🔐 Secure authentication and authorization
- 🛒 Real-time shopping cart management
- 🌐 Internationalization support
- 📱 Responsive design for all devices
- 🎨 Modern UI with shadcn/ui components
- 🔄 Real-time data synchronization
This project is based on this E-Commerce Website Design . The design includes:
- Modern and clean UI components
- Responsive layouts for all devices
- Consistent color scheme and typography
- Interactive components and animations
- User flow and navigation patterns
The implementation uses shadcn/ui components to match the design system while maintaining flexibility for customization.
- Framework: React 19.0.0
- Language: TypeScript 5.7.2
- Build Tool: Vite 6.1.0
- UI Components: shadcn/ui (based on Radix UI)
- State Management:
- Zustand for global state
- TanStack Query for server state
- Routing: TanStack Router
- Styling:
- Tailwind CSS 4.1.10
- Tailwind Merge
- Class Variance Authority
- Icons: Lucide React
- Internationalization: i18next
- Platform: Supabase
- Database: PostgreSQL
- Authentication: Supabase Auth
- Storage: Supabase Storage
- Package Manager: pnpm
- Testing: Vitest
- Linting: ESLint
- Type Checking: TypeScript
- Version Control: Git
src/
├── assets/ # Static assets
├── components/ # Reusable UI components
├── lib/ # Utility functions and configurations
├── routes/ # Application routes
├── store/ # State management (Zustand)
├── utils/ # Helper functions
├── i18n.ts # Internationalization setup
├── main.tsx # Application entry point
└── styles.css # Global styles
components/: Reusable UI components built with shadcn/uiroutes/: Page components and route definitionsstore/: Zustand store configurationslib/: Shared utilities and configurationsutils/: Helper functions and constants
- Email/password authentication
- Social login integration
- Protected routes
- Product listing with pagination
- Advanced filtering and search
- Product categories
- Real-time cart updates
- Persistent cart state
- Quantity management
- Price calculations
- Cart validation
- Multi-step checkout
- Address management
- Payment integration
- Order confirmation
- Email notifications
- Profile management
- Order history
- Wishlist
- Address book
- Account settings
- Node.js (v18 or higher)
- pnpm
- Git
- Supabase account
Create a .env file in the root directory:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Create a Supabase Project
- Go to Supabase Dashboard
- Click "New Project"
- Choose a name and database password
- Select a region closest to your users
- Wait for the database to be provisioned
-
Database Schema
- The complete database schema, including tables, policies, and indexes, is defined in
supabase-pg-schema.sql - Run this SQL file in the Supabase SQL editor to set up your database
- The schema includes:
- Products
- Cart
- Wishlist
- Row Level Security (RLS) policies
- Storage policies
- Performance indexes
- The complete database schema, including tables, policies, and indexes, is defined in
-
Storage Setup
- Create a new bucket called
productsfor product images - Set the bucket's privacy to public
- Start by adding a product image to the bucket
- Then, add the image URL to the product in the database when creating a new product in product table
- Create a new bucket called
-
Authentication Setup
- Enable Email/Password authentication in Authentication > Providers
- Configure email templates in Authentication > Email Templates
- Configure Google OAuth2:
- Go to Google Cloud Console
- Create a new project or select an existing one
- Navigate to "APIs & Services" > "Credentials"
- Click "Create Credentials" > "OAuth client ID"
- Set up the OAuth consent screen if prompted
- Choose "Web application" as the application type
- Add authorized redirect URI:
https://[YOUR_PROJECT_REF].supabase.co/auth/v1/callback - Copy the Client ID and Client Secret
- In Supabase Dashboard, go to Authentication > Providers > Google
- Enable Google auth and paste your Client ID and Client Secret
-
API Configuration
- Get your project URL and anon key from Project Settings > API
- Add these to your
.envfile - Configure CORS in Project Settings > API if needed
# Clone the repository
git clone https://github.com/zoasr/supa-shop.git
# Navigate to project directory
cd supa-shop
# Install dependencies
pnpm install
# Start development server
pnpm dev- Development server runs on
http://localhost:3000
# Build for production
pnpm build
# Preview production build
pnpm serve# Run tests
pnpm test
# Run tests in watch mode
pnpm test:watchusers: User profiles and authenticationproducts: Product catalogcart: Shopping cart itemswishlist: Wishlist items
Note: The
userstable is created by default when a Supabase project is created
- Email/password
- OAuth providers
Detailed schema documentation available in the supabase-pg-schema.sql file.
- Consistent color palette
- Typography system
- Spacing scale
- Component variants
- Responsive breakpoints
- shadcn/ui components
- Custom component extensions
- Responsive design patterns
- Accessibility features
- Custom theme configuration
- CSS variables
- Supabase Auth
- Supabase RLS
- Supabase Storage
This project is licensed under the MIT License - see the LICENSE file for details.
- shadcn/ui
- Supabase
- TanStack
- Tailwind CSS
- E-Commerce Website Design by Almdrasa
Please include appropriate attribution when using this project, including:
- A link to this repository
- The MIT license notice
- Attribution to third-party libraries and resources used