Giter Club home page Giter Club logo

electronics-commerce's Introduction

electronics-commerce

An e-commerce website for selling electronics powered by NodeJS, Typescript, React, and Redux.

Intro

This is an e-commerce website for selling electronics. It was made as part of the ReactJS Training I had during my internship at Dassault Systemes. I had obtained permissions to display and share this work as part of my portfolio.

Homepage (Gallery product display)

Picture of Homepage (Gallery product display)

Pre-requisites

  • NodeJS LTS Version 16.16.0 or later (with npm 8.11.0 installed)

How to use

  • Clone the repository.

To run the data storage

  • Open another powershell into data path where db.json is located (don't close previous)
  • Type npm install -g json-server to install JSON Server globally for quick backend
  • Type json-server -p 8080 --watch db.json, then go to http://localhost:8080 to verify that the database is started

To run the application

  • Open powershell into the root of the project folder (with package.json)
  • Type npm install to install dependencies of the project
  • Type npm start to start the project
  • Go to http://localhost:3001 (change port depending on your settings)

Contents

  • data folder stores the JSON database.
  • public folder stores site metadata, favicons, and ReactJS starting point
  • catalog folder provides components that are used in displaying products in a catalog fashion.
    • ProductGalleryComponent.tsx displays product in a "gallery" (aka Grid-like) format.
    • ProductListComponent.tsx displays product in a "list" format.
    • ProductsComponent.tsx is the holder of either gallery or list of products.
  • common folder houses components of the website that are not part of the catalog.
  • models define the format for the JSON database structure & data.
  • shoppingcart is the same as catalog except it handles the shopping cart side and only displays in a "list" format
  • store is where Redux functionality is defined especially on credentials persistence.

More examples

Homepage (List)

Picture of Homepage (List product display)

Registration

Picture of registration screen

Login

Picture of login screen

Shopping cart

Picture of shopping cart

electronics-commerce's People

Contributors

lshun 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.