New Project

To Begin Development

1. Copy the root folder to a desired location
2. Rename the folder to that of your project
3. Delete the .git folder
4. Change your enviroument variables in config for back-end
5. Change your enviroument variables in __env for front-end
6. Edit the readme files in back-end and front-end
7. Create and add all icons in public
8. Edit the manifest.json in public
9. In the both directories, runnpm run dev
10. In the back-end directory, runnpm run db
11. If anything is left out, add it

To Begin Production

Create two repositories for front-end and back-end respectively

Lets start with the back-end

1. Confirm manifest.json
2. git init on backend
3. git remote add origin <origin> to add origin
4. git branch -M main to branch to main
5. git add . to add all files
6. git commit -m 'First Commit' to commit all
7. git push -u origin main to push main and default
8. heroku login or heroku login -i login to heroku (i flag provides in-console authentication)
9. heroku create <app_name> create a heroku app
10. Set all enviroument variables
11. mongodb+srv://<username>:<password>@cluster0.afuvs.mongodb.net/<app_name>-api?retryWrites=true&w=majority
12. git push heroku main deploy to heroku

Now the front-end

1. Set all enviroument variables
2. Confirm manifest.json
3. git init on frontend
4. git remote add origin <origin> to add origin
5. git branch -M main to branch to main
6. git add . to add all files
7. git commit -m 'First Commit' to commit all
8. git push -u origin main to push main and default
9. Open vercel
10. Open link vercel to the link repository and change the url/name to exclude frontend
11. Test that baby 🥰
12. If anything is left out, add it

Front End Libraries

• next: npx create-next-app front-end
• @reduxjs/toolkit: npm i @reduxjs/toolkit
• @tiptap and extensions: npm i @tiptap/react @tiptap/starter-kit...
• axios: npm i axios
• framer-motion: npm i framer-motion
• hamburger-react: npm i hamburger-react
• moment: npm i moment
• nextjs-progressbar: npm i nextjs-progressbar
• react-icons: npm i react-icons
• react-loader-spinner: npm i react-loader-spinner
• react-redux: npm i react-redux
• react-select: npm i react-select
• redux: npm i redux
• styled-components: npm i styled-components
• universal-cookie: npm i universal-cookie
• uuid: npm i uuid
• validator: npm i validator
• html-react-parser: npm i html-react-parser

Back End Libraries

• @types/node: npm i @types/node
• Express: npm i express
• Bcrypt: npm i bcryptjs
• Axios: npm i axios
• Validator: npm i validator
• Bcrypt: npm i bcryptjs
• Cors: npm i cors
• Web Token: npm i jsonwebtoken
• Mongodb: npm i mongodb
• Mongoose: npm i mongoose
• Chalk: npm i [email protected]
• GoogleApis: npm i googleapis
• HBS: npm i hbs
• Multer: npm i multer
• Socket: npm i socket.io
• Moment: npm i moment
• uuid: npm i uuid
• Nodemailer: npm i nodemailer
• Nodemon: npm i nodemon --save-dev
• Env: npm i env-cmd --save-dev

Awaiting Implementation

• Protect Links
• Reveal View

What can I do

Backend

Front End