React workshop

This repository is part of the React 101 Workshop hosted by @nicorema and @nvent97, designed especially for non-frontend developers. The goal of this session is to give you an introduction to React fundamentals with a fun and low pressure coding challenge:

The challenge

The goal of the challenge will be a very elementary thing we do in the front end: Fetch data from an API and show it on the browser. You will have to apply the things we saw in the session such as: useState, useEffect, React libraries, etc.

The API we will use is: https://pokeapi.co/docs/v2 ;)

Phase 1

You will have to list the Pokemons fetched from the API, in other words, you will create a Pokedex.

There are no designs or specific features requirements, we want to leave some room for creativity.

The only condition is to see a list of Pokemons.

It is important that you do not use any coding AI for this phase 1, researching in ChatGPT is allowed but you should write the code.

Phase 2

This kind of tasks could be easily done by an AI, and in order to practice AI fluency we will see what it can produce. So the goal of this phase is to do the same as phase 1 but with minimal code editing (we will vibe code it).

The important part here is the prompt, maybe you will need to include how is the endpoint contract, or how do you want the components to be. The context is really important for an AI to do it right, you can use Cursor, ChatGPT directly or any other tool.

We recommend you to create two branches so you can compare the result of both approaches.

Presentation

Presentations will be 4 minutes long max and ideally it should cover:

• Phase 1 result
• The main logic component
• Phase 2 results
• Conclusions

Running the project

1. Install NVM (Node version manager)

2. Go to this folder and run

nvm use

It uses this project Node version

3. Install the dependencies:

yarn install

4. Run the project

yarn dev