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!
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.
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
)
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.
-
Clone the repo
git clone https://github.com/jordantwells42/10but
-
cd into the directory and npm install
cd 10but
npm install
-
Create a .env file in the local directory, and create an environment variable called REDIS_URL
REDIS_URL=redis://:[password]@[Redis URL]:[Redis port]
-
Start the dev environment by running the following command
npm run dev
-
Navigate to localhost:3000, and enjoy the app!
Node v16.15.1
Follow local run instructions above
Deployed to 10but.jordantwells.com using Vercel
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.
- Sign up for a free Redis Cloud account using this link and use the Redis Stack database in the cloud.
- Based on the language/framework you want to use, you will find the following client libraries:
- Redis OM .NET (C#)
- Watch this getting started video
- Follow this getting started guide
- Redis OM Node (JS)
- Watch this getting started video
- Follow this getting started guide
- Redis OM Python
- Watch this getting started video
- Follow this getting started guide
- Redis OM Spring (Java)
- Watch this getting started video
- Follow this getting started guide
- Redis OM .NET (C#)
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:
- Developer Hub - The main developer page for Redis, where you can find information on building using Redis with sample projects, guides, and tutorials.
- 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.
- Redis Rediscover - Provides use-cases for Redis as well as real-world examples and educational material
- 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
- Youtube Videos
- Official Redis Youtube channel
- Redis Stack videos - Help you get started modeling data, using Redis OM, and exploring Redis Stack
- Redis Stack Real-Time Stock App from Ahmad Bazzi
- Build a Fullstack Next.js app with Fireship.io
- Microservices with Redis Course by Scalable Scripts on freeCodeCamp