My Expenses

Project Overview

My Expenses is a web application designed to help users track their financial activities, manage expenses, and gain insights into their spending habits. Built with Next.js, this project leverages server-side rendering and static site generation to provide a fast and responsive user experience. The application allows users to create, edit, and delete transactions, categorize their expenses, and visualize their financial data through charts and reports.

Features

• User Authentication: Secure user authentication using Clerk for managing user sessions.
• Expense Tracking: Users can add, edit, and delete expenses with detailed information.
• Category Management: Create and manage categories for better organization of expenses.
• Data Visualization: Interactive charts and graphs to visualize spending patterns and trends.
• Responsive Design: Mobile-friendly interface that adapts to various screen sizes.
• Real-time Updates: Automatic updates to the UI as users make changes to their data.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js (version 14 or higher)
• npm or yarn (package manager)
• A code editor (e.g., Visual Studio Code)

Installation Steps

1. Clone the repository:

   git clone https://github.com/rohit4242/my-expenses
   cd my-expenses

2. Install dependencies: Using npm:

   npm install

   Or using yarn:

   yarn install

Environment Setup

1. Create a .env.local file in the root of the project and add your environment variables. You can use the following template:

   NEXT_PUBLIC_CLERK_FRONTEND_API=<your_clerk_frontend_api>
   CLERK_API_KEY=<your_clerk_api_key>
   DATABASE_URL=<your_database_url>
   

2. Set up your database: Ensure your database is running and accessible. You may need to run migrations if applicable.

Running the Project

To start the development server, run:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Deployment Instructions

To deploy your Next.js application, you can use Vercel, which is the recommended platform for Next.js applications. Follow these steps:

1. Push your code to a GitHub repository.
2. Go to Vercel and sign in or create an account.
3. Import your GitHub repository.
4. Configure your environment variables in the Vercel dashboard.
5. Click on "Deploy" to launch your application.

Technologies Used

• Next.js: A React framework for building server-rendered applications.
• React: A JavaScript library for building user interfaces.
• Clerk: For user authentication and session management.
• Tailwind CSS: A utility-first CSS framework for styling.
• TypeScript: A typed superset of JavaScript for better development experience.
• PostgreSQL: A relational database for storing user data and transactions.
• React Query: For data fetching and state management.

Conclusion

My Expenses is a powerful tool for anyone looking to manage their finances effectively. With its user-friendly interface and robust features, it empowers users to take control of their spending and make informed financial decisions. Feel free to contribute to the project or reach out for any questions or suggestions!