Expense Sheet Viewer

Analyze expenses and spend decisively.

Introduction

This is a NextJS application that can be used to analyze a Google Sheets that holds the expenses detail. This can be used to keep a track of expenses and then analyze them later on. One can manually create an entry in the sheet or can go ahead an create a Google Form (similar to this one) that can help in entering the details.

Built With

• Next.js
• React.js
• shadcn/ui
• Tailwind CSS
• Google Sheets API

Features

1. See the latest expense added to the sheet.
2. Filter expenses on the basis of dates displaying a filtered expenses table and a pie chart.

More coming soon...

Directory Structure

This project uses NextJS pages router based directory structure.

.
├── src                        # Contains the files related to the project
│   ├── components             # Reusable UI components, including those from shadcn/ui
│   ├── lib                    # Commonly used utility functions
│   ├── pages                  # Next.js page router
│   │   ├── api                # Server-side logic for API endpoints
│   │   └── index.tsx          # Main entry point for the application
│   └── styles                 # Tailwind CSS styles                
└── README.md

Getting Started

To get a local copy up and running, please follow these simple steps.

Pre-requisites

Here is what you need to be able to run Cal.com.

• Node.js 18.17 or later.
• A Google Sheets similar to this one.

Setup

1. Firstly since the application reads data from a Google Sheets using the Google Sheets API, create an excel sheet similar to this one. Use the Make a copy option from the sample sheet to create a copy of the excel sheet. You can also create a Google Form (similar to this one) which will then feed the data into it's own sheet.

2. Next step to is to generate a credentials file which will have the credentials that will be used to fetch data using Google Sheets API.

   a. Create a Google Cloud project from the Google Cloud console. You can follow the instructions here for more information on how to do that.

   b. Enable the Google Sheets API from this link.

   c. You need to create a service account that will access the sheets data. For that follow the instructions on this page.

   d. After creating the service all that's left is to generate the credentials file, it can be done by following the instructions on this page.

3. After generating the credentials file, clone this repository:

     git clone https://github.com/sbansal1999/expense-sheet-viewer

4. Move the credentials file to the project's root directory folder and make sure to rename it as secrets.json and then run the following command which will auto-populate the .env file from the credentials file.

     node env-util.js

   Note: You can also manually copy the credentials to the .env file, this script just automates that part.

5. The SPREADSHEET_ID that is required in the .env file can be extracted from the Sheet URL.

   For example, the spreadsheet ID in the URL https://docs.google.com/spreadsheets/d/abc1234567/edit#gid=0 is "abc1234567". Populate the .env file with this spreadsheet ID.

6. After filling the .env file all that's left is to give the Google Sheet access to the service account that was created earlier. The service account email address is in the .env file as CLIENT_EMAIL. More information on how you can do it here.

7. Install dependencies required for the project:

   pnpm install

8. Run the project locally:

   pnpm run dev

Useful Links

• Google Sheets… Your Next Database? - Fireship
• Google Workspace Documentation

Contributing

• Open an issue if you believe you've encountered a bug.
• Make a pull request to add new features/make quality-of-life improvements/fix bugs.

Known Issues

• Sorting of table on the basis of timestamp doesn't work properly due to it being considered a string. (on /filters page)
• No proper loading component as of now.
• When there are some empty fields in the middle of the last expense row, the empty rows are also shown. (on / page).
• There are cases when the end date is not considered in the filtering of expenses. (on /filters page)

Upcoming Features

• Add detailed monthly expense analysis containing information like how expenses has increased/decreased over the months.
• Add search functionality to search for a particular expense in the /filters page.