Responsive Recipes Application for Mobile Devices - Front-End
This is a responsive web application for mobile devices, developed during my training at trybe. Its purpose is to search for food and drink recipes, as well as a page to follow a recipe step by step and favorite it. It also has a login page to access the application. Using the APIs: Meals e Cocktail
This project was developed in a sprint, where my class was divided into a group of 6 people. We had to organize ourselves to deliver the project on time, in addition to trying to maintain organization. In a learning environment this can be tricky, but we can do it. To do this, we use Kanban on Trello and communicate a lot through the Slack application.
After we started looking for a challenge, I decided to develop it alone to test my abilities and this was the result.
See about
-
We used Kanban Trello as an agile methodology to better organize the tasks that each person would perform, this gave us an idea of what a real sprint would be like in the workplace.
-
copy the repository to a local folder using the terminal and passing the command:
git clone git@github.com:juliocmatias/recipes-app.git
If you don't have git installed, you can install it using this command in the shell and bash terminal:
Debian/Ubuntu bash:
apt-get install git
other kernel follow the instructions on the website Git.
windows/powershell:
winget install --id Git.Git -e --source winget
Or you can follow the website git documentation for more installation means.
-
install the dependencies:
npm install
This method of installing pending issues only works if the node installation package is npm, if you use another one, just switch to npm for the package used
you need to have node installed to be able to install the dependency packages If you don't have it, you can run the command if your operating system is Linux:
sudo apt update sudo apt install nodejs sudo apt install npm
If not, follow the installation instructions on the Node.js website.
⚠️ For the application to run correctly, the node version must be >= 16.
🌐 Browser
-
After you have installed the dependencies. In the terminal, open the application in the browser with the command:
npm run dev
using this command application will open in the browser.
📍 Url
If you want the option to view the application more easily and quickly, click on APP to see the deployed project
See about
-
See about
-
See about
-
See about
-
See about
-
See about
-
See about
-
See about
-
See about
-
See about
See about
-
The application has integration test coverage, using Vitest with RTL. To see it, simply execute the command in the terminal:
npm run test
This project was followed by requirements pre-established by Trybe, only the implementations are my own.
-
Although this application, after finishing the evaluation period, I did it alone, a good part of the styling and even some ideas about the codes I got from my teammates who helped me during the development. I leave here a caveat for everyone.