@ -56,3 +56,30 @@ Open [http://127.0.0.1:3000](http://127.0.0.1:3000) to view it in the browser.
The page will reload if you make edits.\
The page will reload if you make edits.\
You will also see any lint errors in the console.
You will also see any lint errors in the console.
## Project Structure
The way I structure my components is my own version of the **Atomic Design Pattern**, developed by Brad Frost and Dave Olsen. Below are the concepts for how I structure my projects:
My five distinct levels of atomic design — atoms > molecules > organisms > pages > layouts — these map incredibly well to React’s component-based architecture.
Lets start at the lowest level comoponent,
#### Atoms
These are basic building blocks of design, such as a button, input or a form label. They’re not useful on their own.
#### Molecules
Grouping atoms together, such as combining a button, input and form label to build functionality.
#### Organisms
Combining molecules together to form organisms that make up a distinct section of an interface. For example this would be the navigation bar, file manager, profile info and all the other various sections in the apps.
#### Pages
These are our pages, these are our main pages people will browse to using our routes. Things such as /register would be the `RegisterPage`,
/ would be the `UserDashboard`. Pages hold the layout for the organisms within the route the user is browsing.
#### Layouts
Page layouts. These are things pages are wrapped in for specific routes.
For example, the user dashboard AND admin dashboard have the same navigation, breadcrumbs, title bar, etc so they share the same layout.
The login and register screen would also share their own layouts. If there are new layouts needed for a page, we will create them here, then