timoshishi / timstagram

A social network of one built with Nextjs, Prisma, Supabase and AWS

^TiMstagram

Some kind of application

Setting up your local dev environment

Before getting started, make sure you have the following applications and packages installed on your machine

• Node
• Yarn
• Docker
• nvm
• PostgreSQL
• dotenv-cli
• aws-cli

1. Get a copy of .env.local from the AWS secrets manager

2. Install the Supabase CLI on your machine

   npx i -g supabase-cli

3. Link your project to our development server with

   supabase link

4. Go to the base directory and run

   yarn setup

5. This should set up an environment for you to work with locally. It may take a little bit the first time as supabase will need to pull down it's docker images to get running.

6. The Supabase CLI will output some variables in stdout that you will need to replace in your .env.local

   • The variables outputted will correspond to the following in env.example
     • anon key = NEXT_PUBLIC_SUPABASE_ANON_KEY
     • service_role key = SERVICE_ROLE_KEY
     • DB URL = DATABASE_URL

7. Replace the PHOTO_BUCKET variable in your .env.local with your github username

8. At this point you should be able to run yarn dev and have a fully functional local dev setup with a personal S3 bucket to work against.

   • Prisma ORM will have generated the latest version of our database schema in your supabase instance.
   • Supabase will be running locally with your local Postgres setup
   • A new S3 development bucket will be set up with your github handle as the bucket name.

Environmental Variables

Adding and removing environmental variables requires updates in the following places besides your local .env file

• The .env.example file
• The .env.local file
• Add the type to the Env type in src/types/environment.d.ts
• Add the variable to github secrets for both dependabot and actions secrets

Adding wiki diagrams

Diagrams for wikis can be writted using mermaid

The CLI can be run with the following command

yarn mmdc -i ./wikis/{INPUT_FILE}.md -o ./wikis/{OUTPUT_FILE}.svg

Local Development with Supabase and Prisma

Migrations

1. To apply your migrations created in prisma.schema against dev, DO NOT RUN yarn migrate dev This will wipe all data in the remote dev db.

2. Running them locally is easy, just run the local seed command, yarn seed:local, and they will show up in the local dev db.

• Note: this will wipe your local dev db and run a new seed command.

3. Any changes applied to your local Prisma schema will be validated on a PR with CI.

4. On successful completion of migrations, the CI will run a yarn migrate deploy command to apply the changes to the remote dev db.

Generate dev schema drift

• error regarding missing migration in local directory requires to manually delete the recent migration in DB and run migration again. DONT DO THIS

Migration errors

1. After applying a migration, if you get an error like this:

{ "code": "42501", "details": null, "hint": null, "message": "permission denied for schema public" }

Run yarn run-sql reset-privileges to reset the database permissions for prisma and try again.

Getting latest changes from remote db

1. as long as your branch is up to date, you should generate the latest version of the client each time you run yarn dev

Testing

Unit tests

• Co-located with the files that they are testing

  • Using [jest]

Integration testing

• Co-located with the files they are testing

  • Using jest and [testing library react]('testing library react')
  • Run with yarn test

Jest resolver

• using a custom resolver due to the fact that jest-environment-jsdom is not supporting esm modules and the UUID package causes all tests that have dependencies on the module to fail
• [fix](cloudflare/miniflare#271 (comment) // microsoft/accessibility-insights-web#5421 (comment))

E2E Testing

• Located in /cypress
  • Uses cypress
  • To run in headed mode
    1. Run yarn dev and then yarn test:e2e
  • To run in headless mode
    1. Run yarn e2e:headless

Component Testing in Storybook

Component testing with automation can be done directly in Storybook but these tests do not contribute to code coverage.

The automation is generally best used for automating actions needed to be performed each time you refresh the component as you develop it.

• "msw" is used to capture and mock API requests and responses here.

Creating Database types

• For now, since supabase cli is not in this project, it must be done by

1. Changing the prisma db url to the local supabase url
2. starting the local supabase instance "hd-tracker"
3. Running npx prisma generate dev then npx prisma db push
4. Next run supabase gen types typescript --local > DatabaseTypes.ts in the supabase project directory
5. copy the generated file to this project at src/types/database.ts

Developing components

This project uses Storybook to develop components.

To create a new story, you can create your component then add it to the stories directory.

Then run yarn storybook to open the storybook.

Dates - use dateFormatter from utils which is just dayjs extended with relative times

Feature generation

• yarn generate:feature <FeatureName> - creates a new feature folder and files
• yarn generate:api <route-name> - creates a new api route and files
• yarn prisma generate dev - generates the prisma schema

CI/CD (WIP)

We are currently following a truck based model of development.... a. preview deploys with smoke tests We are using Github Actions for our automated deployments at this time.

1. Tests are run. Failing tests will block a PR from merge.

timstagram's Issues

Change image modal Cancel button text to "Back"

image modal aspect menu

Image modal aspect menu has 16:9 ratio focused when first opening

Feed Materialized Views

Materialized views for the following public feed queries
Should be automatically paired with ISR in front end

Need to check reset timing

• Popular
• Trending
• Explore

realtime updates

https://pablopunk.com/posts/how-to-create-a-real-time-ui-with-nextjs-and-supabase

cloudfront avatar images

Avatar images should be resized by cloudfront instead of calling directly from bucket

Avatar images should be sized appropriately for each chakra avatar size in function

setup ci/cd

• husky pre-commit eslint
• pretty-quick for staged files
• run tests

FUTURE: deploy to vercel

create post front end

user token invalidation

user tokens are not refreshing leaving them in a limbo state

delete profile

as a user I want to be able to delete my profile

• display this option (which needs typing confirmation) on the update profile page
• figure out how we will handle posts, comments soft deletes etc on front and back end

trim likes array

If enough likes on a single post, we should not send it all back.

May need to switch from avatar group (it kind of sucks anyway) and fill the array with the remaining number of likes undefined. Hacky

Image Card

image modal

create image modal

• show image
• show like count
• allow user to like
• show view count

setup vercel deploys

modal toasts

The modal should link up to toasts

• If there is an API error, an error toast should pop up
• If there is an API success (submissions) a success toast should pop up

cascade delete

user cannot delete when they have dependent records

modal loading

as a user, when i am looking at the global modal and make an async response, I want a loading indicator to be displayed

branch protection

setup branch protection on master

hashtag static generation

Get static paths should generate static pages for the top 100 hashtags with getStaticPaths
Each static path should have a materialized view

avatar source refactor

• Avatar upload uses same flow as upload post
• Avatar has placeholder
• Avatar has URL then renders Next Image component with fallback placeholder
  • Avatar group can still use lazy load for images

social magic link auth

social and magic link auth can be added back to the application

Error handling

Global error handling lib for FE and BE to avoid logging to console in prod build
View next docs for options

• Sentry?

increment views on image load

get likes api

Get likes in the post/{ID}/like route

increase test coverage

Increase coverage by

• setting up local testing for supabase, api etc
• integration tests

api routing library

• investigate libraries
  • next-connect
• setup routes so they can be testable

dynamic modal load

Check if dynamic modal load will reduce initial package size

• If so, dynamically load the following modals
• ImageUploadModal
• ProfileModal

create post BE api

• User must be able to upload post
• Post is hashed and data inserted into the DB
• User gets signed URL and uploads to AWS
• Key generator

Switch feed to cursor based pagination

Main layout

image scaling

image modal is returning a scaled down version of the image that fit in the modal port. We want to slice the original image and upload that to keep as much quality as possible

api validation

• find validation library
  • express-validation
  • express-validator
• check if it works for routing lib
• implement validation on routes

Remove client API

Image bucket access

AWS Image bucket should only allow reads directly from the cloudfront distro

password complexity

Add password complexity requirements for signup

• Investigate necessity of form library for handling validation. HTML validation is not fully featured for implementing detailed messages

post like avatars

Likes should show users on postcard using the avatar icon stacks

Needs to have optimistic updates refactor

First avatar should show image of the liker, the rest should be default colors to avoid over loads

Returned from API should prefer avatars with filenames for first return

Copy:
More than 1 user, not current user: "{FIRST_LIKER} and {N} other people like this post"
More than one other user, including current user "You and {N} other people like this post"
Current user and 1 other user "You and {OTHER_USER} like this post"
1 user, not current user: "{FIRST_LIKER} likes this post"
1 user, only current user "You like this post"

post card caption

When an image is being submitted, the caption box remains on the screen. It should close out so the spinner can be seen

There should be a minH on the modal during the loading state

feed view like

Allow user to like post by clicking like button on an ImageCard in the feed

Behavior

User Logged In

• If user already likes image it displays the like as "liked"

  • user clicks and displays as "unliked"
  • Behavior is opposite if the user has not liked

• Optimistic update
  - Check if SWR rerenders before or after the call
  - Check if the page retains state when scrolling down and then back
  - Future: check if the call is made again when navigating from the page.
  - Future: heartbeat animation

• On success of API call, see if it is necessary to make a new get for the current cursor in the field

User not logged in

• Log in modal with the "Like" copy is displayed

API

• User can call DB from FE using the Supabase client
  • Create an API class for any calls that are going to use supabase client side functions in the future in case we need to move providers.
  • setup Row Level Protection on the likes table, user has RU permissions
  • Add the RLP function to our seeds or to Prisma migrations (Future?)

move image processing to lambdas

offload image hash and processing from Next API to lambdas on PutObject to S3.

Step function to call DB flagged_post table for fuzzy text search on matching image hashes (0.8 hamming)

• Prisma stable support?

seed likes

Add likes to seed script

error handling

set up success and error toasts for submissions

• if a user's refresh token is invalid there is no information displayed to user

{
   "error": "invalid_grant",
   "error_description": "Invalid Refresh Token"
}

• if a user updates their bio there is no success displayed
• if a user signs up, the "check email" message is not noticeable enough

refresh on logout/delete

Current behavior of logout is refreshing the whole page

Only feed should be updated

feed provider

The feed needs a provider that handles

• Optimistic updates
• The API route
• Feed refreshes
• User state

image uploader max height

When image is small and height is greater than width of image, modal scales larger than viewport and we can't see the buttons.

This is on large viewport but check uploader with multiple sizes of images
update - also happens on mobile. The image must be smaller than the viewport width for the stretching behavior to exist
LG Screen

SM screen