YouTube video on how to Deploy a PERN application on Heroku https://www.youtube.com/watch?v=ZJxUOOND5_A
- git clone this project to your local machine
- then cd into this project
- Create all .env variables in the client and server directories
- then run npm start, it will install everything for you and run the server and client using concurrently
- npm packages at the very top
- Followed by a space between
- pages
- Followed by a space between
- template
- organism
- molecule
- atoms
- utils
- Followed by a space between
- hooks
- assets
- context
- Followed by a space between
- styles
- media queries
components - This is where the entire app resides and takes its shape
- UI - User Interface, this is for the structure of the project where the ui is developed using the atomic structure by Brad Frost
- atoms - atoms are the smallest part of any ui component, such as a button, input tag etc.
- molecule - this is when you start assembling your atoms into action, this can consist of an input field or when you need to iterate over a component.
- organism - this is where your state is handled, can be used for something like a Form or a Card, passing data to its molecule counterpart
- template - this is where your page start taking shape, If you are wanting a specific design on multiple pages, you can pass data to a template which will then render that data like a Layout component, which could consist of a header with the main body and maybe even a footer at the bottom of the page
- utils - this stands for utilities, not quite sure what they normally use this one for, but in my case I am using this to store all of my helper functions
- toFunc - these helper functions are used for all helpers that start with the word to, the way in which I normally name a to function is that if I am taking it from one form and converting it to another, like toTitle, I am taking a string and capitalizing it with a bit of a style to go with it.
- isFunc - these helper functions are used for all helpers that start with the word is, the way that I normally name an is function is when you want to see if something exists like isAuthenticated or isRoutes
- handlers - these helper functions are used for when I am working with a form, for example I write a component called Handler.jsx which would be my HOC(Higher Order Component) In that functions I will have lots of mini functions like handleSubmit, handleUpdate and handleDelete which can also pass its contents to the mini functions defined in this directory
construction - This is the main project files the App.jsx and the App.css files
- App.jsx - this component will control the entire project all the routes will be placed here, As well as if you need a Layout template to wrap around the whole project
- App.css - this file will be used for all global css that I need for the entire project
assets - are for all the extra bits and pieces that don't really belong in any of the other directories like images or markdown files
Context - this directory is used for if I am wanting to use state management in my project
I am just giving the names of the directories,
whenever you import it doesn't matter the files within the directory
- npm packages at the very top
- Followed by a space
- lib
- utils
- Followed by a space
- routers
- controllers
- services
- Followed by a space
- Then all constants or lets variables
- server.js - this is the main entry point into the server, all middleware gets placed here. This is a no routes zone. Only if you are wanting a catch-all method then that will go here.
- router - this is where all my router endpoints get placed
- controllers - this is where the logic for my routes gets put together.
- services - this is for all the helper functions of the routes
- lib - lib stands for library, this is where the files that you use the most gets put together, like keys.js which is used for handling env variables or pool.js to connect to the db
- utils - this stands for utilities this is where all miscellaneous helper functions gets placed, like if you are wanting to use a .then or .catch to keep it consistent throughout your api
I was one of the volunteers to help the trainees out in this project, I had started this repo as a way in helping Saf out with the login, It also gave me a chance to try out a new file structure that I wanted to get up and running. I had always believed that the best way to learn a topic was to teach it. Doing this repo was a way to see if Juniors could also understand what sort of message I was trying to conveyor and how neat and clean we could design our code for a better understanding.