jerrydngzh/372.projdev

a geospatial journaling application to help you reflect on your moments

372.projdev

372.projdev's Issues

Dockerizing backend + deploying to GCP CR

implement protected routes & user session states

1. have routes that should be protected be accessible with a valid sign in
2. on application refresh or close, add in a loading state to allow firebase to load in the user object to not display landing/authentication pages despite being logged in -> better user experience
   • considering the application is individual user first, having to repeatedly login is bad ux

blocked by #26

memo creation allows for media uploads

option for media uploads (leave tags out for now)

• store image uploads somewhere on the cloud (CDN, google cloud storage ,etc.)
• a memo holds list of links to images (will need to secure image access)

can edit media (once #33 is done)

DB Schema Design

implement jwt auth via firebase client-side

• add in firebase auth client side
• integrate w/ signin/signup flow
• sends request w/ jwt token to backend, backend will verifying that token as middleware

resources:

• firebase auth tokens, client vs admin sdk | Medium

refactor & streamline the interactions of our backend services

currently our backend services are fairly isolated, meaning any logical sequence of operations that involve both the memo & user service are handled as separate calls from the client.

• we were being fine-grained, but too overtly fine-grained in this case
• this stackoverflow response presents a good way of approaching our use of routes vs services for expressjs and the coupling between them
• ex:

  // CreateMemo.tsx, handleSubmit()
  ...
        const createdMemo = await MemoController.create_memo(currentUser.uid, memoToCreate);
        const newMemoId = createdMemo._id;
  
        let newUserData: any = userData;
        newUserData.memos = [...userData.memos, newMemoId];
  
        const user = await UserController.update_user(currentUser.uid, newUserData);
  ...

  • should the client succeed on creating a memo, then fail updating the user with the returned memo_id, the system will be left in a inconsistent state.

Our backend services also do not expose appropriate types of the result they return. On the client-side project, most of our backend calls return a Promise<any> if not specified the return object type.

logic in creating a memo in `CreateMemo` is broken

currently the CreateMemo component doesnt have access to the client's version of user data (and memos)

• the problem lies in that no props are specified in the component for using a parent components' state of user data/memo list
  • which means that we're always sending a UserType object with an empty memo list + the new the new memo_id
  • the backend service for updating a user, expects a user's previous state + the new state by taking the body wholely and updating the user as-is
  • i.e. we're overwriting values, not updating it

BLOCKING:

• Changes will need to be made seen or have confirmed to exist on a higher-level component such as components/Dashboard/ or making use of contexts with maintaining the state of user data + memos before this change can be done

while it is okay to make separate calls for creating a memo then a call to update the user, changes on the backend will be dealt in the future (see #57)

deploymnet: setup cloud storage cdn for media uploads

blocked/dependent on #33 & #35

• setup a cdn for media uploads
• secure media uploads & control access who can view particular media uploaded
  • i.e. only the user that uploads it can see it

bruh

the owner of this project called me some bad words

[Lens] Front end dashboard view

[Memo] Setup Memo Service Backend Routes

setup & test connection to cloud storage bucket for media uploads

• backend service to upload images to google cloud storage

workflow:

1. client creates a memo
2. adds media (photos, videos, etc.)
3. send request to backend w/ memo data + image data
4. POST /memo handles creating a memo, send media data in body to media service
5. media service uploads image data to cloud storage
6. returns to memo service names of files uuid-file_name, stored on cloud storage w/ structure /uid/filename

accessing images on client:

• viewing:
  • take the cloud storage bucket url + filename
• editing:
  • adding -> normal workflow
  • deleting -> tba

Changing createMemo Map marker placement

update createMemo map to only show one marker

FE Refactor: decouple components

decoupling components for iteration 2 due to model design mismatch against backend

Folder Structure (frontend):

components/
  CreateMemo/
      components/
      ...
  Profile/
  ...
pages/
   MainPage.tsx
   EntryPage.tsx
   ...
models/
controllers/

setup FE project

• react
• build tool
• other dependencies needed
• other modules required to make a fully functional frontend (as react is just a ui library)

update how user information is fetched for uids

• change out query params to instead use the provided useFirebaseAuth() hook provided in the context.

...
const { currentUser } = useFirebaseAuth()

const uid = currentUser.uid
...

see https://firebase.google.com/docs/auth/web/manage-users?authuser=0#get_a_users_profile for more information

main navbar component

Currently the way we navigate between pages is clunky and doesn't present an anchoring logical view of the application state. We have a lot of white space on the page that isn't appropriately used, this could be an appropriate replacement for.

Have a navbar/sidebar of some sorta grouping together the main navigation pages of the application:

1. dashboard
2. create
3. lens
4. profile
5. settings

setup BE project

• nodejs/express backend server

[Memo] Creation Form

[Profile] Front end UI

cleanup backend error handling

Refactor backend error handling to use the middleware error handler instead of rendering jade view templates.

Profile Feature

email auth verification

Refactor dashboard list of locations // list of memos // popup

DO THIS BEFORE #61

please refactor the dashboard and modularize components:
a suggested example file structure:

Dashboard/
   components/
       LocationItem.tsx
       LocationMemoList.tsx
       Popup.tsx
   page.tsx

a logical flow of components and the component tree:

1. dashboard should render a list of locations -> pass in props to each location component a list of their memos
2. each location component should render their respective list of memos
3. each of those memos renders a popup

take a look at:

• https://react.dev/learn/rendering-lists
• https://github.com/jerrydngzh/recipe-app/tree/main/frontend/src/components

Lens Feature - List View

adding a list view to the lens page.
Additionally will add a toggle element to switch between views

limit media uploads to memos to 5 & 15mb max

blocked/related to #33 & #35

middleware to auth incoming requests from client

• validates the jwt token in the header using the firebase admin sdk (?)
• emails/passwords will not be stored on the backend
• TODO: change models for user/profile {passwords will never be stored}

blocked by:

• #26

resources:

• verifying id tokens | Firebase
• https://medium.com/@tanya/configuring-firebase-admin-sdk-with-express-931b02ee2f91
• https://firebase.google.com/docs/admin/setup
• https://cloud.google.com/docs/authentication/provide-credentials-adc?authuser=0#attached-sa
• https://medium.com/google-cloud/firebase-separating-configuration-from-code-in-admin-sdk-d2bcd2e87de6

edit create memo map

noticed that the map for create memo does not support scrolling in and out for zoom like in the Lens map view

displaying a memo

rich content display of a memo

• images
• title, content
• rich text information, eg. date occurred, location ,etc.

if you have anything to add in, add it in as a comment in this issue

define & flesh out profile page

display rich text of a user profile

• has name, username, pfp
• statics for memos (e.g. # of memos, fav locations, etc.)
• secret memos ?
• account settings page?

admin page + features

Need to add different type of role in addition to the normal user.

Will implement Admin role + Admin page.

Admin will have access to a page where they are able to use the get all endpoints for all the services.
Thats about it. This is just to satisfy the project requirements.

user service

create a shareable link for select memos

a user can select certain memos to privately share via a set authentication method

• store ids to memos to share
• require authentication to view
  • ex: usernames -> require login for whitelist of allowed user
  • a set password

marker not showing up in createMemo

ability to manage memos

editing & deleting of memos on the dashboard display

• pops open / go to new page that allows editing of a memo
  • name, date, location

map icon fix

Map marker for leaflet not loading.

maybe? https://stackoverflow.com/questions/65758463/react-leaflet-marker-image-fails-to-load

profile styling + customize features?

Profile page rn looks horrendous rn.

Will focus on styling it first. Then add some basic customization features maybe?

clean up dead code

we have lots of dead, unperformant and/or unmodular code that could be removed and restructured to allow ease of development

component-refactor

Extracting some parts of code into their own components for reusability.

error handing for controllers

Need to sync frontend data models to be consistent with mongoose data schema.

Add proper error handling for all controllers. Throw error to frontend to show an error state instead of logging in console.

Create Controllers to connect frontend to backend endpoints

• memo service
• user service

ui overhaul

motivation:

1. our user interface was something thrown together quickly back during iteration 1
2. there's another project with the same name & idea as us (so we assume), so we ought to one up them when we present on friday 😈
   

calendar lens fix

Current issues:

• calendar is not displaying memos properly. User needs to select a diff date first to view a date's memos
• Add highlight to current date
• Add button to nav back to current month + year

Modularize form in createMemo to component

Since #32 will use similar form codes for editing mode on popup, I'm planning to take the form section including map, saved location, Memo Name, Memo description out as a subcomponent for reuse

admin feature fix

Admins prob shouldnt be able to delete themselves.

Also style the table a bit better..