olesiakissa / react-ecommerce-store

An online store app written in React with the usage of GraphQL and Apollo Client

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

E-commerce Store

An online store app written in React with the usage of GraphQL and Apollo Client

Table of contents

Overview

Requirements

The user should be able to

πŸ“ Add products to the cart from home page (PLP), product description page (PDP), Cart modal and on the cart page itself and change their amount The user should be able to add products to the cart from home page (PLP), product description page (PDP), Cart modal and on the cart page itself and change their amount

πŸ“ Add product from PLP to cart without selecting the attributes

πŸ“ View selected attributes should be visible in cart modal and on the cart page

πŸ“ Filter the products by category

πŸ“ Change the currency

What I learned

πŸ“ State management and lifecycle methods in class components

πŸ“ Persisting state between page reloads using web storage

πŸ“ Product filtering

πŸ“ Working with modal window and managing page background on modal opening

πŸ“ Creating image galleries with scroll behavior

Previews

Desktop demo

desktop.mov

Product description pages

Product listing page

Cart modal

Cart page

Mobile demo

mobile.mov

Local installation

ℹ️ If you would like to run this project locally, first please clone the GraphQL endpoint to your machine and install dependencies with npm install and then run the server with npm run start command. The server will be ready at http://localhost:4000

ℹ️ To run the client, clone the project repository and install dependencies and run it the same way. Then you can open http://localhost:3000 to view it in your browser

Useful resources

Links for the quick reference and the further improvements

About

An online store app written in React with the usage of GraphQL and Apollo Client

License:Apache License 2.0


Languages

Language:JavaScript 73.0%Language:CSS 25.8%Language:HTML 1.2%