Giter VIP home page Giter VIP logo

ecommerce-website's Introduction

Project Name

Nooriam Ecommerce Project

Description

a simplified e-commerce platform using React that allows users to view products and add them to a shopping cart

Table of Contents

Requirement

This project requires Node.js to be installed. and it specifically requires a version greater than v20.11.0 Download and install it from nodejs.org.

Installation

Install backend

    cd backend
    npm install

Install frontend

    cd ecommerce
    npm install

Usage

Run backend

    cd backend
    npm run dev

Run frontend

    cd ecommerce
    npm run dev

Run tests

    cd ecommerce
    npm run test

Architecture

Overview: This Application are separated into two pages, one is Product Listing Page, the other is the Cart Page

Technologies:
    - Frontend build tool (Vite vs create-react-app): used Vite, which is more popular, fast and light weight
    - React UI Library (MUI): it's easier to build a decent responsive app with UI library
    - API integration (fetch/axios/react-query): the app is very simple, we don't need interceptors or cache in frontend, so used fetch
    - State Management (Context vs Redux): the Global State in this app is very simple and not deep nested, Context is enough to handle global state

Assumptions and Design Decisions

Design Link: https://excalidraw.com/#json=XpCAxy5rS0jdx1bJRaRTY,hNlPAvuiObICL2ZwNu4OSw

Assumptions:

  • assume we have a cart page for users to manage the products in cart
  • assume we might have multiple products, so introduced pagination, which combined with search and filter
  • assume when user refresh the page, we still want to keep the product in cart, so I used localstorage to store the products in cart

ecommerce-website's People

Contributors

charlesxyt avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.