While there is a wide array of ways to go about setting up your project, here is a folder setup I have been using in the last few projects of mine.
Note: I am currently using this setup for a ReactNative project, however, it can be used for almost anything!
Let's break it down.
The breakdown
API:
- contains all calls to your backend project.
✔ ️More articles will come on this on my end but for now, here is an amazing article on how to set up a backend project using Node, TypeScript, and Express.
Helper:
methods.jswill contain all date/time/money formatters.constants.jshas static values like:
baseURL, port, enums, statuses(loading, error, success), and more.
Assets:
- All fonts and static icons
Components:
Based on the atomic design created by Brad Frost in 2016, I use 3 of the 5
categories suggested (Atoms, Molecules, Organisms, Templates, Pages)
- Atoms: the simplest form of components.
Text, TextInput, Button, Checkbox ...- Molecules: atoms combined together. For example, checkbox and label are now one molecule.
Card, DatePicker, TimePicker, TitleParagraph ...- Organisms: atoms and molecules working together, usually involving navigation components such as headers and footers.
Header, Modal ...Screens:
- Really depends on your app and its purposes but treat this section as pages inside of the atomic design.
Navigation:
In ReactNative there is a couple of ways to navigate in an app.
StackNavigation, TabNavigation, and DrawerNavigation can be all defined in this folder to separate it from the rest of the app’s logic.
- There will be a whole new article on this. Stay tuned ⌛
Styles:
The folder that stores everything that makes your app pretty.
Reusable styles, fonts, colors…
Here is what I store within fonts and colors:
- Fonts
After some research, this could be the perfect sequence of font sizes to use:
- Colors:
Again some research had to be done to come up with color naming. I like what Mike Steet has suggested.
Here is how I have done it in my project:
Until the next article!
-LaraMo
