DEV Community 👩‍💻👨‍💻

Cover image for They're a 10 but they use Redis as their primary database - They're still a 10!
Jordan Wells
Jordan Wells

Posted on

They're a 10 but they use Redis as their primary database - They're still a 10!

Overview of My Submission

Hello everyone! I built a popular TikTok trend using Next.js, TypeScript, tRPC, and Redis! Check it out a https://10but.jordantwells.com

This website takes the popular TikTok 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!

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.

Submission Category:

Wacky Wildcards

Language Used

JS/TS/Node.js

Link to Code

GitHub logo jordantwells42 / 10but

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

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…

Additional Resources / Info

This project was built using the T3 stack! It and all of the technologies can be found and used at https://github.com/t3-oss/create-t3-app


Top comments (1)

Collapse
 
theether0 profile image
Shivam Meena

Nice one bro.

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.