https://github.com/ferlagher/oritsuru

Sushi delivery service simulator builded with React.js and Firestore.
https://github.com/ferlagher/oritsuru

firebase react reactjs styled-components

Last synced: 1 day ago
JSON representation

Sushi delivery service simulator builded with React.js and Firestore.

• Host: GitHub
• URL: https://github.com/ferlagher/oritsuru
• Owner: ferlagher
• Created: 2022-10-23T07:56:00.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-02T17:31:26.000Z (almost 2 years ago)
• Last Synced: 2024-08-01T22:44:51.087Z (3 months ago)
• Topics: firebase, react, reactjs, styled-components
• Language: JavaScript
• Homepage: https://oritsuru.netlify.app
• Size: 11.5 MB
• Stars: 31
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Oritsuru Sushi 🍣

[![](https://img.shields.io/badge/README-Español-red)](./README.es.md)

E-commerce simulator builded with React.js and Firestore.

## Deploy

[oritsuru.netlify.app](https://oritsuru.netlify.app)

[![Netlify Status](https://api.netlify.com/api/v1/badges/a253097a-2925-4d33-bb21-7eb6cf663ab0/deploy-status)](https://app.netlify.com/sites/oritsuru/deploys)

## Description

Users can login/register if they want using an email and password.

From the index, they can browse the entire catalogue of products or filter elements based on categories, favorites or vegetarian products. It's possible to apply more than one filter and get more specific results.

From the item detail, they can add products to the cart, and then go to the checkout view and submit the order with they data.

Finally, if the user is logged, there is a profile view to check the user data and visualize previous orders.

## Libraries

- [Create React App][cra] - Project setup

- [React Router][router] - Routing and navigation

- [React Hook Form][form] - Form validation

- [Styled Components][styled] - CSS-in-JS

## Scripts

- `npm start`

    Start the project in the development enviroment.

- `npm build`

    Build the project for production.

- `npm test`

    Start the project and run tests.

## Prerequisites

- [Visual Studio Code](https://code.visualstudio.com/)

- [Node.js](https://nodejs.org)

## Other tools used

- Adobe Photoshop & Illustrator - Logo, loader, ilustrations and product images

- [RegExr][regexr] - Regular expresions tool

- [Optimizilla][opti] - Online image compressor

## Folder Structure

- `src`: Contains all the source code.

    - `components`: General components used across the app.

    - `views`: Specific components organized by view.

    - `layout`: Contains the header and footer.

    - `context`: React context providers.

    - `GlobalStyle`: Provides the global styles, css variables and theme colors.

    - `utils`: Helper functions and logic. 

    - `assets`: Contains images and custom fonts. (Product images are stored in Firebase Storage)

- `App.js`: Main component.

## Inspiration

- https://www.instagram.com/paiheme/

- https://hype4.academy/articles/design/neubrutalism-is-taking-over-web

🐉

[es]: https://img.shields.io/badge/README-Español-red

[deploy]: https://oritsuru.netlify.app

[status]: https://api.netlify.com/api/v1/badges/a253097a-2925-4d33-bb21-7eb6cf663ab0/deploy-status

[netlify]: https://app.netlify.com/sites/oritsuru/deploys

[cra]: https://github.com/facebook/create-react-app

[router]: https://github.com/remix-run/react-router

[form]: https://github.com/react-hook-form/react-hook-form

[styled]: https://github.com/styled-components/styled-components

[regexr]: https://regexr.com

[opti]: https://imagecompressor.com