Panela's Frontend

This is the frontend for the Panela project, where you can manage recipes and calculate their costs based on the ingredients.

About The Project

Build using React, React Router and Redux Toolkit, components made using Chakra UI and forms using Formik. This project uses Auth0 to provide an authentication pipeline and connects to a MongoDB database using a RestFUL API designed from scratch. It's deployed to a droplet on DigitalOcean, along with a CD/CI pipeline.

This project is a complete app, build from the ground up, from conception to design and implementation. Some challenges faced during implementation have been adapting the Auth0 and making it play nice with React Router V6. Another interesting takeaway was using Chakra UI and Formik for more complex forms, like the add recipe, where you can search for an ingredient and if not present, add a new one. Had to extend the build-in components to use Formik, and a bit of trial and error figuring out how to properly display error messages on more complex components.

You can see a live demo at https://panela.app

Getting Started

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

Prerequisites

To set up this project you must have npm and install the project dependencies.

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/Zenb0t/frontend-recipes.git

2. Install NPM packages

   npm install

3. Create a .env file with the below entries:

   REACT_APP_API_URL=https://panela-server-0-gmmv3.ondigitalocean.app/
   REACT_APP_AUTH0_DOMAIN=zenbot.us.auth0.com
   REACT_APP_AUTH0_CLIENT_ID=uwcRPx0Hu0g7B30z37ZRsVxTaEGdW7Tp
   REACT_APP_AUTH0_CALLBACK_URL=[YourLocalhost]/dashboard/callback
   REACT_APP_AUTH0_AUDIENCE=https://panela.app/api

Contact

Felipe Ribeiro - [email protected]

Check also the backend here: https://github.com/Zenb0t/panela-server