create .env file in server, add MONGO_URI and SECRET_OR_KEY vals from heroku npm i in server and client npm run dev

0. Chores / things to learn any time

• redirecting to https causes infinite loop
• replace console.logs with console.errors. add console.info on loading the site (use css on console log)
• lighthouse performance issues (image sizes, strip image meta tags, use cloudinary to make images efficient)
• performance: artillery or zeit.time
• same site cookies
• refactor ugly code
• FOUT
• robots.txt / hiding edit page
• hamburger nav items close menu on click
• SEO
• Security
• Prettier / eslint
• Jsdoc
• Tests
• Anything Labeled TODO
• 404 page
• Work through end of readme links
• write up on experience
• add urls to CMS
• kubernetes ?
• convert to typescript ?

1. Backend and Auth https://blog.bitsrc.io/build-a-login-auth-app-with-mern-stack-part-1-c405048e3669

1a. Node and cookies https://expressjs.com/en/resources/middleware/cookie-parser.html https://www.tutorialspoint.com/expressjs/expressjs_authentication.htm

2. Hosting and Deploying Hosting: https://youtu.be/71wSzpLyW9k?t=226

Deploying: pushing to master deploys automatically watch it with heroku logs --tail

3. Design ref: https://www.caitlinlowans.com/

UI Design Elements Glossary

Modern CSS Reset Sass File Structure - using simple Sass Structure Boilerplate Typography Different React Approaches - Using Modular note: about examples are using css modules, which I'm not using. use import ./styles.scss in components instead Modular Design in Greater Detail Class Naming with BEM Convention

Technical Typography Combining Typefaces Proportional vs Monospace Fonts Display typeface

Examples: https://www.siteinspire.com/ https://www.typewolf.com/ https://www.awwwards.com/ https://hoverstat.es/ https://www.semplice.com/ https://themeforest.net/category/wordpress https://fontsinuse.com/in/2/formats/3/web

Consistent Sizing

https://favicon.io/favicon-generator/ https://www.favicon-generator.org/ https://developer.mozilla.org/en-US/docs/Web/Manifest https://developers.google.com/web/fundamentals/web-app-manifest/

https://blog.bitsrc.io/a-brief-history-of-flickering-spinners-c9eecd6053

4. Performance Used Image Kit To Reduce Image Sizes - originally specified cloudinary but didn't look into it

5. SEO Header Tags Introduction To Meta Tags Meta Tags Best Practices Meta Tags For Social Media

6. Security Redirect to HTTPS

Node.js best practices https://www.codementor.io/mattgoldspink/nodejs-best-practices-du1086jja

Config structure: https://stackoverflow.com/questions/8332333/node-js-setting-up-environment-specific-configs-to-be-used-with-everyauth

Viewing DB Contents: cloud.mongodb.com > clusters > collections https://docs.atlas.mongodb.com/data-explorer/

Axios Cheatsheet: https://kapeli.com/cheat_sheets/Axios.docset/Contents/Resources/Documents/index

Axios Info: https://medium.com/@MinimalGhost/what-is-axios-js-and-why-should-i-care-7eb72b111dc0 https://blog.logrocket.com/axios-or-fetch-api/ https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5

Securing Tokens: http://timmyreilly.azurewebsites.net/githubs-gitignore-and-db-keys-safe/ https://danlevy.net/protect-your-tokens/ https://medium.com/codait/environment-variables-or-keeping-your-secrets-secret-in-a-node-js-app-99019dfff716

Uploading Images to Mlab: https://stackoverflow.com/questions/51825874/uploading-images-in-mlab

SPA Routing: https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm

Website Launch Checklist Note so self, use pm2 apparently for load balancing Security and JS Accessibility Testing UI Design, Spacing and Grids Web.dev for performance testing Lighthouse for performance testing Owasp

• module.exports vs export / require vs import
• React Router / HashRouter combo (routing is bad)

facebook/create-react-app#4536

Buying Domain with NameCheap Connecting NameCheap to Heroku