DEV Community: Jordan Wells

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

Jordan Wells — Mon, 15 Aug 2022 21:17:00 +0000

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

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!

How it works

View on GitHub

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

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

I Built a Tinder for Restaurants App — Here Are Some Web Development Techniques I Learned

Jordan Wells — Mon, 08 Aug 2022 21:08:00 +0000

This week, I aimed to solve the age old question: Where should I eat? Here’s what I learned from it.

This week, I aimed to solve the age old question: Where should I eat?

Along the way, I learned three important tips about web development that I will carry with me to everything else that I decide to make.

I’ll first talk about the app I made to give you some context, and then I’ll dive into problems I was presented and what I learned by fixing them.

You can try out the site yourself at whereshouldieat.app and as always all of the code can be found on GitHub.

Where Should I Eat?

Of course, solutions for this already exist. You can pull up Google search and fire out a quick search for “sushi near me”, or look up an article about “top restaurants in Manhattan.” However, both of these solutions answer the question by forcing you to make an even harder decision between many choices, some of which you may have never heard of before.

My site alleviates this by only giving you one decision at a time: whether you want to eat at this restaurant or not. If you don’t want to eat there, you shouldn’t need to think about it anymore. If you do want to eat there, you should be be immediately taken to directions on how to get there.

These choices are encoded into gestures. A swipe left means to ignore that restaurant and no longer consider it. A swipe right leads to the Google Maps page for that restaurant where you can easily find directions. You only ever have to make one decision at time, making the whole process as streamlined for someone as indecisive as me.

1. Slowing down your app can speed up the user experience

Responsive inputs can feel amazing. As soon as you start typing in an input field, autosuggestions can pop up and other queries can start happening. However, some things just shouldn’t happen on every key stroke.

For my app, I initially had the text input set up so that every key stroke would fetch from the Yelp API, find and set locations and businesses, and change the location on the map. This caused the map to jostle around and load several towns based off partial inputs. Trying to search for “midtown Manhattan” would lead to a search for “m” and “mi” and “mid” and every other possible substring starting from the beginning.

My solution to this was a concept called debouncing. This makes it so that it is physically impossible for the function to be called several times within a certain time interval, effectively throttling the relationship between the input and its effects. Now the search only fires once the user has cooled off on typing in their input, giving the expected results.

In terms of implementation, I found this article very helpful with ways to do it with React primitives. Of course, someone has made a library for debouncing input fields called react-debounce-input, so I used that instead. Implementation is as easy as replacing inputs with DebounceInputs.

export default function MyDebounceSearch(){
  const [state, setState] = useState("")

  return (
      <div>
        <DebounceInput
          minLength={2}
          value={state}
          debounceTimeout={300}
          onChange={event => setState(event.target.value)} />

        <p>Value: {state}</p>
      </div>
   )
}

2. Your first user shouldn’t come with deployment

This may sound obvious, but you are the first person to use your site. And according to Jakob’s law, you have spent MUCH more time on sites other than the one you just started developing yesterday. You’re a good judge of how sites work and how your new site should behave. So, use it!

Even as you’re developing, be the user and interact with your site constantly. And if something is confusing to your user-brain, put on your developer hat and fix it!

In the case of Where Should I Eat, I found this most evident with how I handled the URL. I used the barely-developed version of the site whenever I was out with friends, and I found myself confused whenever I tried to press the back button on my browser and it completely navigated me away from the site. The internet has taught me that if I want to undo, I can navigate back and expect the change to be undone.

To fix this, I lifted my state into the URL. Now, whenever I major change was made to the location of search or the food that the user was craving, this would be reflected as a URL parameter. So, if a user decided they weren’t feeling tacos and they wanted to go back to their previous choice of sushi, they could naturally do that by navigating back on their browser.

Quick aside: If you’re using Next.js and it’s router to handle putting state into the URL, I would recommend using shallow routing and setting the scroll option to false if you’re finding issues with state changes jerking your site’s scroll or data around.

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Current URL is '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true, scroll: false })
  }, [])

  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}

export default Page

3. Compromise with cunning

Originally, I wanted to use the Google Maps API. I was quickly met with a credit card form and a pricing scheme that scares the part of me that hopes my app is an overnight success. And this isn’t even including using their map tiling for generating the dynamic map. (They do provide $200/month of requests free but I learned that after I started my site.)

Instead, I reached for free alternatives. The Yelp Fusion API provides me with place information such as reviews, locations, and hours of business with a solid 5,000 requests/day without upgrading to an enterprise plan. Additionally, the pigeon-maps package leverages free tiling solutions such as OpenStreetMap to provide dynamic and well-tooled maps for React.

Of course, I still wanted to use Google Maps at the end of the day. In order to still get that integration, I simply used the queried latitude, longitude, and place name from Yelp to construct a Google Maps URL that would take me right to the correct place. There is a helpful guide I found for doing that.

Now I’m able to get similar functionality without breaking the bank and with no noticeable hits to the user experience. I’ve comprised on not using the Google Maps API but have lost no major features to my app!

Conclusion

As I’ve continued to build more projects, I found the issues I face become more and more subtle. At first, I was yelling at JavaScript. Then, I was confused by hooks and whatever the heck “state” is. Eventually, I was yelling at TypeScript. Now, I find my issues to be more like crafting a clean user experience, fetching data in a way that prevents waterfalls, or making an aesthetically pleasing design.

I hope to level-up my development so that the only issue I have is coming up with the next unicorn startup idea! And I hope to share some of the wisdom I learn along the way with all of my readers!

If you want to follow along with my programming journey, follow me here on Medium and check out my personal site at jordantwells.com.

Thanks for reading!

Jordan

Creating a full-fledged Spotify Playlist Generator in a Weekend

Jordan Wells — Wed, 20 Jul 2022 12:56:00 +0000

Recently, I've wanted to better understand how APIs work. I've used some simple ones that will generate random colors for you, or give you a random dog fact (did you know that perky-eared dogs hear sounds better than floppy-eared dogs?). APIs can be a wonderful tool to get data for your web app, but almost all of the more sophisticated ones require authentication and authorization.

To this end, I decided to use Spotify's Web API. It provides extensive documentation and allows you to do nearly anything a user can do on the platform; search for songs, create playlists, get recommendations, and much much more.

The app I made is called Vibesition, and it allows a user to make a playlist that seamlessly transitions from one song's vibe to another. Its easily the my favorite web dev project that I have ever made.

Try it out yourself at vibesition.jordantwells.com! All of the source code for it can be found on my GitHub.

Authentication using NextAuth.js

NextAuth is a tool for Next.js that makes integrating with popular sign-in services such as GitHub, Facebook, Discord, and many more as simple as possible. I would highly recommend using create-t3-app to initialize your project, as it can setup much of the boilerplate of NextAuth for you.

The only changes you need to make is to the [...nextauth].ts
file, to use the SpotifyProvider and give your app the proper authorization scope. The Client ID and Client Secret both come from registering an application with the Spotify Developer Dashboard. While you're here, make sure to add something akin to "http://localhost:3000/api/auth/callback/spotify" to your Redirect URIs to ensure that you can sign in correctly.

import NextAuth, { User, type NextAuthOptions } from "next-auth";
import SpotifyProvider, { SpotifyProfile } from "next-auth/providers/spotify";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions: NextAuthOptions = {
  // Configure one or more authentication providers
  providers: [
    SpotifyProvider({
      authorization:
      'https://accounts.spotify.com/authorize?scope=user-read-email,playlist-modify-public',
      clientId: process.env.SPOTIFY_CLIENT_ID as string,
      clientSecret: process.env.SPOTIFY_CLIENT_SECRET as string,
    })
  ],
  callbacks: {
    async jwt({token, account}) {
      if (account) {
        token.accessToken = account.refresh_token;
      }
      return token;
    },
  },
  secret: process.env.NEXT_AUTH_SECRET as string,
};

export default NextAuth(authOptions);

In my case I chose a scope that allows me to the see the user's email address, and modify their public playlists, just as much as I would need for Vibesition. To actually consume this API, the authorization code needs to be exchanged for an access token which will be your ticket to use any endpoint within your defined scope. More details about this process can be found on Spotify's documentation. Note that this refresh token comes from the token generated by NextAuth

const client_id = process.env.SPOTIFY_CLIENT_ID
const client_secret = process.env.SPOTIFY_CLIENT_SECRET
const authorization_code = Buffer.from(`${client_id}:${client_secret}`).toString('base64')

const getAccessToken = async (refresh_token: string) => {
  const response = await fetch(`https://accounts.spotify.com/api/token`, {
    method: 'POST',
    headers: {
      Authorization: authorization_code,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token
    })
  })

  return response.json()
}

export const getUsersPlaylists = async (refresh_token: string) => {
  const { access_token } = await getAccessToken(refresh_token)
  return fetch('https://api.spotify.com/v1/me/playlists', {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  })
}
export const getSearch = async (refresh_token: string, query: string) => {
  const { access_token } = await getAccessToken(refresh_token)
  const querystring = new URLSearchParams({
    q: query,
    type: 'track',
    limit: '5',
    market: 'US'
  }).toString()
  return fetch(SEARCH_ENDPOINT + '?' + querystring, {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  })
}

Note that the "refreshToken" parameter comes from NextAuth, and with my setup can be gotten by doing.

const token = await getToken({req});
const accessToken = token.accessToken as string;

Building the App

Now that I had the power of Spotify's API behind me (within my small scope that I defined), I could finally get to work building my web app.

I wanted users to be able to search songs to act as the starting and ending points for their playlist. To do this, I used the search endpoint to fetch the top 5 responses from Spotify search. Once a user selects a song as shown above, it saves the Spotify ID in React state. This ID is used as a query for many of the other endpoints, so it's a good thing to save.

Once a user selects a song it automatically generates a color based on the ~vibe~ of the song using the Spotify Audio Features endpoint. Specifically, I use a combination of the song's danceability, energy, and valence (I don't know what it means either) to determine the RGB values.

To determine what songs will be in the playlist, I use the Get Recommendations endpoint. This allows you to find songs based off target features, such as danceability, tempo, key, duration and many more. In this case I use a sigmoid-like interpolation to interpolate between the two song's values of the audio features and get 10 songs with target values on that curve.

Finally, to create the playlist, I use both the create playlist and add items to playlist end points.

There was a whole bunch of other neat things added into this project as well. I used Framer Motion to give the entire project some much needed life. I used HTML audio tags to allow users to play songs if they had a preview url from Spotify. And of course I used Tailwind CSS to make making the UI the simplest part of the process.

Conclusion

Overall, this was an incredibly fulfilling project to learn about using high-impact APIs. I hope to use many more in the future and incorporate them into my projects to make getting interesting data easy. If you're interested in more of my projects or me, check out my personal website, jordantwells.com.

Thanks for reading!

I Made an Automatic Color Theme Generator for Tailwind CSS

Jordan Wells — Sun, 17 Jul 2022 11:53:54 +0000

I have recently been obsessed with the T3 stack (Next.js, TypeScript, Tailwind CSS, Prisma, and tRPC). As part of that I have been using Tailwind CSS to quickly layout the format of every project I have been working on for the past month. It makes styling as symbol as writing classes into your JSX or HTML.

But I wanted more options. The default colors provided by the Tailwind team are wonderful, but I’ve started too many projects with ‘bg-slate-700’. I decided it was time for me to change something. And what better way to do that than to make my own tool.

HueWind is a site devoted to making cohesive Tailwind CSS themes as easy as possible. Drawing inspiration from pixel art palette creators, I placed a heavy emphasis on clean blending between a theme’s lightest value, primary colors, and darkest value.

Try it out here, huewind.jordantwells.com , and as always the source code can be found on my GitHub at github.com/jordantwells42/huewind.

Why use this over any other palette generator?

The key behind this project is its awareness of all the colors on your site. Typical color swatches are generated in a vacuum, where base colors are unaware of their relationship to other base colors, and the entire swatch is unaware of its relationship to the lightest and darkest tones on the website.

HueWind automatically generates complementary theme colors for you as part of a tetradic color scheme. This ensures a clear relationship between your primary theme color and the ones that support it.

More importantly, color swatches are generated with respect to the lightest and darkest tones on your site.

Typical autogenerated color swatches will transition your target color towards a pure white (#FFFFFF) to generate lighter shades and a pure black (#000000) to generate darker ones. While this design can look modern, it also lacks a lot of the soul that hand-picked artistic palettes have.

HueWind instead looks to your chosen lightest shade and darkest shade to create its swatches. A simple change from a pure black to a deep purple or a blinding white to a pale yellow can have wonderful changes to the aesthetic and feel of a website.

How does it work?

HueWind uses spline interpolation to seamlessly transition between the hues, saturations, and values of your light, dark, and base shades.

This uses the 3 points of your light, base, and dark shades to uniquely determine a curve that passes through all of them, setting the X value of the shades to 0, 500, and 1000 respecitvely. It then evaluates this curve at the classic 50–900 values of Tailwind CSS, giving the final output values.

Importantly, for accessibility I automatically choose an accessible text color all across the site using tinycolor. This includes a fallback to using pure black and pure white in case that user decides that their favorite light shade is white and their favorite dark shade is white.

Try it out!

It takes less than a minute to have a palette generated! Use it here at huewind.jordantwells.com ! And I’m sure you’ll see me using it on my future projects on jordantwells.com .

Jordan

How I created a Responsive Personal Portfolio Website with Next.js

Jordan Wells — Sun, 17 Jul 2022 11:53:31 +0000

Almost two years ago, I created my first website using HTML, CSS, and Python. Now, I’ve reinvented it using a modern and robust front-end development framework known as Next.js. For the past week, I have been developing it and now I’m proud to present www.jordantwells.com.

I created the first website to learn the “ins and outs” of web development fundamentals, and now I’ve created this new website to learn how front-end development is done with a slick JavaScript framework. It definitely wasn’t an easy journey, but I hope I can pass on some of the cool things that I’ve learned about along the way.

As always, if you want to see any of the code that made all this possible, it is available on my GitHub.

Why is Next.js great?

Next.js is a framework built on top of React, the popular JavaScript front-end development library. The benefit? Statically generated pages are reactive, and Next.js will hydrate your application client-side to give it full interactivity.

Additionally, there are many ways to render your site. Content can be rendered by the server (Server-Side Rendering), pre-rendered whenever you build the application, or deferred until a user decides to access the page.

What does all this mean?

Faster development times
Improved performance
Better user experience

Sounds pretty good to me! There’s a reason why it is used by Netflix, DoorDash, Twitch, Hulu, and many more. So lets get cracking on developing one of these apps.

Getting started with Next.js

Before we begin, I’d highly recommend checking out the Next.js documentation, which does an amazing job explaining all the ins and outs of the framework.

1. Creating a Next.js project with create-next-app

Thankfully, the kind people behind Next.js have made it easy to get started with a bare bones Next.js app. Similar to the ever popular create-react-app, you can get Next.js up and running with just one simple command. Simply run one of the following commands in your terminal, and you should be greeted with a fully functioning Next.js app.

npx create-next-app@latest 
yarn create next-app
pnpm create next-app

2. Setting up the development environment

Then, all you need to do is navigate into your new project folder, and start the development server.

# Navigate to Next.js project folder

cd myApp

# Start development server

npm run dev

This should start a locally hosted version of your Next.js app at somewhere like http://localhost:3000/.

3. Getting familiar with the layout

There are a few important things to take note of on this page.

Pages. This folder defines all of the pages on your site. Each page has to export a React component which defines all of the html on that page. index.js is the landing page for your website, and any other JavaScript file in this folder will create a new page. For example, creating an about.js file in this folder will create a new page at yourcoolwebsite.com/about.

Additionally, created a folder within the pages folder will create a new nested area on your site. For example, creating a projects folder and then a file called myproject.js inside that folder will create a new page at yourcoolwebsite.com/projects/myproject.

Finally, you can create dynamic routes by using brackets. For example, say you have a blog and want to have pages based on the blog post id. This can be accomplished by having a file such as blogs/[id].js. The brackets tell Next.js that url paths such as yourcoolwebsite.com/blogs/1 and yourcoolwebsite.com/blogs/2 should be supported.

Public. This defines where all of your static files exist, with any file in this folder being accessible through the use of a proceeding slash. So to access an image called my_cool_image.webp, you would use /my_cool_image.webp.

From here it is relatively standard React development! I would highly recommend this tutorial by freeCodeCamp.org for everything you could ever want to learn about React, and the Next.js documentation for anything Next.js specific.

Adding some personal flare

To spice up the website a bit, I created a landing page with cute pure CSS clouds. They randomly displace when hovered, and fly down from offscreen when you initially load the page.

Flexibly adding project pages using reusable React components

One of the best parts about the new website is that I have a single file, projects.json, which contains all of the information I need to build out project cards and project pages. This is achieved using React components, where I load the static JSON file and pass its information as props to the project page. If I complete a new project, I simply need to update the projects file with the new information and some pictures and it will automatically create a new page for it with no extra effort on my part!

The world’s easiest deployment with Vercel

Vercel, the developer of Next.js, has made a cloud service that makes it incredibly quick to deploy, scale and iterate on Next.js projects with no need for configuration.

The best part? Since it’s integrated with GitHub, any changes you make to the deployment branch of your GitHub repository will be automatically deployed to the sight! No hassle and no need to push the changes to Vercel.

Even better, its completely free for hobby users! They provide a .vercel.app domain for any project you deploy, which can be easily replaced with your own custom domain from a service such as Namecheap, GoDaddy, or Google Domains. I took the extra steps to use CloudFlare on top of Vercel, allowing me to easily see website statistics.

What’s next for me?

It’s time to build out that portfolio! I’ll be working on plenty of projects in the coming months, so be sure to follow me to hear all the updates! And check out the finished website, www.jordantwells.com, I’ll be keeping it up to date with all of my recent projects! And if you’re curious to see how I made it, check out my GitHub.