/10but

The popular TikTok trend "They're a 10 but..." implemented with Next.js and Redis

Primary LanguageTypeScriptMIT LicenseMIT

They're a 10 but..

This website takes the popular trend of "They're a 10 but..." and turns it into a fun online game where you can see what other people think! For those unfamiliar with the trend, the basic idea is that you give someone a characteristic about someone and how attractive they are, and then they give you back what they would rate them out of 10. So for example, if someone is a 5 but they know how to use RedisJSON, then they are easily a 10/10!

TB1

TB3

TB2

How it works

It is built using Next.js, which handles routing between the main voting page, the results page, and the "add a new prompt" page. Tailwind CSS is used to build the styling and hover states for the page. tRPC is used as a type-safe layer between my TypeScript backend and my TypeScript frontend. And of course, Redis is used as my primary database.

I use Redis for two primary purposes.

The first is as a store for all of the prompts. I use a Redis list with the keyword "prompts" to store all of this information. If it currently has nothing in it, I add some great default prompts that I found on TikTok and twitter. If a user adds a new prompt, it will be "lpush"ed onto the list, and whenever a user is on the voting page a random prompt is grabbed from the full list.

The second use is as a store for all of the ratings. Whenever a user submits a vote, it saves the prompt, appearance rating, user-given rating, and difference between the two ratings into RedisJSON. I then can get the ratings and perform some data modifications to get an averaged change from appearance rating to user-given rating based on the prompt. This information is displayed on the results page.

How the data is stored:

For each prompt

  • A list of strings using the keyword "prompts"
  • Data is appended to the string using the LPUSH command (LPUSH prompts element)
  • Data is initialized by spreading out a list of default prompts into the LPUSH command (LPUSH prompts element1 element2 ...)

For each rating

  • A list of JSON objects using the keyword "ratings"
  • Each object consists of
    • prompt: A string prompt for this given rating
    • initialRating: A number that is the initial or appearance rating for this prompt
    • rating: A number that is the user-given rating
    • delta: A number that is the rating - initialRating
  • The ratings keyword is intialized using a JSON.SET of a [] (JSON.SET ratings $ [])
  • New ratings are added using the ARRAPPEND command (JSON.ARRAPPEND ratings & newRating)

How the data is accessed:

Note that while I show the Redis CLI version of the commands, I used ioredis for my application.

For the prompts

  • The entire list of prompts is queried using the LRANGE command (LRANGE prompts 0 -1)

For the ratings

  • The list of ratings is queried using the JSON.GET command (JSON.GET ratings $)

Refer to this example for a more detailed example of what you need for this section.

How to run it locally?

  1. Clone the repo git clone https://github.com/jordantwells42/10but

  2. cd into the directory and npm install cd 10but npm install

  3. Create a .env file in the local directory, and create an environment variable called REDIS_URL REDIS_URL=redis://:[password]@[Redis URL]:[Redis port]

  4. Start the dev environment by running the following command npm run dev

  5. Navigate to localhost:3000, and enjoy the app!

Prerequisites

Node v16.15.1

Local installation

Follow local run instructions above

Deployment

Deployed to 10but.jordantwells.com using Vercel

More Information about Redis Stack

Here some resources to help you quickly get started using Redis Stack. If you still have questions, feel free to ask them in the Redis Discord or on Twitter.

Getting Started

  1. Sign up for a free Redis Cloud account using this link and use the Redis Stack database in the cloud.
  2. Based on the language/framework you want to use, you will find the following client libraries:

The above videos and guides should be enough to get you started in your desired language/framework. From there you can expand and develop your app. Use the resources below to help guide you further:

  1. Developer Hub - The main developer page for Redis, where you can find information on building using Redis with sample projects, guides, and tutorials.
  2. Redis Stack getting started page - Lists all the Redis Stack features. From there you can find relevant docs and tutorials for all the capabilities of Redis Stack.
  3. Redis Rediscover - Provides use-cases for Redis as well as real-world examples and educational material
  4. RedisInsight - Desktop GUI tool - Use this to connect to Redis to visually see the data. It also has a CLI inside it that lets you send Redis CLI commands. It also has a profiler so you can see commands that are run on your Redis instance in real-time
  5. Youtube Videos