jayo78/flowlab

Notes:

• need mongo atlas uri
  • for dev: mongodb+srv://mongo:<password>@cluster0.bximy.mongodb.net/dev?retryWrites=true&w=majority
  • for prod: mongodb+srv://mongo:<password>@cluster0.bximy.mongodb.net/prod?retryWrites=true&w=majority

Development

run frontend and backend on different ports

• install packages: npm install && npm install --prefix frontend
  • troubleshoot: delete package-lock.json and node_modules in root and frontend/ then try installing again
• set env variables (create .env):
  • NODE_ENV = development
  • MONGO_DEV = <DEV-ATLAS-URI>
  • JWT_SECRET = secret
• start backend and frontend: npm run dev

Production

instead of running backend and frontend on different ports, for production we compile (build) the frontend and serve it from the backend

• set env variables (create .env):
  • NODE_ENV = production
  • MONGO_PROD = <PROD-ATLAS-URI>
  • JWT_SECRET = secret
• build frontend: npm run build --prefix frontend
• start backend: npm start

Docker

• go to flowlab directory
• start app docker-compose up --build
• remove containers from above docker-compose down -v
• remove all generated artifacts with docker system prune

flowlab's Issues

UI: design and implement welcome page

• create rough figma outline
• split up outline into components (later implement in react)
• split up page into sections (later implement as divs)

Backend: delete empty rooms from memory

create an async routine that deletes empty rooms from memory at a set interval - see setInterval js function

UI: global theme

• https://www.canva.com/colors/color-wheel/
• https://blog.tubikstudio.com/color-matters-6-tips-on-choosing-ui-colors/

UI: responsive room page

• looks good on different sized screens
• see https://chakra-ui.com/docs/features/responsive-styles

Backend: add error middleware

• want error middleware for entire api so that when errors are produced, they are caught and sent to the client only in development environment
• dont want client getting errors from backend in production

Auth: validation middleware

• want to validate data sent from client on the backend
• post requests for example send data in their body that could be bad - validate it based on rules that make sense given the data (a name field should prob be limited to like 20 chars as an example)

Backend: getParticipants endpoint

• add GET request endpoint to return a list of participants given a room parameter
• want participants currently in a room, not all participants that have ever been in that room

UI: responsive dashboard page

• looks good on different sized screens
• see https://chakra-ui.com/docs/features/responsive-styles

Deploy: setup deployment

• heroku deployment with mongo atlas

Auth: jwt middleware

• add backend middleware that can be applied to routes
• implement middleware in /middleware and apply to authed routes (ie edit profile, create room, ...)

Rooms: handle joining non existent room

when a user navigates to /rooms/:roomID they are able to join a non existent room - need to instead send 404 error

UI: responsive welcome page

• looks good on different sized screens
• see https://chakra-ui.com/docs/features/responsive-styles

UI: responsive login/register page

• looks good on different sized screens
• see https://chakra-ui.com/docs/features/responsive-styles

Rooms: add error handling for socketIO

• handle errors on the backend from frontend socket connection
• implement callback that can be handled on the front end to display an error is update state

Rooms: handle unauthed joins

• want unauthed users to be able to join rooms
• unauthed users don't have a set name so need to some how give them a default name or prompt for a name in the PreRoomScreen (frontend/screens)
• also don't want unauthed users to be redirected to dashboard on leaving a room

UI: design and implement dashboard page

• create rough figma outline
• split up outline into components (later implement in react)
• split up page into sections (later implement as divs)

Feature: dashboard rejoin

if in a room (participantInfo not null) and at the dashboard page, instead of redirecting to the room, display a rejoin button. Also show a join button and when pressed, leave current room and join the new one.

DevOps: frontend production logging

checkout sentry.io - seems ez pz to implement