Intro to React - Homework

While having lunch, your CTO and your Tech Leader met and discussed about a technology that most big companies are using which improves code maintenance and reusability by using components. They ended up agreeing that React could indeed help BigCorp deliver the best lottery website.

Homework management 🏠

The final result of all homework is the React Native Application full of features implemented iteratively in the end phase of each module in the course. In order to keep consistency and track all of your changes we highly recommend you to create your own GitHub repository where your work as a participant will be stored. Your GitHub repository should be shared with all trainers, which will enable us to verify your work and communicate.

Each module in the course will end up with homework consisting of a few tasks to fulfil. We would like to suggest a comfortable system for you to submit each task of the homework as a separate PR to the main branch in your repository. This will create a space for us to communicate with you, by doing code reviews - thanks to that we will be able to check your homework, discuss some uncertainties, or respond to questions you will leave in the PR. In case you have any trouble with homework you can always book a 1 to 1 session with the trainer, and also don't hesitate to ask your questions in the dedicated communication channel. Keep in mind that you don't have to worry about being blocked for the next homework, every homework will have a starting point, so you always will be able to override the content of your repository with the prepared starting point.

The goal of this module’s homework

The goal of this homework is to create a web application in React.

Checkpoints 💡

The homework repository contains periodic checkpoints for your convenience. You will see callouts denoting the current checkpoint throughout this instruction. They will look something like this:

💡 You are now here → checkpoint-xyz

Feel free to check out the corresponding branch of any given checkpoint if you’re struggling or simply want to compare your solution with ours.

With that out of the way, let’s start!

Part 1: Project setup

The project is a monorepo with two applications - backend and web. It is hard to set up a monorepo with nested package.json files and it usually requires installing additional tooling and a lot of scripts (and it’s out of scope of this homework exercise) - that’s why we won’t be doing that and we will be splitting our repo without nesting package.json and all the other configuration files.

Step 1. Create a free Upstash account to store data in Redis database

In order to store data about lotteries you need a database. For this homework, you'll use Redis provided by Upstash. It has a generous free plan which should be just enough to cover everything you need. Go to https://upstash.com and create a free account. Create a new Redis database - you can use any name you'd like. You'll get redirected to a page where all required secrets are shown.

After that, create a .env file with the contents:

  REDIS_URL="rediss://db:token@address:6379

which you can copy from Upstash directly after creating a free database by pressing the "TCP" badge.

Now, in order to run the server just run npm run dev inside the backend directory.

Step 2: Create a new React project

Run the following command in the root of the repository to create a new vite project with React and TypeScript already set-up.

  npm create vite web -- --template react-ts

Step 3: Code formatting for web project

Vite template comes with ESLint pre-configured, but it is missing a vital component - code formatter. Luckily, it is really simple to add it:

1.Install necessary dependencies

  npm install prettier@2 eslint-plugin-prettier eslint-config-prettier -D

2.Adjust .eslintrc.cjs configuration

  /* eslint-env node */

module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'plugin:@typescript-eslint/recommended-requiring-type-checking',
  'plugin:react-hooks/recommended',
  // Include prettier here
  'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: true,
  tsconfigRootDir: __dirname,
},
// Include prettier here
plugins: ['react-refresh', 'prettier'],
rules: {
  'react-refresh/only-export-components': [
    'warn',
    { allowConstantExport: true },
  ],
  '@typescript-eslint/no-non-null-assertion': 'off',
  // Add a rule for prettier errors
  'prettier/prettier': 'error',
},
}

3.Add .prettierrc.cjs to our web project

  module.exports = {
"singleQuote": true,
"trailingComma": "all"
}

At this point, we should have fully working web and backend projects in the root of our repository.

Step 4: Add MaterialUI

To make things simples for feature implementation and focus on React, we will be using MaterialUI library for our frontend components. You can fine installation instructions here -https://mui.com/material-ui/getting-started/installation/.

Step 5: Add .env file in web directory

The frontend needs to know which api server to connect to, so let's create a .env file:

VITE_API_URL=http://localhost:3000

💡 You are now here → https://github.com/callstack-workshops/essential-react-homework/tree/part-2

Part 2: Add a lottery

Given the UI design implement Add a lottery feature.

Add lottery FAB button

Add lottery modal

Add lottery modal form validation

Add lottery loading state

Notification after successful action

Add lottery feature should have following things implemented:

• FAB button to open a modal
• Modal with a form to add a new lottery
• Forms should be validated
• Loading state should be present when form is submitted
• After successful form submission modal should close automatically and Notification with a message should open

Helpful resources:

• https://formik.org/ and https://github.com/jquense/yup can be used to implement form validation
• Modal component - https://mui.com/material-ui/react-modal/
• Notification component - https://mui.com/material-ui/react-snackbar/
• LoadingButton component from MaterialUI is a part of a complimentary library -https://www.npmjs.com/package/@mui/lab

💡 You are now here → https://github.com/callstack-workshops/essential-react-homework/tree/part-3

Part 3: List lotteries

Given the UI design implement List lotteries feature.

Fetch and display lottery data

Make lotteries selectable and add register FAB button

Add Register modal with name input and validation

Register to selected lotteries and notification message

List lotteries feature:

• Should display list of lotteries
• Adding a new lottery should re-fetch the lotteries
• Lotteries should be selectable by clicking on them
• Finished lotteries should be grayed-out and not be selectable as we are not able to register for them
• Register FAB button should open a modal to register for selected lotteries
• Register FAB button should be disabled when no lotteries are selected
• Register modal should close after successful submission and notification with a message should be shown

💡 You are now here → https://github.com/callstack-workshops/essential-react-homework/tree/part-4

Part 4: Filter lotteries

Given the UI design implement Filter lotteries feature.

Add text input to filter fetched lotteries

Handle no search result case

Filter lotteries:

• Should have text input to with a search icon
• Typing in the input should filter the results
• When there are no search results for a given filter, no search result information should be displayed

💡 You are now here → https://github.com/callstack-workshops/essential-react-homework/tree/part-4-done