A scalable and production grade Figma to Next.js implementation developed for Zavisoft’s Frontend Task. This project delivers a fully responsive multi-page e-commerce interface with structured API integration, optimized state management using Redux Toolkit, and a clean, maintainable component architecture.
- ✅ Landing Page (Product Listing + Categories)
- ✅ Product Details Page
- ✅ Cart Page
| Category | Technology |
|---|---|
| Framework | Next.js |
| Language | TypeScript |
| Styling | Tailwind CSS |
| State Management | Redux Toolkit + React Redux |
| Persistence | Redux Persist |
| Data Fetching | Axios |
| Sliders | Swiper.js |
| Animation | Framer Motion |
| Notifications | React Hot Toast |
| Deployment | Netlify |
All product-related data is dynamically fetched from:
-
Get All Products https://api.escuelajs.co/api/v1/products
-
Get Products with Pagination (Offset & Limit) https://api.escuelajs.co/api/v1/products?offset=0&limit=10
-
Get Single Product https://api.escuelajs.co/api/v1/products/:id
-
Get Related Products https://api.escuelajs.co/api/v1/products/:id/related
-
Get All Categories https://api.escuelajs.co/api/v1/categories
- Axios Instance used for centralized configuration
- Base URL stored in
.env - Clean service-based API structure
- Loading, error, and empty states implemented
- Add to cart
- Remove from cart
- Duplicate product handle
- Persist cart state using Redux Persist
- Total price calculation using optimized logic
- Toast notifications for user feedback
- Pixel-perfect Figma implementation
- Mobile-first responsive design
- Custom preloader
- Page transition animations using Framer Motion
- Multiple Swiper sliders:
- Banner slider
- Category slider
- Product gallery slider
- Related product slider
- Review slider
- Next.js Image Optimization
- useMemo & useCallback optimization
- Modular component architecture
- Clean folder structure
- Reusable UI components
- Environment variable configuration
- Type-safe development with TypeScript
# Clone the repository
git clone https://github.com/mironcoderr/kicks-mironmahmud.git
# Navigate to project folder
cd kicks-mironmahmud
# Install dependencies
npm install
# Run development server
npm run dev🌐 Live URL: https://zavisoft-kicks.netlify.app/
📦 GitHub Repository: https://github.com/mironcoderr/kicks-mironmahmud
Name: Miron Mahmud
Email: mironcoder@gmail.com
Phone: +880 18382 88389
Website: https://mironmahmud.com
GitHub: https://github.com/mironcoderr