URL: https://turljk.xyz/d36cca

what and why

I want to make a site that rick rolls you but after a few seconds it sends you to the intended link. All other rick roll url generators I looked at just rick roll you.

possible domain names:
TURL-JK: Troll URL Just Kidding
RRJK: rick roll just kidding

requirements

• I want minimal design, cartoonish.
• ideally video should be autoplayed and be unpausable. countdown should only change according to how many seconds of the video has played as well.
• rick roll default option, but give users the option to create custom records with the option to change the video and time to wait.
• URLs that don't get used in the last 30 days get automatically deleted
  • when url is generated let the user know by animating a popup msg: 'If your URL isn't visited in 30 days <icon of Rick Astley head> will personally get into the database and delete it.
  • to reduce db writes, every time a read is done on a URL, check if it was updated today, and update it or don't depending.
  • how do I implement a cron job that checks the DB for these records?
• footer w github link and buy me a coffee link

stack

I want to use mongoDB
fullstack monolithic. nextjs or sveltekit. I'll use Next and take the opportunity to learn the new App router.

I can deploy the nextjs project on vercel

where Am I going to deploy the database?

Vercel has extension/integration with MongoDB Atlas

MongoDB Atlas has free tier of max 500MB size db. I think I can maintain the DB for this site under 500MB easily.

Supabase is SQL alternative to firebase. supabase also has storage up to 500MB.

Firebase firestore has free up to 10GB. if mongoDB atlas doesn't work out I can try with firestore

mongoDB vercel integration tutorials:

• blog
• oficial video
• deploy template page ✅

dev setup

after cloning repo, add .env file with the MONGODB_URI variable

Tasks

• try out the AI generated UI thing by Vercel https://v0.dev/

• copy v0 code either by npx command or manually copying.

• cleanup unused files and npm packages

• migrate template project to apps router

• update lastVisit when URL is hit

• copy to clipboard button

• make it mobile friendly

• tooltip explaining the site

• make countdown work with yt API and check how many seconds have been played of the video. https://developers.google.com/youtube/iframe_api_reference#Playback_status

• more fun / annoying backgound on the redirect page.

• generate short unique ID for the URL.

  • see this thread
  • nanoid lib
  • use the counter part of the mongoDB object Id. see this answerr ✅
  • get the mongo object ID and encode that in base62 or base 36
  • hash the URL w md5 and encode that in b64

• fetch record from db from dynamic URL param

• youtube api script is loading inconsistently ✅ 2024-06-27

  • do client side rendering with useEffect / fetch, swr, axios...
  • server components. can't be a server component bc of useEffect/State. ❌
  • route handlers. this is for API routes ❌
  • making a route handler that returns the client component for my page. route handler can't return client component❌
  • generateStaticParams() function. I don't think this is what I want to do.. ❌
  • server actions. undocumented / not recommended for data fetching ❌
  • my page could be a server component and I would need to separate into diferent components the things that need interactivity. Which is basically what using the api route would do and similar to the limiation on the pages router with getServerSideProps (with only page files being able to use that function).✅

• weird build error https://github.com/vercel/next.js/discussions/48724.

• console erros on redirect page.

• animate main form size change.

• for time input it can be a number input and next to it a small text that translates to DD:HH:MM:SS.

• autoplay problems. On chrome, autoplaying unmuted videos is not possible. A workaround is to bait out a click from the user. Other rick roll URL site uses a fake accept cookie popup to bait out a click. A better bait would be a cloudflare captcha. Can't use the real cloudflare widget bc most times it verifies the user automatically, without having to click it, so I'll use an image or fame markup instead.

  to trigger playing the video with Js use the Youtube iframe API.
  https://stackoverflow.com/questions/43238487/youtube-iframe-api-disable-skipping
  or one of these npm packages. which I believe implement the same API.
  https://www.npmjs.com/package/react-youtube
  https://www.npmjs.com/package/react-lite-youtube-embed

• investigate about Search Engine Optimization SEO and how to improve it.

• practice integrating analytics, and user behaviour.

• google ads

questions

• what is the components.json file generated I think either by Nextjs init or v0 init.

data structure

single table
id(short uuid) | url(string) | videoUrl | seconds(int) | lastVisit