https://github.com/stanleyy7/eshop

A responsive e-commerce website built with React and Vite. This website also utilizes CRUD and has it's own backend made using Google Firestore.
https://github.com/stanleyy7/eshop

css cypress firebase firestore html javscript jest-tests react scss vite

Last synced: 2 months ago
JSON representation

A responsive e-commerce website built with React and Vite. This website also utilizes CRUD and has it's own backend made using Google Firestore.

• Host: GitHub
• URL: https://github.com/stanleyy7/eshop
• Owner: StanleyY7
• Created: 2022-12-11T06:37:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-06T01:26:36.000Z (about 2 years ago)
• Last Synced: 2025-01-11T23:12:22.864Z (4 months ago)
• Topics: css, cypress, firebase, firestore, html, javscript, jest-tests, react, scss, vite
• Language: JavaScript
• Homepage:
• Size: 78.5 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Project: Legion (Eshop)

Link https://stanleyy7.github.io/Eshop/

![legionLatest](https://user-images.githubusercontent.com/119549394/219933057-ce25b8a2-764e-4bda-af9b-4050a6eb3f3f.png)



## Outline

The main aim of this project was to utilise our existing knowledge of HTML, CSS/SCSS, React and Javascript to create a responsive e-commerce website. 

### Design

Below are 3 different designs/wireframes I created (using canva) for the project, ultimately I went with the Legion website design as it more closely resembled the MVP requirements of the project, I then adapted the design to better meet the MVP requirements further.

![Untitled design (13)](https://user-images.githubusercontent.com/119549394/215723162-8fb69dd3-7967-4bf8-944e-067ea26578be.png)

## MVP

The main requirements for this project were:

-   To have a Home Page

     -   Which contains:

        -   A Grid of products

        -   A Carousel of featured products

        

-   To have a Product Page (with id parameter). Similar to a product page on another site, allows the user to add to cart and select product variants.

        

-   To have all products stored in Firestore:

      -  Which stores the following information:

        -   quantity

        -   variants (could be colors, sizes, etc)

        -   price per unit

        -   name

        -   image url

        -   favourited or not (boolean)

-    To clarify, all data is to be stored in Firestore and fetched by the frontend, there is to be no static product data in the react application.

### Bonus Features

- Added Jest Component Tests

- Added Cypress Component Tests

## Summary

I met the above requirements by first creating a website wireframe/design, then I worked on the MVP requirements. More specifically, for the MVP requirements, I made a basic layout of the frontend first, then built the backend, once that was done (i.e. populated with the required data) I then worked on completing each of the MVP requirements by building the relevant components for them. After all of this was completed, I then worked on media queries.

## Tech Stack

- HTML

- CSS/SCSS

- Javascript

- React

- Vite