Update project structure in contributing

src/pages/en/more/contributing.md

@@ -55,4 +55,31 @@ Running the project for development purposes is super easy.
 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.\
-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
+wrap the page in it.