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
  • 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, I could update a URL once a day. 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 ✅

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
  I found a way to make the video unpausable, so this isn't necessary anymore.

• 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.

• look into indexing the db lookup for the code param I use to find stuff..

• 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 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 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

sharing / advertising

linkedin

I want to share a fun little side project I recently finished.

It is a site that gives you a URL to bait and switch (definition: https://knowyourmeme.com/memes/bait-and-switch-media) anyone you want.

The site: https://turljk.xyz/d36cca

I almost gave up on the project when I found out that it is impossible to autoplay unmuted content on chrome-based browsers, but after some time I was able to work around the issue by (without spoiling too much) making the user to interact with the page and play the video.

My favorite features are:

• The video can't be paused and when the user tries to do so, the page acknowledges it and makes fun of the user.
• URLs that haven't been used in the last 20 days are deleted automatically from the database.

other sites and discord