Frontend File Structure - SE750-Group14-GirlGang/roadtrip-planner GitHub Wiki

React File Structure Convention

MyComponent/
|--- SubComponent/
|    |--- MySubComponent.jsx
|    |--- MySubComponent.module.css
|    |--- MySubComponent.styles.js
|    ...
|--- MyComponent.jss
|--- MyComponent.module.css

Top level components should only import sub components from one directory below. Sub components should not import from components above them in a hierarchy.

If a component is reused by multiple components, it can be moved to the components/commons folder.

High Level Structure

src
|--- App
|--- auth
|--- components
|--- contexts
|--- hooks
|--- pages
|--- utils
index.js

App

Contains top level App component used by index.js

auth

Functionality related to auth0 connectivity

components

Contains all application components

contexts

Context and ContextProviders

hooks

Custom hooks. Axios call wrappers (useGet, usePatch, usePost, usePut)

pages

Application pages and routing

utils

Utility functions