Shopping Cart

This simple shopping cart prototype shows how React components, Redux and NextJS can be used to build a friendly user experience with instant visual updates and scaleable code in SEO optimized ecommerce applications.

Live Demo

Table of Contents

• Features
• Tech Stack
• Getting Started
• Testing
• Eslint
• License

Features

• Search restaurants menus
• Add and remove menus from the cart
• Handle menu customization
• Filter menus by group
• Items persist in floating cart after page reloads
• Unit tests, storybook
• Responsive design
• Progressive Web Application (PWA)
• Light and Dark theme

Tech Stack

This project uses a number of open source projects to work properly:

• React.js, TypeScript — core library & language
• Next.js — The React Framework for production ready apps
• Redux, Redux ToolKit - State management
• Styled Components, — CSS in JS styles
• Material UI - Material Design React components for faster and easier web development
• Prettier, Eslint - code formating and linting tool
• Jest, Enzyme - Testing

Getting Started

Install it and run:

# Install Node.js dependencies
$ yarn install
# Runs the app in development mode. Open http://localhost:3000 to view it in the browser.
yarn dev
# Builds the app for production and optimizes the build for the best performance.
yarn build
# Start the server in local
yarn start

Testing

# run tests
yarn test
# Run tests watcher
yarn test:watch
# run test coverage
yarn test:coverage
# storybook
yarn storybook

ESLint

# run lint
yarn lint
# fix lint auto-fixable errors
yarn lint:fix
# watch
yarn lint:watch

License

This source code is licensed under the Apache License, version 2.0.

---

Author: Léon Komi Logli