Skip to content

Latest commit

 

History

History
148 lines (99 loc) · 5.78 KB

README_en.md

File metadata and controls

148 lines (99 loc) · 5.78 KB
Raw

React Logo Project Recipes App React Logo

🌐 Português Español English Русский 中文 العربية

Application Preview

This project was developed in the Front-End module of the Web Development course at Trybe. It consists of a recipe application that allows users to search for, view, filter, favorite, and track the progress of food and drink recipes.

The application was developed using React with the latest features such as Hooks and Context API, ensuring efficient management of the application's global state. The layout of the application is optimized for mobile devices.

The application was designed with a focus on mobile devices, featuring a layout optimized for screens up to 375px wide. To ensure that the interface is displayed correctly during testing, it is recommended to use the browser's development tools (DevTools) to simulate the application on smaller resolutions, like that of a smartphone. In Chrome, for example, you can activate the Device Mode by pressing Ctrl + Shift + M in DevTools and adjusting the screen width to 375px.

⚙️ Features
  • Search for food and drink recipes;
  • Filter recipes by category;
  • View recipe details, including ingredients and instructions;
  • Favorite and save recipes;
  • Track the progress of recipe preparation;
  • View completed recipes.

Application Preview

The application uses two distinct APIs as a database:

  1. TheMealDB API for food recipes;
  2. TheCocktailDB API for drink recipes.

🛠️ Technologies Used
  • React for creating components and interface;
  • React Router for navigation between pages;
  • Context API for global state management;
  • Hooks for managing lifecycle and local states;
  • Bootstrap for styling and responsiveness;
  • Docker to ensure portability and consistency in the development environment.

🚀 How to Run the Project

Prerequisites

  • Node.js installed on your machine (version 14 or higher);
  • Docker and Docker Compose installed (if you want to run the project with Docker).

Cloning the Repository

git clone https://github.com/seu-usuario/recipes-app.git
cd recipes-app

Running the Project Locally (Without Docker)

  1. Install the project dependencies:

    npm install

  2. Start the development server:

    npm start

  3. Access the application in your browser:

    http://localhost:3000

Running the Project with Docker

  1. Build the Docker image:

    docker build -t recipes-app .

  2. Run the Docker container:

    docker run -p 3000:3000 recipes-app

  3. Access the application in your browser:

    http://localhost:3000

Project Structure

The project is organized as follows:

src/
  ├── components/          # Reusable components
  ├── pages/               # Main application pages (Login, Recipes, Favorites, Profile, etc.)
  ├── services/            # Logic for API requests
  ├── context/             # Context API configuration
  ├── App.js               # Main component containing routes
  └── index.js             # Entry point of the application

📈 Methodologies and Skills Developed

During the development of this project, the following skills were worked on:

  • Agile Methodologies: Teamwork using Scrum and Trello to manage tasks and functionalities;
  • React Routes: Implementation of dynamic routes for navigating between different pages of the application;
  • Programming Logic: Development of search, filtering, and data manipulation functionalities;
  • State Management: Managing local and global state with Hooks and Context API;
  • Component Creation: Development of reusable and responsive components for different parts of the application.

🧪 Testing

The application tests can be run with the command:

npm test

🌟 Other Projects