Artistify React Workshop I

Day 1 / 3

Good new Hackers !

Our client demands an update for the artistify application. The frontend will now be developed with ReactJs. Some additional features may also be implemented.

User favorites
Search bar
Comments

The base repository

You'll find the base source code here : base repo
Clone it and get ready for ruuuumble !!!!

The repository contains 2 main folders :

client (frontend A.K.A the react application)
server (backend A.K.A the express application)

You will need 2 separate terminal windows to manage the 2 ends of the stack.

PART I - The Backend

Setup

Do you remember express, mongo, dotenv, mongoose and friends ?
Yes, No, Maybe ?
Don't worry : it's time to refresh your memory :)

Start by checking the /server/package.json to get an overview of the project.

Install dependencies:

The usual shell process : once in the /server folder, run the following command to install required dependencies.

npm install

The environment file:

Create a .env file directly in /server, like so:

CLIENT_URL = http://localhost:3000
CLOUDINARY_NAME = your-name
CLOUDINARY_KEY = your-cloudinary-key
CLOUDINARY_SECRET = your-cloudinary-secret
MONGO_URI = mongodb://localhost/your-db-name
PORT = 5000
SECRET_SESSION = a-long-string-that-should-be-hard-to-crack

Seed the database

Some scripts in the package.json facilitate the seeding process.

npm run seed:all

The one above will drop all existing collections and reseed with a fresh dataset.
Don't forget to ctrl + c to kill the shell once the seeding is done !

A script is ready to seed each resource type individually !

npm run seed:artist
npm run seed:album
npm run seed:style
npm run seed:label

You can reuse those tools as many times as needed during the workshop.

Make the server ready for incoming AJAX requests

Take a look to the package.json. Notice any new library ? Yes : cors was not there during module 2. This acronym stands for Cross Origin Resource Sharing. In a nutshell, it's meant to allow another domain name (here the client application), to communicate with the backend through AJAX requests.

The configuration of this middleware is pretty straight forward :

const corsOptions = {
  origin: [process.env.CLIENT_URL],
  credentials: true,
  optionsSuccessStatus: 200
};

app.use(cors(corsOptions));

Implement the CORS configuration starting line 43 of /server/app.js

Learn more abour CORS:

Launch the backend

You should be ready to launch the server.

npm run dev

Pay attention to the backend terminal to see if the app launched correctly.

Express: Set the API routes

All the models files are already provided and required. 👍
All the routers files are already provided and required. 👍
You'll need to code the actual routes though. 🤓
Today you'll only deal with READ and DELETE. 😮‍💨

IMPORTANT : all the backend routes are prefixed with /api ❗️❗️❗️
IMPORTANT : all the routes return a HTTP response formated in JSON. ❗️❗️❗️

The artists router

This file is located in /server/routes/artists.js.

Route	VERB	HTTP status	Description
/artists	GET	200 OR 500	get all artists
/artists/:id	GET	200 OR 500	get one artist by id
/artists/:id	DELETE	200 OR 500	delete one artist by id

Should populate:

style

The albums router

This file is located in /server/routes/albums.js.

Route	VERB	HTTP status	Description
/albums	GET	200 OR 500	get all albums
/albums/:id	GET	200 OR 500	get one album by id
/albums/:id	DELETE	200 OR 500	delete one album by id

Should populate:

artist
artist.style
label

The styles router

This file is located in /server/routes/styles.js.

Route	VERB	HTTP status	Description
/styles	GET	200 OR 500	get all styles
/styles/:id	GET	200 OR 500	get one style by id
/styles/:id	DELETE	200 OR 500	delete one style by id

The labels router

This file is located in /server/routes/labels.js.

Route	VERB	HTTP status	Description
/labels	GET	200 OR 500	get all labels
/labels/:id	GET	200 OR 500	get one label by id
/labels/:id	DELETE	200 OR 500	delete one label by id

Hints on HTTP verbs and statuses:

Postman: Test the routes

Postman is a really nice tool to design, test and document REST APIs.

Create an artistify-react collection and implement the routes you created on the previous iteration, for the Albums and Artists collections.

Hint: Use the course card for more infos.

PART II - The Frontend

Install dependencies:

The usual shell process : once in the /client folder, run the following command to install required dependencies.

npm install

Setting up the .env

Create a .env file directly in /client, like so:

REACT_APP_BACKEND_URL = http://localhost:5000

Yes : react applications can also have environment variables ! Note that you MUST prefix ALL the keys with REACT_APP_{KEY}. ex: REACT_APP_MY_PAID_API_TOKEN = abcdefg1234

This value is used by the /client/api/APIHandler.js file, coming soon ; )

Lauch the client

npm start

Pay attention to the frontend terminal to see if the app launched correctly.

Have a quick look to the available pages.

IMPORTANT Some widgets are provided in /client/src/components. You are free to reuse some/all or choose your own file/folder organisation.

Axios : the APIHandler

A tool is provided in /client/api/handler.js to make AJAX exchanges from client to server easier. The main idea is to avoid rewriting the axios instance's configuration multiple times. Be curious and check this file !

Here is an implementation example :

import APIHandler from "./api/APIHandler.js"

APIHandler.get("/api/albums")
.then({data} => console.log(data))
.catch(err => console.error(err));

React + Axios: GET resources

Time to connect the dots. The front is ready to receive some datas from the backend

On the public artists page (http://localhost:3000/artists)

Fetch all artists from the database.
If the artists list is empty, display an info message in the list.
Else, display a card for each artist.
Provide a router to="/artists/artist.id" />,
Leading to separate component ArtistDetails component.

On the public albums page (http://localhost:3000/albums)

Fetch all albums from the database.
If the albums list is empty, display an info message in the list.
Else, display a card for each album.
Provide a router to="albums/album.id" />,
Leading to separate component AlbumDetails component.

Note: We will handle the icon tomorrow. Trick: Why not try using CSS grid to organise the results display ?

React + Axios: GET + DELETE resources

The dashboard is there to manage artists, albums, labels and styles.

Your task here is to :

Fetch and display resources from the backend.
Plug the delete buttons to a handler, removing the desired resource in the backend.

Here is an overview of the desired results :

Done already ? Congratz !!!

Wanna some more ?

Here are some bonuses.

On the home page (http://localhost:3000)

Fetch the 2 latests artists AND albums.

On the app header

Implement the search bar for all artists and/or albums.

Artist's details

Code a Discography component displaying all the albums related to a given artist's id

On the admin root page (http://localhost:3000/admin/)

Create a nice datavizualisation with chart.js, or rechart.js or d3.js ...

HugoLansade / artistify-react-1

Artistify React Workshop I

Day 1 / 3

The base repository

PART I - The Backend

Setup

Install dependencies:

The environment file:

Seed the database

Make the server ready for incoming AJAX requests

Launch the backend

Express: Set the API routes

The artists router

The albums router

The styles router

The labels router

Postman: Test the routes

PART II - The Frontend

Install dependencies:

Setting up the .env

Lauch the client

Axios : the APIHandler

React + Axios: GET resources

On the public artists page (http://localhost:3000/artists)

On the public albums page (http://localhost:3000/albums)

React + Axios: GET + DELETE resources

Done already ? Congratz !!!

Wanna some more ?

On the home page (http://localhost:3000)

On the app header

Artist's details

On the admin root page (http://localhost:3000/admin/)

About

Languages