YANGXDEV

Budget Buddy

nextjs-budget-buddy is a project that helps individuals manage their personal finances and budget effectively. It is built using Next.js, a React-based framework that enables server-side rendering and generates static websites for React-based web applications. The project utilizes Tailwind CSS for efficient and customizable styling. Deployment of the project is facilitated by Vercel, a cloud platform for static sites and serverless functions.

Overview
Screenshots
Technologies
Installation
Structure
Deployment
Contact
License

Overview

With nextjs-budget-buddy, users can track their expenses, incomes, investments, and soon, cryptocurrencies. It provides a comprehensive solution for managing personal finances. The project also integrates Next-auth, which enables users to log in using providers such as Google and GitHub, ensuring a secure and convenient authentication process.

The user-friendly interface and intuitive features of nextjs-budget-buddy make budgeting a seamless experience, empowering individuals to gain insights into their spending habits, set financial goals, and make informed financial decisions.

Screenshots

Technologies

Next.js, a React-based framework that enables functionality like server-side rendering and generating static websites for React-based web applications.
Tailwind CSS, a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup. It's highly customizable and efficient.
Next-Auth, a library for handling authentication in Next.js applications. It provides a simple and flexible way to implement authentication features such as sign up, sign in, and session management.
Prisma ORM, a powerful database toolkit that provides an easy-to-use interface for working with databases in your application. It offers features like database modeling, query building, and migrations, making it a popular choice for developers.
Vercel, a cloud platform for static sites and serverless functions. It allows for seamless deployment of web projects with features like automatic deployments from Git and serverless functions.

Installation

To get this project up and running on your local machine, follow these steps:

Clone the Repository:

git clone https://github.com/yangxdev/nextjs-budget-buddy.git

Navigate to the Project Folder:
```
cd nextjs-budget-buddy
```
Install Dependencies: Use npm to install the required dependencies.
```
npm install
```
If you prefer using yarn:
```
yarn install
```
Start the Development Server: Run the development server to view the project in your browser.
```
npm run dev
```
or with yarn:
```
yarn dev
```
Open in Your Browser: Once the development server is running, open your browser and go to http://localhost:3000 to see the project in action. Now you have the project set up locally, and you can explore it, make modifications, and test it in your development environment.

Structure

The project is organized into the following key directories, each serving a specific purpose:

app
- api:
  - The api folder in the nextjs-budget-buddy project contains subfolders such as auth, currency, and database. These subfolders house files that connect with external services to provide various functions.
  - The auth folder handles authorization-related functionality, allowing users to log in and authenticate their identity.
  - The currency folder deals with currency calculations, including conversion rates and other currency-related operations.
  - The database folder is responsible for handling CRUD (Create, Read, Update, Delete) operations with the project's database, enabling data storage and retrieval.
- protected:
  - The protected folder contains routes that can only be accessed if the user is logged in with an account.
    - Currently, the supported login methods are Google and GitHub.
  - These routes are restricted to authenticated users to ensure that only authorized individuals can access sensitive information or perform certain actions.
  - To access the routes in the protected folder, the user must first authenticate using their Google or GitHub account.
- components:
components:
- This folder houses components related to the navigation menu on the left side of the application.
- These components are responsible for rendering the menu items, handling user interactions, and providing seamless navigation throughout the application.
prisma:
- The "prisma" folder contains the Prisma schema file.
- This file, named "prisma.schema", defines the database schema and models for the Next.js Budget Buddy application.
- It is used by the Prisma ORM to generate the necessary database queries and operations.
public:
- This folder contains image assets and icons used throughout the project.

Deployment

This project is currently deployed on Vercel for personal use. If you wish to deploy a similar project, follow these steps:

Prerequisites:

Vercel Account: Ensure you have an account on Vercel. If not, sign up for a free account.
Next-Auth: This project uses Next-Auth, a library for handling authentication in Next.js applications, please refer to their documentation for the deployment on Vercel

Deployment Steps:

Connect Repository:
- Log in to your Vercel account.
- Navigate to the dashboard and click on "Import Project."
- Select the repository where your project is hosted.
Configure Settings:
- Choose the branch you want to deploy (e.g., main or master).
- Set the build command to match your project setup (e.g., npm run build).
Environment Variables:
- If your project requires environment variables, configure them in the Vercel dashboard under the project settings.
PostgreSQL Setup:
- My project uses a PostgreSQL database, but you can use whatever database suits you.
  - Refer to Vercel's documentation on how to get started with Vercel's Postgres
- Once your server is set up, you'll need to add the connection string as an environment variable in Vercel.
- The environment variable should be named DATABASE_URL and its value should be the connection string to your PostgreSQL server.
Deploy:
- Click on the "Deploy" button to initiate the deployment process.

Accessing the Dashboard:

To access the dashboard:

Log in to Vercel.
Navigate to the dashboard to view deployment details, logs, and project settings.

Updating the Deployment:

For any updates or changes to the project, simply push the changes to the connected branch. Vercel will automatically trigger a new deployment.

Contact

Feel free to reach out if you have any questions, suggestions, or just want to connect! You can contact me via:

Email: yangxdev@gmail.com
LinkedIn: Yang Xiang
Telegram: yang.xng
GitHub: yangxdev
Personal Website: yangxdev.com

I'm open to collaboration, feedback, and discussions about software engineering, frontend development, or anything related to my projects.

Looking forward to hearing from you!

License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

mvandermeulen / nextjs-budget-buddy