Badget

<a href="https://badget-eight-gilt.vercel.app/"> <h1 align="center">Badget: Revolutionizing Financial Management</h1> </a> <img width="1440" alt="dashboard_mockup" src="https://github.com/projectx-codehagen/Badget/assets/24507211/2c2b8e43-3d18-4b28-b8d0-5dc0cbdb530f"> Empower your financial management with Badget - AI-driven insights at your fingertips. Optimize your finances effortlessly.  <a href="https://github.com/projectx-codehagen/Badget/blob/main/LICENSE.md"> <img src="https://img.shields.io/github/license/projectx-codehagen/Badget?label=license&logo=github&color=f80&logoColor=fff" alt="License" /> </a> <a href="#introduction">Introduction</a> · <a href="#installation">Installation</a> · <a href="#tech-stack--features">Tech Stack + Features</a> · <a href="#contributing">Credits</a>

Introduction

Welcome to Badget, where we're ushering in a new era of financial management. Leveraging cutting-edge AI, Badget redefines how you track, analyze, and optimize your finances, ensuring smarter, more secure financial decisions.

With Badget, gain unparalleled insights into your spending habits and financial patterns, empowering you to budget better and experience more. Trusted by the world's most innovative companies, Badget is here to revolutionize your financial management experience.

What we are using

Lets goooo - Next.js 14, Turborepo, Prisma, Neon, Next.auth, Resend, React Email, Shadcn/ui, and Stripe. All seamlessly integrated with the Badget to accelerate the development.

Directory Structure

Badget is a monorepo managed by Turborepo. The monorepo is split between apps and packages directories.

.
├── apps                         # Its app workspace which contains
│    ├── www                     # Nextjs app which is deployed in Vercel
│    ├── api                     # Hono app that is our REST-api for our SDK
│    └── ...
├── packages                     # are the shared packages that are used by the apps 
│    ├── db                      # Prisma DB connector
│    └── ui                      # Shared UI components (Shadcn)
├── tooling                      # are the shared configuration that are used by the apps and packages
│    ├── eslint                  # Shared eslint presets
│    ├── prettier                # Shared prettier configuration
│    ├── tailwind                # Shared tailwind configuration
│    └── typescript              # Shared tsconfig you can extend from
├── LICENSE
└── README.md

Installation

Clone & create this repo locally with the following command:

git clone https://github.com/projectx-codehagen/Badget

Install dependencies using pnpm:

pnpm install

Copy .env.example to .env.local and update the variables.

cp .env.example .env.local

Input everything you need for the env.
1. Create Neon Database Account
2. Create Stripe Account
3. Create Google Console Account
4. Create Resend Account
Start the development server from either yarn or turbo:

# To start the server
pnpm dev

# To push the DB schema
pnpm --filter=db db:push

REST-API Installation (optional)

If you want to use the REST-api you need to update the hono under apps/api

[vars]
#MY_VAR = "my-variable"
#DATABASE_URL = "Use same link as your db URL"

If you want to deploy it on Cloudflare you need to go run

pnpm run deploy

Roadmap

~~Initial setup~~
Start removing template
Update UI to match the product
Start stichting frontend with backend

Tech Stack + Features

Frameworks

Next.js – React framework for building performant apps with the best developer experience
Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub
Prisma – Typescript-first ORM for Node.js
React Email – Versatile email framework for efficient and flexible email development

Platforms

Vercel – Easily preview & deploy changes with git
Neon – A cutting-edge database platform for seamless, scalable data management
Resend – A powerful email framework for streamlined email development
Stripe - Payments

UI

Tailwind CSS – Utility-first CSS framework for rapid UI development
Shadcn/ui – Re-usable components built using Radix UI and Tailwind CSS
Framer Motion – Motion library for React to animate components with ease
Lucide – Beautifully simple, pixel-perfect icons
next/font – Optimize custom fonts and remove external network requests for improved performance
ImageResponse – Generate dynamic Open Graph images at the edge