Watch Store

A fully-featured e-commerce platform for premium watches, built using modern web development technologies to deliver a seamless shopping experience.

🌟 Features

• Global State Management: Powered by @reduxjs/toolkit and react-redux for efficient state handling
• Server-Side Rendering: Built with Next.js for optimized performance and scalability
• Internationalization: Supports multiple languages using next-intl
• Rich Data Visualizations: Interactive charts and analytics with chart.js and react-chartjs-2
• Map Integrations: Location services powered by leaflet and react-leaflet
• Media Optimization: Image compression using browser-image-compression and sharp
• Advanced Animations: Smooth UI animations with framer-motion
• Infinite Scroll: Seamless loading with react-infinite-scroll-component
• Form Validation: User input validation powered by formik and yup

🛠 Technologies Used

Frontend

• Next.js (v14.2.5): React framework for server-side rendering and static site generation
• React (v18): Library for building user interfaces
• React DOM (v18): Package for DOM manipulations
• React Icons: Icon library for enhancing UI
• React Toastify: Notifications and alerts for better UX
• Swiper: Carousel/slider functionality

Styling

• Tailwind CSS: Utility-first CSS framework for responsive UI
• DaisyUI: Predefined components for Tailwind CSS

State Management

• Redux Toolkit: Advanced global state management
• Redux Persist: Persist and rehydrate state
• React Query: Data-fetching with caching and synchronization

Data Management

• Axios: Promise-based HTTP client
• React Query: Server state management
• Formik & Yup: Form handling and validation

Media & Optimization

• Cloudinary: Cloud-based image management
• Sharp: High-performance image processing
• Browser Image Compression: Client-side image optimization

Maps & Visualization

• Leaflet: Interactive maps
• Chart.js: Data visualization
• React Chartjs 2: React components for Chart.js

Development Tools

• TypeScript: Static type checking
• ESLint: Code linting
• Prettier: Code formatting
• Husky: Git hooks automation

🚀 Installation

Follow these steps to set up and run the application locally:

1. Clone the Repository:

      git clone https://github.com/Eng1Mahmoud/watch-store.git
      cd watch-store

2. Install Dependencies:

   npm install

3. Start Development Server:

   npm run dev 

🔗 Live Demo

Experience the app live: Watch Store App Demo

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📜 Commit Guidelines

We follow conventional commits specification:

• feat: New features
• fix: Bug fixes
• docs: Documentation changes
• style: Code style changes
• refactor: Code refactoring
• test: Test updates
• chore: Build process or auxiliary tool changes

🐛 Bug Reports

If you discover any bugs, please create an issue here including:

1. Bug description
2. Steps to reproduce
3. Expected behavior
4. Actual behavior
5. Screenshots (if applicable)

👨‍💻 Author

Mahmoud Mohamed

• GitHub: @Eng1Mahmoud

If you found this project useful, please consider giving it a ⭐️