Valentius Kryptix

As part of my internship at Valentius Kryptix, I recently completed my Milestone: Full-Stack Mini Project by developing ExpenseTrack, a personal expense management web application. The main objective of this project was to build a complete full-stack application that connects a React frontend with a backend REST API and database.

About the Project

ExpenseTrack is designed to help users record and manage their personal expenses in an organized way. Users can create an account, log in securely, create expense categories, and manage their expenses from a centralized dashboard.

The application provides a simple interface where users can view their expenses, add new records, update existing expenses, and delete records when they are no longer required.

Live Project:
https://expense-track-frontend-omega.vercel.app

Key Features

Some of the major features implemented in ExpenseTrack are:

• User registration and login
• JWT-based authentication
• Protected routes for authenticated users
• Dashboard with expense summaries
• Add, view, edit, and delete expenses
• Expense categorization
• Add, edit, and delete categories
• Form validation
• Loading and error states
• Logout functionality
• Responsive and user-friendly interface

Technology Stack

For the frontend, I used React.js with React Router to create the different pages and manage navigation. The frontend communicates with the backend through REST API calls.

For the backend, I used Node.js and Express.js to create the REST API. The application provides endpoints for users, expenses, and categories.

For data storage, I used SQLite. The database contains tables for users, expenses, and categories, with relationships between the records.

For authentication, I implemented JSON Web Token (JWT) based authentication. Passwords are securely hashed using bcrypt before being stored in the database.

CRUD Operations

One of the main learning objectives of this project was implementing complete CRUD operations.

CRUD stands for:

• Create — Add a new expense or category
• Read — View existing expenses and categories
• Update — Edit an existing expense or category
• Delete — Remove an expense or category

The frontend sends API requests to the Express backend, which processes the requests and interacts with the SQLite database.

Deployment

After completing the application locally, I deployed the frontend and backend separately.

The React frontend was deployed using Vercel, while the Node.js backend was deployed using Railway. I then connected the frontend to the deployed backend API using the VITE_API_URL environment variable.

This helped me understand an important part of real-world development: building an application locally is only one part of the process; configuring environment variables and connecting independently deployed frontend and backend services are also important.

What I Learned

This project helped me strengthen my understanding of full-stack web development. Some of my key learnings were:

1. Frontend–Backend Integration:
I learned how a React application communicates with a backend through REST APIs and how data is transferred between the client and server.

2. Authentication and Protected Routes:
I learned how JWT authentication works and how protected routes can prevent unauthenticated users from accessing private application pages.

3. Deployment and Environment Configuration:
I learned how to deploy frontend and backend applications separately and connect them using environment variables.

Challenges and Problem Solving

During development, I faced several practical challenges such as connecting the frontend with the backend API, handling authentication, managing CRUD operations, configuring environment variables, and deploying the application.

Working through these issues helped me understand the importance of debugging step by step instead of changing multiple parts of the application at once. It also improved my understanding of how different layers of a full-stack application work together.

Conclusion

Building ExpenseTrack was a valuable learning experience because it allowed me to work on the complete development cycle of a web application—from designing the database and creating REST APIs to building the React interface and deploying the application.

This project has improved my practical knowledge of React, Node.js, Express.js, SQLite, REST APIs, JWT authentication, CRUD operations, Git/GitHub, Vercel, and Railway.

I would like to thank @Valentius Kryptix for providing me with this opportunity to learn and work on a practical full-stack project.

Live Project:
https://expense-track-frontend-omega.vercel.app

#FullStackDevelopment #React #NodeJS #ExpressJS #SQLite #WebDevelopment #Internship #ValentiusKryptix #JavaScript