Project - Money Book Demo

Next.js is my favourite React framework these days. For this reason, I decided to use it to develop a small project. This project is a finances tracking app that features basic CRUD (Create, Read, Update, Delete) operations, user authentication, and data visualization with charts.

Server actions for CRUD

Server actions in Next.js provide a streamlined way to handle CRUD operations directly within your React components, without the need for traditional API endpoints. By marking a function with the "use server" directive, you can define actions that run on the server, allowing you to securely interact with databases or other backend services. These actions can be called from forms or event handlers, making it easy to submit, update, or delete data.

On the dashboard page and transactions page, you can add a new transaction through the 'create new' button. You can also use the filter to modify specified transactions and delete transactions.

Database

While Next.js doesn’t include a built-in database, it makes it easy to connect to external databases via APIs, handling data fetching and processing on the server side. In this project, I have connected it with the Neon database to store income and expense data securely.

I am also using Drizzle ORM because it provides a type-safe, SQL-focused API that closely mirrors standard SQL, making it intuitive for developers familiar with relational databases.

Authentication

The most commonly used libraries and services for authentication in Next.js projects are Auth.js and Clerk. I am using Clerk in this project which provides some pre-designed React components such as <SignInButton /> and <SignUpButton />, which saves significant development time and ensures a polished user experience.

Form validation

I am using form action to perform the CRUD server actions. By doing so, I used Shadcn Form component with Zod for validation.

ShadCN Form is designed to work seamlessly with React Hook Form and Zod. By using the 'zodResolver', you can connect your Zod schema to your form in just a few lines, and ShadCN’s components automatically manage the wiring between the form, input, and error states.

Shadcn UI

In this project, the main layout is composed of Shadcn components. The most interesting component is the chart component on the dashboard page. This chart uses different colours to display the income and expenses for each month, and also summarises the overall balance.