Big Picture Stuff

Repo URL - https://github.com/ChadWKirk/PicPocket

PicPocket URL - https://PicPoccket.com/ (Yes, the URL has 2 C’s in pocket.)

Hosting and Git workflow:

Frontend is hosted on Netlify:

1. Install Netlify CLI in client folder - Get started with Netlify CLI

2. cd client > npm run build

3. netlify deploy ./build

4. netlify deploy --prod ./build

Important:

Have domain variable in App.js to toggle between using localhost for fetch routes or heroku domain for fetch routes to make it easier to develop. Use domain - localhost when developing, but switch to domain = heroku when building.

Backend is hosted on Heroku:

1. Install Heroku CLI in server folder - Heroku - Deploying with Git

2. cd server

3. git add .

4. git commit -am "message"

5. git push heroku main

Email:

Email is done by Zoho and is connected to the https://picpoccket.com domain.

Routing:

Front End:

1. Uses react-router-dom npm i react-router-dom

2. Surround App in BrowserRouter in index.js

3. Uses Routes and Route from RRD in App.js to decide which JS file (aka page) is shown when browser is in certain route (ex. “/Signup”)

4. Footer component is outside of routes because it’s on every page

Back End:

1. Uses NodeJS and Express npm i express

2. To retrieve and/or manipulate data, uses fetch API unless Axios is required to use things like Multer for image upload

App.js states:

The states in App.js are there so one page can change a state and then it will get passed to a completely different page.

For example: User goes to UserSettingsPage > Deletes their account > sets isJustDeleted to true (resides in App.js) > gets navigated to MainPage (navigate doesn’t rerender/re-initiate state so it stays true) > if isJustDeleted is true, show account deleted banner.

How Images Work:

• Uses Cloudinary CDN to host images and also .zip files when user mass downloads in the My Pics page

Cloudinary API Documentation