sendy video

Try it out! (experiencing slow cold start times).

Allow folks with a magic link to record videos to your Google Drive. Use it to simplify your workflow for gathering testimonial videos from customers, friends, and colleagues. Some use cases:

• birthday cards
• get well / sympathy cards
• company kickoff events
• welcoming a new employee

---

Technologies and platforms used

• typescript
• next.js
• prisma + postgres
• chakra ui (highly recommended)
• next-auth (would not recommend)
• logrocket for monitoring

---

Big ol' todo list

• welcome page and "login with Google" link
• add next-auth
  • set up postgres connection
• set up prisma
• postgres: projects collection and show my projects on logged-in page
• styled-components
• home page
  • prototype as "projects page"
  • list projects
    • better visual style
    • copy url
    • copy greeting
    • isOpen (project status column)
    • make # submissions the external link to gdrive
      • update when submissions are deleted
    • calc (cache?) total size
  • list submissions
    • list submissions-as-guest (attach to session?)
    • direct links to videos
    • delete submission (w/confirmation)
    • thumbnail (https://stackoverflow.com/a/45027853/220642)
  • cool layout
  • styling
  • action buttons --> icon buttons
  • only show 5 in each table; order by creation desc
  • pagination
• create project page
  • automatically create "Sendy Projects" folder
  • automatically create sub-folder with project name (req. unique names per user)
    • folder can be moved without losing connectivity due to gdrive file IDs
  • styling
  • "sucessfully created" message
• view project page
  • styling
  • delete project
• common ui
  • header
    • logo-that-goes-home size={['md', 'sm']}
    • profile badge + user menu
  • basic theme colours in chakra
  • basic fonts
  • mobile responsive ui
• post-submission back to home page
  • "sucessfully uploaded" message
• project submission page (via unique url)
  • https://github.com/google/google-api-javascript-client
  • xfer after recording is finished
  • reset (discard current video)
  • "Need help?" button clears form
  • upload my own video
  • do enumeration for Capture Settings after getting permission
  • friendly device names (no "Camera", "Microphone", "(Built-in)", or "(\hex+-\hex+)"
  • correctly dispose of MediaStream when you navigate away (useEffect?)
  • file extension based on mimetype (e.g. webm instead of mp4)
• extra constraints
  • max length
  • max size per submission
  • max size for all submissions
  • limit to one submission per user + "retry"
  • close submissions at some instant in the future
  • require (google) auth
  • upload to sso user's drive + create shortcut
• set metadata on project submission
• share file with user
• api route to redirect to a submission's web link
• dev: sharing prisma instances / connection pooling
  • https://www.prisma.io/docs/support/help-articles/nextjs-prisma-client-dev-practices
• splash message on / for non-logged-in folks
  • a better one that's more integrated into the view and not based on toast
• use JWTs to improve performance (see nextauthjs/next-auth#2433 and nextauthjs/next-auth#1535)
  • [future] upgrade to next-auth v4.1, which has perf fixes
• three-step

Deployment

• database
• vercel
• CD
• CORS: www.sendy.video was passed in as Origin to Google, but they expected sendy.video
• CSP / vercel-analytics: https://stackoverflow.com/questions/65551212/using-csp-in-nextjs-nginx-and-material-uissr
  • was just adblock

---

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.tsx.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.