What You'll Learn

This week, we will practice a full-stack app called Coderbook. By using the template, we will have the incomplete code-based to work on. Your first mission is to understand others code (the template) then implement those required features.

Let's go through the app and see what's we going to do with it.

User Story

User

cd cs-coderbook/client
touch .env
echo REACT_APP_BACKEND_API="http://localhost:5000/" > .env
cd ..
cd server
touch .env
echo "PORT=5000 \nJWT_SECRET_KEY='verySecretSecret' \nMONGODB_URI='mongodb://localhost:27017/coder-book'" >> .env
yarn
yarn dev
cd ..
cd client
yarn
yarn start

💡 One or more professional/senior developers have spent months if not years working on the code of the company you join. It's a good idea to study it carefully.

Study the existing project code

Before we start coding, discuss in your group :

The auth page has a register button/modal that doesn't work. Oppotunity.

Make it work by searching for STEP 1 or look inside of ./client/src/pages/AuthPage/AuthPage.js. Refactor it to update the user state and submit to our API.

<Form
  onSubmit={onSubmit}
  className="d-flex flex-column justify-content-center"
></Form>

This should look familiar, we dispatch an action, register(), to our Redux store. If you look at it you'll see we make a request to our backend.

const onSubmit = (e) => {
  e.preventDefault();
  dispatch(authActions.register(null, user.email, user.password));
};