2. Create Main Structure

Create the main structure

Let's structure the project as follows:

• assets/: to keep all the styles and images

• app/: for the App component and Routing

• components/: for reusable React components

• features/: to group React components by feature

• utils/: to keep the helper functions

Let's create the assets/, app/, components/, utils/ and features/ folders in the src/ folder. And move the App.js, App.css and App.test.js in the src/app/ folder.

The src/ folder structure should now look like this:

├───src/
│   ├───app/
│   │   ├───App.css
│   │   ├───App.js
│   │   └───App.test.js
│   ├───assets/
│   ├───components/
│   ├───features/
│   ├───utils/
│   ├───index.css
│   ├───index.js
│   ├───logo.svg
│   ├───serviceWorker.js
│   └───setupTests.js

Assets

You can download the compressed folder with basic assets from here. This includes the background image and the basic CSS styles to use across the project.

Unzip folder and paste the files into the assets/ folder.

The images/ and the styles/ folder should look like this:

│   ├───assets/
│   │   ├───images/
│   │   │   └───background-image.jpg
│   │   └───styles/
│   │       ├───main.scss
│   │       ├───_base.scss
│   │       ├───_branding.scss
│   │       ├───_buttons.scss
│   │       ├───_flex.scss
│   │       ├───_inputs.scss
│   │       └───_texts.scss

Install the node-sass to use Sass and SCSS:

npm install node-sass

And add this line in the index.js:

// /index.js
import './assets/styles/main.scss';

Also, include the material icons in the index.html file which is located in the public/ folder:

// public/index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">