Learning to build a fullstack Next.js/React web app and maybe learning to surf good too.
It's a simple dashboard to view all your sessions and a standard video player with some additional playback controls, timestamped annotations, and a glassboard overlay.
The whole show runs on the NextJS framework. It runs a later version so it uses the App Router to navigate between pages. Route Handlers are used to access backend resources.
It's on Node 14.2.17 and it uses the Nextjs app router for navigation. It's styled (poorly) with tailwind CSS.
Zod is used for client-side validation of user input.
Shadcn is used for creation and styling of reusable components.
Sessions are stored in a sessions table. The session table primary key is a unique ID which is generated by Supabase.
Clips are stored in a clips table that use a foreign key to link groups of clips to a particular session via the session ID.
Row Level Security (RLS) is enabled for both. During development each database has policies that only give access to my user ID.
A Supabase Storage Server is used for video file storage. It's S3 API compatible.
Video files are uploaded using signed upload urls to allow clients to upload directly to the S3 storage server.
Supabase Auth is used for authentication. GitHub provides a free OAuth service as the app is registered in the GitHub developer dashboard. Supabase provides configuration docs for this use case. Unauthenticated users are redirected to the login page via middleware.
Note there is some config external to the application that is required for this system
In GitHub OAuth app settings, ensure the Authorization callback URL is set to https:your-project.supabase.co/auth/v1/callback.
In Supabase, under Authentication > URL Configuration:
- Site URL should be the web apps base URL (e.g., http://localhost:3000 for local development)
- Redirect URLs should include http://localhost:3000/auth/callback for local development and your production callback URL.
Fetching resources through fastapi server:
graph TD A[Client Request] --> B{Has Authorization Header?} B -->|No| C[HTTPBearer() raises 403 Forbidden] B -->|Yes| D[Check if starts with "Bearer "] D -->|No| C D -->|Yes| E[Extract Token] E --> F[Pass Token to get_supabase_client()] F --> G[Create Supabase Client] G --> H[Execute Route Function]
sequenceDiagram participant U as User/Browser participant A as Your App participant S as Supabase participant G as GitHub
U->>A: Clicks "Sign in with GitHub"
A->>S: Initiates OAuth flow
S->>G: Redirects to GitHub
U->>G: Authorizes app
G->>A: Redirects to /auth/callback with code
A->>S: Exchanges code for session
S->>G: Validates code
G->>S: Returns user data
S->>A: Returns session
A->>U: Redirects to /{username}/dashboard
- max file size is 50MB
- max number of files per session is 20
- max number of sessions per user is 20
- access is given on a per user basis so the number of users is controlled
- presigned upload URLs give client direct upload capability and are valid for 2 hours from creation