Setting up NextAuth to authenticate the user with Google.Initial Next.js application configuration.Yet I will do my best to provide guidance for everyone willing to gain new knowledge and insights through a hands-on project. This guide would work best for a developer with a basic knowledge of TypeScript, familiarity with the React ecosystem, and who is new to Next.js and Google APIs. I plan to expand this application in the future, so I went with the libraries I know and like, or with those I wanted to learn anyway. Wow, that’s quite a lot of technology for such a simple website, right? The core features lie in Next.js & Google APIs, and we will focus on those (and other underlined dependencies), so you can definitely make your own choices on the rest. react-query – for queries/mutations execution.react-hot-toast – to display toast messages.next-auth – because it handles the user session and authentication.googleapis – to access the Spreadsheet API.Next.js – because we need server-side to work with the Google Spreadsheet API.TypeScript – because there is no way in hell I am writing an app without it.Our application will not store any data other than what we write on our spreadsheet.We will not do anything that requires any payments, but it’s a requirement from Google to use their services. You need to have a Google Cloud account set up with a debit card.However, it will do so under certain limitations: My spreadsheet is updated once the request is successfully submitted.Īnd rejoice, as within this tutorial we will build an app that accomplishes precisely this scenario.I add an expense in a simple interface by providing data in the format described above.I log in to the app, and authorize myself with a Google Account.Each expense is described by a set of attributes: One contains categories of expenses (like “Food,” “Transportation,” “Bills”) and the other contains the expenses themselves. I have two sheets in my Google Spreadsheet document.The way I envisioned my perfect budgeting solution working is the following: Basically – my goal was to deliver a convenient front-end to the spreadsheet I use for my personal budgeting. The core of our budgeting solution lies in the spreadsheet, our app has to blend with and in it. However, in this case, I have a good reason for it: I want to use the features of a spreadsheet (graphing, logic, formatting data, familiar interface) while making the process of updating it more accessible. If we were to build a more traditional web app, I would not recommend using Google Spreadsheet as your database. The challenge is both in reading from it as well as writing to it. The problem we will try to solve today is in connecting the Next.js app with a Google Spreadsheet. Building a budgeting app with Node.js and Google Sheets I get anxious if I don’t have everything in the cloud, that’s why I put some of the tools I have in my toolbox as a developer to work. Some people are more old-school, working things out with pen and paper, and I envy them. Now the process of maintaining your personal, online budget will be seamlessly as good as your experience of tracking expenses is. I’ve managed to identify the reason why consistent budgeting has been so hard for me: it’s the inconvenience of updating a Google Spreadsheet from a smartphone. This time it is going to be different, though. According to data from Clutch, up to 60% of Americans feel comfortable with preparing their personal budget, but only 40% do so on a regular basis. That’s why I have a graveyard of fancy, colorful spreadsheets that were supposed to kick off a certain idea of mine, but instead are a representation of how difficult it is to learn from your own mistakes.Īpparently – I am not alone. There is nothing I like more than convincing myself it’s worth spending 10 hours optimizing a process I’m just getting started on, even if only to run from the nitty-gritty grind of it. In this tutorial, I will share my knowledge on how to leverage our programming skills to streamline the process of tracking expenses in a simple app made by connecting Next.js with Google Spreadsheets. In this difficult time, when your brain surprises you with unmatched efficiency in creating new excuses, any sort of help is welcome. Budgeting is hard, especially when you are trying to make it into a habit.
0 Comments
Leave a Reply. |