alejandroluishc / spoonacular-jobarcelona

Frontend Challenge for JOBarcelona 2023

Spoonacular-jobarcelona

This repository is about creating a web application that displays information about various recipes and their ingredients using the Spoonacular API. The aim of the project is to present the data generated by the API in an attractive and user-friendly format.

Check the deployed version here

Start 🚀

Get a clone of the project in local. You need to have installed NodeJS in your computer to develop the proyect.

Requirements 📋

You need to install nodejs

Go to NodeJS web page download and install the program.

Instalation 🔧

First clone the repository

git clone https://github.com/AlejandroLuisHC/spoonacular-jobarcelona

Then run 'npm install' in the base folder

npm install

Make sure you create a .env file using the .env.example provided and add at least one valid token for both environment variables (You can simply repeat the same token for both variables)

After this, open another terminal to run the server with 'npm run dev'

npm run dev

Built with 🛠️

• Vite
• React
  • useState(): a hook that allows you to add state to a functional component.
  • useEffect(): a hook that allows you to perform side effects in a functional component, such as fetching data.
  • memo(): a higher-order component that can optimize performance by memoizing the result of a component and only re-rendering it when necessary.
  • lazy(): a function that allows you to lazy-load a component, meaning that it will only be loaded when needed.
  • Supense: a component that allows you to suspend rendering while waiting for asynchronous data to load.
• Redux-toolkit
• React-router-dom
  • useParams(): a hook that allows you to access route parameters in a component.
  • Outlet(): a component that allows you to define a placeholder where child routes can be rendered.
• Styled-Components
• SpoonaculaAPI
• npm

Other libraries ⚙️

• react-icons

Future Implementations 🚀

Here are some possible future implementations for this repository:

• Implementing a user login system to allow users to save their favorite recipes or track their activity on the platform.
• Adding more filters and sorting options to allow users to search for recipes based on different criteria.
• Integrating the platform with other APIs, such as social media, to provide users with more information and recipes.
• Adding a recommendation system that suggests recipes to users based on their activity and preferences.
• Improving the search functionality by implementing autocomplete or suggestions based on the user's input.

Possible Improvements 💡

Here are some possible improvements that can be tackled in future updates:

• Improving the performance of the platform by optimizing the code, caching data, and reducing the number of API requests as well as paginating the data retrieved.
• Making the platform more accessible by improving the user interface and ensuring that the platform is compatible with assistive technology.
• Improving the error handling by providing more informative error messages and guiding users on how to fix the errors.
• Adding tests to ensure the stability and reliability of the platform.
• Adding multilingual support to make the platform accessible to a wider audience.

Feedback 📣

Completing this technical challenge was a great learning experience for me. It allowed me to practice my skills in React, Redux, and other popular libraries while also exposing me to new technologies like the Spoonacular API.

Overall, I found this technical challenge to be useful and engaging, and I am grateful for the opportunity to have worked on it. I believe that this project helped me improve my skills as a developer, and I look forward to working on more projects like this in the future.