Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/brunoanunciacaosouza/comfy-sloth

e-commerce furniture
https://github.com/brunoanunciacaosouza/comfy-sloth

auth0 react react-hooks stripe styled-components

Last synced: 7 days ago
JSON representation

e-commerce furniture

Host: GitHub
URL: https://github.com/brunoanunciacaosouza/comfy-sloth
Owner: brunoanunciacaosouza
Created: 2023-04-24T19:17:00.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-04-30T16:21:22.000Z (over 1 year ago)
Last Synced: 2024-11-19T10:57:03.371Z (about 2 months ago)
Topics: auth0, react, react-hooks, stripe, styled-components
Language: JavaScript
Homepage: https://bas-comfy-sloth.netlify.app/
Size: 4.57 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Comfy E-Store

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)
![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7)

## 📃About The Project

- 🇺🇸 English

An E-commerce website built using React with Stripe for payment gateway.
This web app includes multiple pages like Products Page with option to filter your product search, Cart Page to review your purchases and Checkout Page to complete the purchase with Stripe Payment.
Auth0 is used for User Authentication before Checking out.

- 🇧🇷 Português

Um site de comércio eletrônico construído usando React with Stripe para gateway de pagamento. Este aplicativo da web inclui várias páginas, como página de produtos com opção para filtrar sua pesquisa de produtos, página de carrinho para revisar suas compras e página de check-out para concluir a compra com o Stripe Payment. Auth0 é usado para autenticação do usuário antes do check-out.

![Desktop preview](./images/home.png)

## 📄Pages

- Home Page
- Products Page
- Single Product Page
- About Page
- Error Page
- Cart Page
- Checkout Page

![Desktop preview](./images/about.png)
![Desktop preview](./images/products.png)
![Desktop preview](./images/single-product.png)
![Desktop preview](./images/cart.png)

## 🛠️ Tools/Ferramentas

- styled components
- react hooks
- react router
- Authentication implemented using Auth0 React
- Payments using stripe
- Axios

## Run Locally

### 1. Clone this repository

```
$ git clone [email protected]:brunoanunciacaosouza/comfy-sloth.git
$ cd comfy-sloth-ecommerce-site-react
```

### 2. Create .env File

- create .env

```
REACT_APP_AUTH_DOMAIN=
REACT_APP_CLIENT_ID=
```

### 3. Run the app

```
$ npm install && npm start
```

The app will run in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.