Project File Structure

Top Level Folders & Files

├─ feedback-frontend-app
│  ├─ public
│  │  ├─ favicon.ico
│  │  ├─ index.html
│  │  └─ mainfest.json
│  ├─ src
│  │  ├─ layouts
│  │  ├─ routes
│  │  ├─ tests
│  │  ├─ utils
│  │  ├─ App.css
│  │  ├─ App.js
│  │  ├─ config.js
│  │  └─ index.js
│  ├─ .eslintrc.json
│  ├─ .prettierrc
│  ├─ Procfile
│  ├─ README.md
│  ├─ config-overrides.js
│  ├─ package-lock.json
│  └─ package.json
├─ .gitignore
├─ .travis.yml
├─ LICENSE
└─ README.md

Name	Type	Description
feedback-frontend-app	folder	The folder for all the project files
.gitignore	file	Standard react ignore file and some IDE specific ignores
.travis.yml	file	A YAML file that is used by travis and allows you to specify command to execute in the CI. We use it to test the project builds and run any unit tests we have and then push changes to heroku upon success if branch is master
LICENSE	file	Standard MIT license

feedback-frontend-app

feedback-frontend-app
├─ public
├─ src
├─ .eslintrc.json
├─ .prettierrc
├─ Procfile
├─ README.md
├─ config-overriders.js
├─ package-lock.json
└─ package.json

Name	Type	Description
public	folder	Holds the public resources that are accessed by the browser
src	folder	The main folder of the project, holding the react files (JavaScript files)
.eslintrc.json	file	Configuration for eslint, which is for code formatting
.prettierrc	file	Configuration for prettier, which was added to the project to automatically format code
Procfile	file	Used by Heroku to know what you want to do with the project once hosted. e.g. specify commands to start the app
config-overrides.js	file	Used by react-rewired-app
package.json	file	npm package file, specify dependencies and npm scripts etc...

public

public
├─ favicon.ico
├─ index.html
└─ manifest.json

Name	Type	Description
favicon.ico	file	The icon displayed in the browser tab
index.html	file	The main html file that the react app is injected into. Just contains a single div in the body to inject the react stuff into
mainfest.json	file	The meta about the app?

src

src
├─ layouts
│    
├─ routes
│  
├─ tests
│  
├─ utils
│  
├─ App.css
├─ App.js
├─ config.js
└─ index.js

Name	Type	Description
layouts	folder	Holds the layout react components
routes	folder	Holds most of the react components, has sub folders for each route. e.g. Home and Dashboard
tests	folder	Holds any tests that are necessary
utils	folder	Holds utility scripts. Such as the Api.js, used to make requests to the backend
App.css	file	Contains any css used in the App.js
App.js	file	The top level main react component to inject into the index.html file. Defines the routes such as the Home component at '/' and the Dashboard component at '/dashbaord/:id'
config.js	file	Contains any variables that can be used for configuration of the app, such as the URL of the backend
index.js	file	Used to inject the App.js (react) into the index.html