Ecommerce Point of Sale System

Description

This web application serves as a simple yet functional ecommerce point of sale system. Users can browse a list of available items either by category of name, view detailed information about each item, and perform actions such as adding items to their cart or making a purchase.

Table of Contents

• Features
• Technologies Used
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Styling
• TypeScript
• Mock API
• Contributing
• Preview
• License

Features

1. Homepage:

   • Display a list of items available for sale.
   • Each item includes a title, price, Rating, description and an image .
   • Clicking on an item navigates the user to a detailed view.

2. Detailed View:

   • Display detailed information about the selected item.
   • Options to add the item to the cart or make a purchase.
   • Button or link to return to the homepage.
   • Displays related Items to the viewed item.

3. Checkout view:

   • Displays the total amount of money to be paid
   • Contains the necssary inputs to checkout by the user

4. Styling:

   • Styled to resemble an ecommerce platform.
   • Utilizes Tailwind CSS for a visually appealing and responsive design.

5. TypeScript:

   • Codebase is entirely written in React TypeScript for static typing and improved code quality.

6. Mock API:

   • Utilizes a mock JSON data to fetch the list of items available for sale.

Technologies Used

• React.ts
• Tailwind CSS
• TypeScript
• Mock API (JSON)

Getting Started

Prerequisites

• Both Node.js and npm must be installed.

Installation

1. Clone the repository: git clone [email protected]:Intelligence247/seamlessPOS_Task.git or using the https url git clone https://github.com/Intelligence247/seamlessPOS_Task.git
2. Navigate to the project directory: cd seamlessPOS_Task
3. Install dependencies: npm install or npm i

Usage

• Run the application locally: npm start
• Open your browser and visit: http://localhost:5173

Styling

The application is styled using Tailwind CSSto achieve a visually appealing and responsive design.

TypeScript

The codebase is written entirely in TypeScript to leverage static typing and improve code quality.

Mock API

A mock JSON data is used to fetch the list of items available for sale.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

Preview

Go Live

• Home page

• Shopping-Cart page

• Product-Details page

• Checkout page

License

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