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 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
- 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
After finishing the project, the page will be available HERE.
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 projectStep 3. Clone the project:
git clone git@github.com:heitortessaro/recipe-app-2.git Step 4. Change to the cloned directory:
cd recipe-app-2Step 5. Install all dependencies of the project:
npm installStep 6. Run the application
npm run startThe application should start running in your terminal with a link to access the it in your browser.