- Introduction
- Features
- Technologies Used
- Monorepo Architecture
- Installation
- Usage
- API Integration
- Folder Structure
- Pages
- Contributing
- License
The Simple Shopping Cart App is a modern e-commerce platform built with Next.js and React, designed to provide users with a seamless shopping experience. It allows users to browse products, add them to their cart, and proceed to checkout with multiple payment options.
- Browse products by categories
- View product details including title, price, and description
- Add/remove items from the shopping cart
- Apply discounts, calculate subtotal, and display order summary
- Choose from various payment methods during checkout
- Responsive design for desktop, tablet, and mobile devices
- Next.js
- React
- Redux (for state management)
- Tailwind CSS (for styling)
- Axios (for HTTP requests)
- FakeStoreAPI (for mock product data)
The Simple Shopping Cart App follows a monorepo architecture, which allows for managing both the web and mobile apps from the same codebase. The repository structure includes:
packages/web/
: Next.js web apppackages/mobile/
: Corresponding mobile app (not implemented in this sample)
- Clone the repository:
git clone https://github.com/arshadbajil/finanshell-abc-store.git
- Navigate to the project directory:
cd finanshell-abc-store
- Install dependencies for the web app:
cd packages/web
npm install
- Start the development server for the web app:
npm run dev
- Open your browser and navigate to:
http://localhost:3000
The Simple Shopping Cart App integrates with the FakeStoreAPI to fetch mock product data. The API endpoints used are:
- Products Endpoint:
https://fakestoreapi.com/products
- Categories Endpoint:
https://fakestoreapi.com/products/categories
finanshell-abc-store/
│
├── packages/
│ ├── web/ # Next.js web app
│ │ ├── components/ # React components
│ │ ├── pages/ # Next.js pages
│ │ │ ├── products/ # Products related pages
│ │ │ │ ├── [category].tsx # Products by category page
│ │ │ │ └── [id].tsx # Single product details page
│ │ ├── public/ # Static assets
│ │ ├── redux/ # Redux store setup
│ │ ├── styles/ # Global styles
│ │ ├── .gitignore # Git ignore file
│ │ ├── package.json # NPM package configuration
│ │ └── README.md # Project documentation (web app)
│ │
│ └── mobile/ # Corresponding mobile app (not implemented)
│ ├── components/ # React Native components
│ ├── screens/ # React Native screens
│ ├── assets/ # App assets
│ ├── redux/ # Redux store setup (for mobile app)
│ ├── styles/ # App styles
│ ├── .gitignore # Git ignore file
│ ├── package.json # NPM package configuration
│ └── README.md # Project documentation (mobile app)
│
├── .gitignore # Git ignore file for the root directory
├── LICENSE.md # License file
└── README.md # Project documentation (root)
The products by category page displays all products under a specific category. The URL structure for this page is /products/[category]
. For example, /products/electronics
.
The single product details page shows detailed information about a specific product. The URL structure for this page is /product/[id]
. For example, /product/1
.
Contributions are welcome! If you have any suggestions, bug fixes, or new features to add, please fork the repository and create a pull request.
This project is licensed under the MIT License - see the LICENSE.md file for details.