This project is a Next.js SaaS app that allows you to calculate how much do you spend every month. It's an overview of
your monthly/yearly expenses, to see where your money goes.
Technically, it follows these rules:
- Next.js 14 App Router + src folder
- shadcn/ui components for the UI
- Framer Motion for animations (where makes sense)
- Tailwind CSS for any other styling not covered by shadcn/ui
- Drizzle ORM for the database (PostgreSQL, Neon)
- next-auth for the authentication (using Auth.js and next-auth v5 beta).
- To get the current session server-side we use the auth() function from '@/lib/auth'.
- Users are logged in via oauth. For now we only allow Github.
- Schemas and their types live under src/models/schema.ts
- Use server actions over API routes/calls. Remember to add the "use server" directive at the top of the file containing
the server actions, and to verify the user is logged in.
- Use React Server Components where possible.
- Use Client Components if hooks or user interactions are needed. Remember to add the "use client" directive at the top
of the file.
- next-themes for the theme management
- Avoid dynamic imports as long as it is possible.
- Use kebab-case for the file names instead of CamelCase.
- Use signle-quoted strings, and templates instead of concatenation.
The app features the following:
- A sleek, mobile-friendly, modern design using New York theme from shadcn/ui.
- A calendar view of your expenses for the current month or year (can be switched).
- A form to add/edit/delete expenses.
- Expense categories are: Housing, Utilities, Food, Transportation, Insurances, Health, Subscriptions, Lifestyle,
Investments, Other.
- A dashboard that lists your expenses, shows the calendar view(s), and pie charts.
- Users have a settings page to change their currency, monthly income (optional), monthly budget (optional), and delete
their account.
Also, in general, follow these rules strictly:
- Don't change or remove existing functionality unless explicitly told to do so, or required by the task at hand.
- Don't change the UI/UX design unless explicitly told to do so, or required by the task at hand.
auth.js
css
drizzle-orm
golang
javascript
less
next.js
oauth
+5 more
First Time Repository
ExpenseCal - Master your Expenses! Powered by Next.js, RSC, Drizzle + Neon PostgreSQL, next-auth, and shadcn-ui
TypeScript
Languages:
CSS: 1.8KB
JavaScript: 0.4KB
TypeScript: 226.7KB
Created: 9/21/2024
Updated: 1/19/2025
All Repositories (1)
ExpenseCal - Master your Expenses! Powered by Next.js, RSC, Drizzle + Neon PostgreSQL, next-auth, and shadcn-ui