Building a web app (Whinst) weekly update #3

Building a web app (Whinst) weekly update #3

  • 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.

Subscribe to our newsletter

Read articles from andysonm's blog directly inside your inbox. Subscribe to the newsletter, and don't miss out.

 

Article Series

Building Whinst