Shop Next

A professional, full-featured e-commerce application built with Next.js, TypeScript, and modern web technologies.

Features

• Multi-language Support: Full English and Arabic translations with RTL layout support
• Product Catalog: Browse products with advanced filtering, sorting, and search
• Shopping Cart: Persistent cart with localStorage, quantity management
• Product Details: Image zoom, quantity selector, related products
• Responsive Design: Mobile-first design that works on all devices
• Type-Safe: Full TypeScript implementation with Zod validation
• State Management: Zustand for cart and language state
• Data Fetching: React Query with Axios for efficient API calls

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• State Management: Zustand
• Data Fetching: @tanstack/react-query + Axios
• Form Validation: React Hook Form + Zod
• UI Components: shadcn/ui
• API: FakeStore API (can be replaced with custom backend)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository: ```bash git clone ```

2. Install dependencies: ```bash npm install

or

yarn ```

3. Run the development server: ```bash npm run dev

or

yarn dev ```

4. Open http://localhost:3000 in your browser

Key Features Explained

Multi-language & RTL Support

The app supports English and Arabic with automatic RTL layout switching:

• Click the globe icon in the navbar to switch languages
• All text is translated using the useTranslation hook
• RTL layout automatically applies for Arabic

Shopping Cart

• Add products from shop or product detail pages
• Adjust quantities directly in the cart dropdown
• Cart persists across page refreshes
• Real-time subtotal calculation

Product Filtering

Combine multiple filters:

• Category selection
• Price range slider
• Minimum rating filter
• Sort by price or rating
• Search functionality

Responsive Design

• Mobile-first approach
• Breakpoints: mobile (≤640px), tablet (768px), desktop (1024px+)
• Touch-friendly interactions
• Optimized images with lazy loading

Switching from FakeStore API to Custom Backend

To use your own backend instead of FakeStore API:

1. Update the baseURL in lib/axios.ts: ```typescript const axiosInstance = axios.create({ baseURL: 'https://your-api.com', // Change this // ... }) ```

2. Adjust the API functions in lib/api/products.ts to match your backend endpoints

3. Update TypeScript types in types/product.ts if your data structure differs

4. Add authentication headers in the Axios interceptor if needed

Building for Production

```bash npm run build npm start ```

Deployment

This app is optimized for deployment on Vercel:

1. Push your code to GitHub
2. Import the repository in Vercel
3. Deploy with one click

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please open an issue or submit a pull request.