🌐 GitHub Repository: https://github.com/ebrahimbeiati/online-shopping.git
A modern e-commerce platform built with Next.js 14, TypeScript, and Tailwind CSS, featuring a beautiful design, wishlist functionality, and seamless user experience.
- Modern UI - Beautiful glassmorphism design with Tailwind CSS
- Product Catalog - 25+ products across 4 categories
- Smart Search - Debounced real-time product filtering
- Wishlist System - Save products for later
- Shopping Cart - Persistent cart with real-time updates
- User Authentication - Firebase integration with protected routes
- Payment Processing - Multiple payment methods
- Responsive Design - Works on all devices
- Performance Optimized - React.memo, debounced search, skeleton loaders
- Accessibility - ARIA labels, keyboard navigation, focus management
- Error Handling - Error boundaries and graceful fallbacks
- Security - Authentication-required checkout and cart operations
- Frontend: Next.js 14, React 18, TypeScript
- Styling: Tailwind CSS with custom animations
- State Management: Zustand with persistence
- Backend: Firebase (Auth, Firestore)
- Icons: Heroicons
- Performance: React.memo, debounced search, skeleton loaders
- Testing: Vitest + React Testing Library
- Error Handling: Error boundaries and performance monitoring
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/ebrahimbeiati/online-shopping.git cd online-shopping -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run type-check- Run TypeScript type checking
The project includes comprehensive testing setup:
- Unit Tests: Component testing with Vitest + React Testing Library
- Type Checking: Full TypeScript validation
- Linting: ESLint for code quality
- Performance Monitoring: Custom hooks for tracking component performance
- React.memo: Prevents unnecessary re-renders
- Debounced Search: Optimized search with 300ms delay
- Skeleton Loaders: Smooth loading states
- Error Boundaries: Graceful error handling
- Accessibility: ARIA labels and keyboard navigation
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests for new functionality
- Submit a pull request
This project is licensed under the MIT License.
Built with ❤️ by Ebrahim Beiati