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
Building a web app (Whinst): Epilogue
After a couple of months of development🥲,the Whinst app is now completed, deployed and ready for us…
Building a web app (Whinst) weekly update #5
Deployed the backend I deployed the Whinst backend to a Digital Ocean Droplet which is Linux-based…
Building a web app (Whinst) weekly update #3
Changed the application font using Google fonts Changing the application font in a Nextjs applicat…
Building a web app (Whinst) weekly update #2
Added functionality that compresses images on the backend To optimize the performance of a web app…
Building a web app (Whinst) weekly update #1
As you may have noticed the title of this article is different from the other building Whinst series…
Building Whinst Part 28: Working with different design elements
Because Whinst is a very visual app, I've spent quite a bit of time working on it's design/appearanc…
Building Whinst part 27: Creating a responsive Navbar
In the last article I talked about how I created a UI and UX design plan. One of the things I mentio…
Building Whinst Part 26: Creating a UI and UX design plan
Now that all essential functionality in the Whinst web app has been added, I've started working on t…
Building Whinst Part 25: Adding search functionality
Applications that have a lot of records usually have a search feature in them that allows users to s…
Building Whinst Part 24: Adding email and password editing functionality
An important feature in any application that has user accounts is the ability for users to change th…
Building Whinst Part 23: Adding link and social media sharing functionality
An essential part of the Whinst web app is the ability for users to share catalogs they have created…
Building Whinst Part 22: Redoing page loading functionality with React suspense
Happy New Year!!!🥳 In the last article, I told you about how I added page loading functionality usi…
Building Whinst Part 21: Adding file editing and page loading functionality
In the last few articles, I told you about how I added functionality that allowed users to add files…
Building Whinst Part 20: Adding video thumbnail creation functionality
In the last article, I talked about how I set up functionality that allows videos to be uploaded and…
Building Whinst Part 19: Adding video playing functionality
In the last 2 articles, I walked you through how I set up file upload and image displaying functiona…
Building Whinst Part 14: Creating and adding home page API endpoints
After fully adding authentication functionality into the Whinst web app I moved on to adding functio…
Building Whinst Part 13: Setting up user account verification
The final piece of authentication functionality I've added to the Whinst web app is user account ver…
Building Whinst Part 12: Creating a custom sign in page, adding authentication form validation and p…
In the previous sub-articles, I talked about how I added authentication functionality to the Whinst …
Building Whinst Part 11: Setting up user authentication (2/2)
This article is a continuation of the previous article which talked about how I set up logging in wi…
Building Whinst Part 11: Setting up user authentication (1/2)
User authentication which is the process of identifying a person trying to access an application, is…
Building Whinst Part 10: Setting up the database
User authentication is the first thing I've decided to do on the Whinst backend. But to start settin…
Building Whinst Part 9: Learning Express and PostgreSQL
The next step in the Whinst development plan after building the frontend is learning the required ba…
Building Whinst Part 8: Building the frontend (summary)
After about a week and a half, I'm happy to say I'm done with the Whinst front end. I've so far adde…
Building Whinst Part 7: Building the home page (2/2)
In the last article, I talked about how I set up catalog creation and listing previously made catalo…
Building Whinst Part 7: Building the home page (1/2)
The Whinst home page is the first thing users see once they log into the web app. It features functi…
Building Whinst Part 6: Making the pages responsive
One important thing to consider when building web apps is making sure all the pages are responsive. …
Building Whinst Part 5: Creating pages and adding structure to them
Most web apps on the internet today are multi-page web apps, which means they are comprised of more …
Building Whinst Part 2: Creating a development plan
One of the challenges I faced while building my last project Course Assist was the lack of organizat…
Building Whinst: Prologue
Welcome to the Building Whinst blog series🥳!! In this blog series, I will be documenting the proces…