Challenge 03: Creating a shopping cart hook

🚀 About the challenge

In this challenge, you should create an application to train what you've learned so far in ReactJS

This will be an application ondewhere your main objective is to add some code snippets so that the image upload application works correctly. You will receive an application with many features and styles already implemented. It must perform requests for its own Next.js API which will return data from FaunaDB (database) and ImgBB (image hosting service). The implemented interface must follow the Figma layout. You will have access to 4 files to implement:

• Infinite Queries and Mutations with React Query;
• Submission of form with React Hook Form;
• Modal and Toast display with Chakra UI;
• Between others.

👷 Preparing for the challenge

For this challenge, we are going to reinforce some points and introduce some libs to help you in development.

Starting with the project theme: uploading images. As the development from scratch would lead to a very large project, we provide in the template most of the project already implemented so that you only have to work with 4 files. The idea is that in these 4 files you have a little contact with the 3 main points we want to address in this project: React Query, React Hook Form and Chakra UI.

So, before going directly to the challenge code, we'll briefly explain how each of the points below are important to the challenge:

• React Query;
• React Hook Form;
• ImgBB;
• FaunaDB;
• Next.js API;
• Figma.

React Query

• Infinite Queries: Listing that adds more data when clicking a load button or "infinite scroll". It will be used in this application to upload images registered in our database. Loading was implemented with a click of a button, not the "infinite scroll" (there's already the suggestion of an extra for the challenge).
• Mutations: Unlike React Query queries that are normally used to search for data, mutations are responsible for creating/editing/removing data. It will be used in this application to register a new image in the bank.
• Invalidations: Used to manually mark a query as stale and force data to be updated. It will be used in this application to mark the image listing query as stale when the mutation of registering a new image is successful.

React Hook Form

In the application of the challenge, you will need to implement the registration of inputs from the image registration form, the validations and send the errors of these inputs.

Unlike what was seen in the journey, this time you should work with validations directly in the React Hook Form instead of using a Yup resolver.

ImgBB

For the storage of challenge images, we decided to use a free and easy-to-use file hosting solution called ImgBB. It's not the best solution for this type of hosting, but it's the easiest for you to implement.

Therefore, to be able to upload images to this platform you need to follow 3 steps:

1. Create an account on ImgBB;
2. Create your key from the API;
3. Copy the value of this key and paste it into your .env.local as follows:

NEXT_PUBLIC_IMGBB_API_KEY=COPY_KEY_VALUE

FaunaDB

For the storage of image information (url, title and description), we decided to use the FaunaDB already used by you along the journey. All you need to do is create a database in FaunaDB with a name of your choice that needs to have a collection called images. With the database and collection created, you just create and copy the bank key in your .env.local file as follows:

FAUNA_API_KEY=VALUE_OF_COPY_KEY

This way you should be able to register the information of the images in FaunaDB.

Next.js API

In this challenge, the entire Next.js API has already been implemented for you, but let's quickly explain what was done in this step so that you understand the data you must send and the data you will receive when making requests.

• GET api/images: This is the route used to list the images. This route receives a query param named after which indicates if there is more data to be loaded from FaunaDB. By default, it was defined that the paging of the FaunaDB response is 6 data. The API response is a json with two values:

• date: Formatted data of images registered in FaunaDB, example:

  "date": [
    {
      "title": "Doge",
      "description": "The best doge",
      "url": "https://i.ibb.co/K6DZdXc/minh-pham-LTQMgx8t-Yq-M-unsplash.jpg",
      "ts": 1620222828340000,
      "id": "294961059684418048"
    },
  ]

• after: Reference to the next data page if you have more images to load from FaunaDB. Otherwise, it returns null.

• POST api/images: This is the route used to register image information (url, title and description) in FaunaDB. All you need to send is these three data by body that the registration will take place and, if everything goes well, it will return a message success: true.

📄 License

This project is under a license MIT.

Challenge proposed with 💜 by Rocketseat 👋 Join this great community!