Build a Finance Tracker with Next.js, Strapi, and Chartjs: Part 1

In this tutorial, you'll learn how to build a personal finance app using Next.js, React, Strapi CMS, and TypeScript. The app will allow users to create budgets, track income and expenses, set a budget limit amount that users won't be able to exceed when creating budgets, and display the total budgeted amount against the limit before submitting. Here are the steps we'll follow: 1. Set up Strapi CMS for backend storage. 2. Create collections and entries in Strapi. 3. Connect the frontend to the backend using Axios. 4. Build a functional, interactive personal finance app with React and TypeScript. 5. Add visualization with charts and graphs using Chart.js (in part two of this tutorial series). By the end of this tutorial, you'll have built a fully functional personal finance app that can be used to manage personal finances effectively. Let's get started! First, we need to set up Strapi CMS for backend storage. To do this, follow these steps: 1. Install Node.js and npm (Node Package Manager) if you haven't already done so. You can download them from the official website: https://nodejs.org/en/download/. 2. Open your terminal or command prompt and run the following commands to install Strapi globally: ```bash npm install -g strapi@latest ``` 3. Create a new directory for your project and navigate into it using the terminal or command prompt: ```bash mkdir personal-finance-app && cd personal-finance-app ``` 4. Run the following command to initialize a new Strapi project in this directory: ```bash strapi new backend --quickstart ``` 5. Follow the prompts to set up your Strapi project, including choosing a database type (SQLite is recommended for development purposes). Once you've completed the setup process, start the server by running: ```bash npm run develop ``` Now that we have our backend set up, let's create collections and entries in Strapi. We will need three main collections: Budgets, Income, and Expenses. 1. Open your browser and navigate to http://localhost:1337/admin. This is the Strapi admin panel where you can manage your data. 2. Log in using the default credentials (email: [email protected], password: strapi). 3. Click on "Plugins" in the left sidebar and enable the following plugins if they are not enabled already: Content-Type Builder, API, and User Permissions. 4. In the main menu, click on "Content-Types Builder" to create new collections for our app. We will start with the Budgets collection. 5. Click on "Create New Content-Type" and give it a name like "Budget". Add the following fields: - Category (Text) - Amount (Number) 6. Save your changes by clicking on the "Save" button at the top right corner of the page. 7. Repeat steps 5-6 to create collections for Income and Expenses with similar fields as Budgets. 8. Now that we have our collections set up, let's add some entries (data) into them. Navigate back to the main menu and click on "Content" in the left sidebar. 9. Click on "Add New [Collection Name] Entry" for each collection (Budgets, Income, Expenses) and fill out the necessary information. For example, you can create a budget entry with Category: "Food" and Amount: 500. 10. Once you've added some entries, we need to enable public access for them so that our frontend application can fetch this data. In the left sidebar, click on "Settings" > "Roles & Permissions". 11. Click on the "Public" role and then on the "Permissions" tab. Enable the necessary permissions for each collection (e.g., read, update). Now that we have our backend set up with data, let's move on to connecting the frontend to the backend using Axios. 1. Create a new directory for your frontend application and navigate into it: ```bash mkdir personal-finance-app && cd personal-finance-app ``` 2. Run the following command to initialize a new Next.js project in this directory: ```bash npx create-next-app --ts ``` 3. Install Axios as a dependency for our frontend application by running: ```bash npm install axios ``` 4. Open the `pages/index.tsx` file and replace its content with the following code: ```javascript import React from 'react'; import axios from 'axios'; interface Budget { id: number; attributes: { category: string; amount: number; }; } const Home: React.FC = () => { const [budgets, setBudgets] = useState<Budget[]>([]); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { const response = await axios.get('http://localhost:1337/api/budgets?populate=*'); setBudgets(response.data.data); } catch (error) { console.error(error); } }; return ( <div> {budgets.map((budget) => ( <div key={budget.id}> <p>{budget.attributes.category}</p> <h1>${budget.attributes.amount}</h1> </div> ))} </div> ); }; export default Home; ``` This code sets up a basic Next.js page that fetches budget data from our Strapi backend using Axios and displays it on the screen. Now, let's build a functional, interactive personal finance app with React and TypeScript. We will start by creating components for each section of our app: Budgets, Income, Expenses, and Cashflow. 1. Create a new folder named `components` inside your frontend project directory. 2. Inside the `components` folder, create four new files: `Budget.tsx`, `Income.tsx`, `Expense.tsx`, and `Cashflow.tsx`. 3. Open each file and define their respective interfaces for data types. For example, in `Budget.tsx`: ```typescript import React from 'react'; interface Budget { id: number; attributes: { category: string; amount: number; }; } export default Budget; ``` 4. Define the components' functionalities and styles according to your preferences. You can use various libraries like Material-UI, Tailwind CSS, or plain CSS for styling purposes. 5. Create a new folder named `pages` inside your frontend project directory if it doesn't exist already. Inside this folder, create a new file called `app.tsx`. This will be the main entry point for our app. 6. Open the `app.tsx` file and import all necessary components from their respective files: ```javascript import Budget from '../components/Budget'; import Income from '../components/Income'; import Expense from '../components/Expense'; import Cashflow from '../components/Cashflow'; const App: React.FC = () => { return ( <div> <h1>Personal Finance App</h1> <Budget /> <Income /> <Expense /> <Cashflow /> </div> ); }; export default App; ``` 7. Replace the content of `pages/index.tsx` with the following code: ```javascript import React from 'react'; import App from './app'; const Home: React.FC = () => { return <App />; }; export default Home; ``` Now, our frontend application is set up with all necessary components and data fetching functionalities. You can run your app by executing the following command in the terminal or command prompt: ```bash npm run dev ``` Open your browser and navigate to http://localhost:3000 to see your personal finance app in action! In this tutorial, we covered setting up Strapi CMS for backend storage, creating collections and entries, connecting the frontend to the backend using Axios, and building a functional, interactive personal finance app with React and TypeScript. In part two of this tutorial series, we will learn how to add visualization with charts and graphs using Chart.js. Stay tuned!