Building a web app (Whinst) weekly update #3

Building Whinst
  • Changed the application font using Google fonts

Changing the application font in a Nextjs application is pretty straight forward as compared to other frameworks. Nextjs comes with a Google fonts package. All I had to do was import the Google font I chose and added the font to the body tag of the main layout file of the application. The code below shows how this done

import { MyFont } from 'next/font/google'
const MyFont = MyFont({subsets:['latin']})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={MyFont.className}>{children}</body>
    </html>
  )
}
  • Added image previews and image placeholders

I added a simple image preview for when users try to upload images. This will help the user see the actual image before they decide to upload it. I also added image placeholders that display a default image for the user instead of blank area when no image has been uploaded. The image below is of the image preview and image placeholder.

  • Created an app logo

I created a very simple app logo, created entirely in Canva. The image below is of the Whinst logo.

  • Added a currency picker

I added functionality that allows users to select a world currency of their choice and save it to the database. To do this I first had to get all world currencies and store them in a list. I then used the built in select and options tag to create a currency picker. Using a map function the world currency list is looped to give users a list of selectable currencies. The image below is of the currency picker.

  • Added functionality that allows users to sign-in with their Google accounts

To do this I used NextAuth’s built in social login functionality. Without going into too much detail, NextAuth allows you to easily use several different providers for logging in. In this case I used only Google. Most of this functionality is performed in the background by NextAuth. The biggest challenge I faced was adding functionality that also created a user in the database given the information provided by Google after a user is authenticated. Basically what happens is when a user uses their Google account to sign-in, the application checks whether the given user credentials are registered in the database. If they are, the user object from the database is returned. If they aren’t, a new user is created and is returned. The gif below is of how it works.

Share

Leave a Comment

Your email address will not be published. Required fields are marked *