https://github.com/til2to/ecommerce

This project is an ecommerce web app for showcasing products. Users are able to add items to cart, remove, update and get the amount to be paid in different currencies. Redux was used for real time updates
https://github.com/til2to/ecommerce

graphql reactjs redux styled-components

Last synced: 6 days ago
JSON representation

This project is an ecommerce web app for showcasing products. Users are able to add items to cart, remove, update and get the amount to be paid in different currencies. Redux was used for real time updates

• Host: GitHub
• URL: https://github.com/til2to/ecommerce
• Owner: til2to
• Created: 2023-01-16T15:53:17.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-04T01:12:40.000Z (almost 2 years ago)
• Last Synced: 2024-12-09T16:52:50.707Z (16 days ago)
• Topics: graphql, reactjs, redux, styled-components
• Language: JavaScript
• Homepage:
• Size: 2.79 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  
Scandiweb Junior React Developer test assignment



## 📗 Table of Contents

- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

  - [Run tests](#run-tests)

  - [Deployment](#triangular_flag_on_post-deployment)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [❓ FAQ (OPTIONAL)](#faq)

- [📝 License](#license)

## 📖 Ecommerce web app



  


  




* This ecommerce app is a web app for shopping. 

* Add products or remove products. 

* Increase/decrease count of a particular selected product.

* Select various attributes (color, size etc) for each product.

* Converts total amount of products to reflect the current currency. No Api

## 🛠 Built With 

* Project was built with React class component. No functional component used.

### Tech Stack 

  Client

  


    
React.js

    
Redux

    
Javascript

    
styled Components

  


  Server

  


    
Apollo GraphQl

  


Database/ storage

  
Browser's Local Storage


### Key Features 

- *Data is persistent even if the browser is closed*

- *Built a customize drop down without the use of HTML "select" and "option" tag*

- *Redux was used to ensure that state changes is globally reflected instantly without refreshing the browser*

- *There is a dynamic url which has the id for each product that is selected*

- *Same product with different attributes selected is treated as new product using the unique products attributes selected*

(back to top)


## 🚀 Live Demo 

> Link cooming soon.

- [Live Demo Link](#)

(back to top)


## 💻 Getting Started 

To get a local copy up and running, follow these steps.

### Prerequisites

- *Install node packages. This can be achieved using npm install*

- *Computer with browser*

- *Mobile device with browser*

### Setup

Clone this repository to your desired folder:

- cd your-local-folder

- clone this repository into your local directory

- open the project in your favorite code editor

- Install node packages 

- run npm start to preview in your local browser

### Install

Install this project with: npm install

### Usage

To run the project, execute the following command:

-*Start the server with: npm start or yarn start*

### Deployment

You can deploy this project using:

(back to top)


## 👥 Authors 

👤 *Author1*

Dennis Owusu Prah

- GitHub: [@til2to](https://github.com/til2to)

(back to top)


## 🔭 Future Features 

- [ ] *Add postgresql database*

- [ ] *Add payment methods*

- [ ] *Currently working to deploy it*

(back to top)


## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

(back to top)


## ⭐️ Show your support 

If you like this project... thumbs up and please follow my github page

(back to top)


## 🙏 Acknowledgments 

- Hat tip to anyone whose code was used

- Hat tip to anyone who inspired my codebase

(back to top)


## ❓ FAQ (OPTIONAL) 

> Add at least 2 questions new developers would ask when they decide to use your project.

- *How was the browser's storage and redux used interchangeably*

  - Always be mindful of the return statement for the state in the redux like was followed in this project

- *Was someone else's code used*

  - No. Code wasn't copied. I believe algorithms and data structures are very powerful to handle greater things. 

  

(back to top)


(back to top)


## 📝 License

This project is [MIT](https://choosealicense.com/licenses/mit/) licensed.