An e-commerce website for selling electronics, built with NodeJS, TypeScript, React, Redux, and Docker.
This e-commerce website for selling electronics was developed as part of my ReactJS training during my internship at Dassault Systèmes. I have obtained permission to display and share this work as part of my portfolio.
After completing the training, I extended the project by adding Docker container support, and updated the e-commerce website to reflect real-world store.
- NodeJS LTS Version 16.16.0 or later (with npm 8.11.0 installed)
- Install Docker, change directory into the repository
- Type
docker build -t electronics-commerce-img .to build the docker image - Type
docker run -p 3000:3000 -p 8080:8080 electronics-commerce-imgto run the docker image - Go to
http://localhost:3000(change port depending on your settings)
- Clone the repository.
- Open another powershell into
datapath wheredb.jsonis located (don't close previous) - Type
npm install -g json-serverto install JSON Server globally for quick backend - Type
json-server -p 8080 --watch data/db.json, then go tohttp://localhost:8080to verify that the database is started
- Open powershell into the root of the project folder (with
package.json) - Type
npm installto install dependencies of the project - Type
npm startto start the project - Go to
http://localhost:3000(change port depending on your settings)
datafolder stores the JSON database.publicfolder stores site metadata, favicons, and ReactJS starting pointcatalogfolder provides components that are used in displaying products in a catalog fashion.ProductGalleryComponent.tsxdisplays product in a "gallery" (aka Grid-like) format.ProductListComponent.tsxdisplays product in a "list" format.ProductsComponent.tsxis the holder of either gallery or list of products.
commonfolder houses components of the website that are not part of the catalog.modelsdefine the format for the JSON database structure & data.shoppingcartis the same ascatalogexcept it handles the shopping cart side and only displays in a "list" formatstoreis where Redux functionality is defined especially on credentials persistence.
