> For the complete documentation index, see [llms.txt](https://docs.dataswyft.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dataswyft.com/build/getting-started/react-pda/2.-create-main-structure.md).

# 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](https://github.com/Hub-of-all-Things/hat-starter-app-js/tree/assets). 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:

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

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

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