🛒 Everything Grocery

Next-Gen E-Commerce Platform for Modern Grocery Shopping

Features

Core Features

• Modern Shopping Experience
• Instant search with debouncing
• Product filtering & sorting
• Infinite scroll & pagination
• Real-time inventory updates

User Experience

• Responsive Design
• Mobile-first approach
• PWA support (Installable on devices)
• Dark/Light mode support
• Optimized performance (Lazy loading, Code splitting)

Technical Highlights

• Cutting-Edge Stack
• Built with Vite for lightning-fast builds
• TypeScript for type safety
• Redux Toolkit for state management
• React Router 6 for navigation
• Tailwind CSS for styling

Tech Stack

Category	Technologies
Frontend	React 18, TypeScript, Redux Toolkit, React Router 6, React Hook Form
Styling	Tailwind CSS, Headless UI, Framer Motion (animations)
Build	Vite 4, Rollup, SWC
Testing	Jest, React Testing Library, MSW (Mock Service Worker)
Linting	ESLint, Prettier, Husky (Git Hooks)
Deployment	Vercel (Frontend)

Getting Started

Prerequisites

• Node.js 18+ (LTS recommended)
• npm (v9+) or yarn (v1.22+)
• Git

Quick Start

1. Clone the repository

   git clone https://github.com/reuben-idan/alx-project-nexus.git
   cd alx-project-nexus

2. Install dependencies

   npm install
   # or
   yarn

3. Start development server

   npm run dev
   # or
   yarn dev

   Open http://localhost:5173 in your browser.

4. Build for production

   npm run build
   npm run preview

Testing

Run the test suite:

npm test
# or
yarn test

Run tests with coverage:

npm test:coverage

Project Structure

src/
├── assets/           # Static assets (images, fonts, etc.)
├── components/       # Reusable UI components
├── features/         # Feature-based modules
│   ├── auth/        # Authentication
│   ├── cart/        # Shopping cart
│   ├── products/    # Product listing & details
│   └── checkout/    # Checkout process
├── hooks/           # Custom React hooks
├── lib/             # Utility functions
├── pages/           # Page components
├── services/        # API services
├── store/           # Redux store configuration
├── styles/          # Global styles & theme
└── types/           # TypeScript type definitions

Contributing

We welcome contributions! Please follow these steps:

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

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

• Project Link: https://github.com/reuben-idan/alx-project-nexus
• Issues: GitHub Issues

Acknowledgments

• React - A JavaScript library for building user interfaces
• TypeScript - Typed JavaScript at Any Scale
• Vite - Next Generation Frontend Tooling
• Redux Toolkit - The official, opinionated Redux setup
• Tailwind CSS - A utility-first CSS framework

Show Your Support

Give a ⭐️ if this project helped you!

For any questions or feedback, please reach out to reuben.idan@gmail.com.

---

Built with ❤️ by Reuben Idan