# 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">
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dataswyft.com/build/getting-started/react-pda/2.-create-main-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.