From f98f2e431ef92991b129a4a83b8dfdb050f092ad Mon Sep 17 00:00:00 2001 From: Facinorous Date: Thu, 29 Dec 2022 02:46:16 -0500 Subject: [PATCH] Update project structure in contributing --- src/pages/en/more/contributing.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/pages/en/more/contributing.md b/src/pages/en/more/contributing.md index 240890e..47a6f87 100644 --- a/src/pages/en/more/contributing.md +++ b/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. \ No newline at end of file +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. \ No newline at end of file