A modern, premium E-Commerce web application built with Next.js featuring Apple-style liquid glass effects, dark theme, and smooth animations.
- Liquid Glass Effects: Apple-inspired glassmorphism design throughout the app
- Dark Theme: Consistent dark theme with gradient backgrounds
- Smooth Animations: Framer Motion powered animations and transitions
- Responsive Design: Fully responsive across all device sizes
- Premium Feel: High-quality UI components with attention to detail
- Product Catalog: Dynamic product loading from FakeStore API
- Category Filtering: Browse products by categories
- Advanced Search: Search products with filters and sorting
- Shopping Cart: Full cart functionality with add/update/remove items
- User Authentication: Login/registration system with profile management
- Secure Checkout: Multi-step checkout process with form validation
- Payment Gateway: Mock Stripe integration for payment processing
- Order Confirmation: Detailed order summary and receipt
- Next.js 15: Latest Next.js with App Router
- TypeScript: Full type safety throughout the application
- Tailwind CSS: Utility-first CSS framework
- Framer Motion: Advanced animations and transitions
- Zustand: Lightweight state management
- Lucide React: Beautiful icon library
- FakeStore API: Real product data integration
- Framework: Next.js 15
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- State Management: Zustand
- Icons: Lucide React
- API: FakeStore API
- Payment: Mock Stripe integration
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone <repository-url> cd welinzo
-
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
- Hero section with liquid glass effects
- Feature highlights with animations
- Call-to-action sections
- Floating background elements
- Dynamic category loading from API
- Product grid with glass cards
- Category filtering
- Add to cart functionality
- Product ratings and reviews
- Advanced search functionality
- Real-time filtering
- Sort by price, rating, name
- Price range filtering
- Responsive search results
- User registration and login
- Profile management
- Account settings
- Authentication state management
- Shopping cart management
- Quantity updates
- Item removal
- Order summary
- Checkout integration
- Multi-step checkout process
- Shipping information form
- Payment form with validation
- Order review
- Secure payment processing
- Order confirmation
- Receipt download
- Order tracking information
- Next steps guidance
glass: Basic glass effect with backdrop blurglass-card: Enhanced glass effect for cardsglass-button: Interactive glass buttonsglass-dark: Dark variant for navigation
- Primary: Blue to Purple gradients
- Background: Dark gradient (gray-900 to purple-900)
- Text: White and gray variants
- Accents: Blue, purple, green, red for different states
- Float Animation: Subtle floating effect for background elements
- Glow Animation: Pulsing glow effect for buttons
- Shimmer Effect: Loading shimmer animation
- Hover Effects: Scale and transform on hover
- Page Transitions: Smooth page-to-page transitions
The app uses the FakeStore API for product data. To add custom products, you can:
- Modify the API calls in the components
- Create a custom API endpoint
- Use a different product API
- Modify
globals.cssfor global styles - Update Tailwind config for custom colors
- Adjust glass effects in CSS classes
- Customize animations in Framer Motion
- Cart state is managed with Zustand
- User authentication state is persistent
- All state is stored in localStorage
npm run buildnpm startnpm install -g vercel
vercel- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License.
- FakeStore API for product data
- Framer Motion for animations
- Lucide for icons
- Tailwind CSS for styling
Welinzo - Experience the future of online shopping with premium design and smooth interactions.