Recipe App 2

The Recipe App 2 is a new version of a previously developed project. The code developed before is used as a starting point for this project. The objective is to use Tailwind and DaisyUI to build the UI design. Other difference is the use of the Reduc Tool kit in this project.

Here is the link to the previous version.

The Project

The user can see, search, filter, favorite and follow the progress of preparation of recipes and drinks!

Two different APIs are used, one for food and one for drinks. TheMealDB is an open, community-maintained database of recipes and ingredients from around the world. The CockTailDB API is very similar (even maintained by the same entity) to TheMealDB API, only focused on drinks.

The layout focuses on mobile devices, so all prototypes will be developed on smaller screens.

Recipe App 2 will use the following techs:

• React
• ReduxTolkit
• Hooks
• Tailwind
• DaisyUI

Useful Links

• Redux Toolkit
• Smarter Redux with Redux Toolkit
• Using Redux Toolkit’s createAsyncThunk
• Separating logic in your Redux Toolkit application
• useState in React: A complete guide
• Using React useState with an object

Deploy

After finishing the project, the page will be available HERE.

Running the Project Localy

Here is a guide to installing the project locally. Each step is followed by a command to perform the described action. In case of having any doubts, problems, or feedback, please, contact me.

Step 1. Create a local directory using mkdir:

mkdir project 

Step 2. Change to the created directory:

cd project

Step 3. Clone the project:

git clone git@github.com:heitortessaro/recipe-app-2.git 

Step 4. Change to the cloned directory:

cd recipe-app-2

Step 5. Install all dependencies of the project:

npm install

Step 6. Run the application

npm run start

The application should start running in your terminal with a link to access the it in your browser.