A full-stack financial portfolio tracker built with Next.js, TailwindCSS, Prisma, and PostgreSQL. Create portfolios, log trades, and visualize cumulative PnL (Profit and Loss) over time using interactive charts.
- Frontend: Next.js (App Router), React
- Styling/UI: TailwindCSS, ShadCN UI
- State Management: React Hooks / Context
- Database: PostgreSQL (via Docker)
- ORM: Prisma
- Charting: Recharts or Chart.js
- Portfolio Creation
- Name, Initial Value
- Trade Logging
- Ticker, Entry/Exit Price, Quantity, Date
- Dashboard View
- Switch between portfolios
- View all trades with PnL calculation
- PnL Chart
- Cumulative PnL over time (line chart)
- Edit/Delete Trades
- Responsive UI
- Reusable components
- TypeScript Support
- CI-Ready Project Structure
git clone https://github.com/your-username/portfolio-tracker.git
cd portfolio-trackerMake sure Docker is installed and running. Then start the PostgreSQL container:
docker-compose up -dThe repository includes a preconfigured
docker-compose.yml, so there's no need to create one manually.
Choose your preferred package manager:
pnpm installnpm installyarn installThis will create the tables in your local PostgreSQL instance based on the Prisma schema.
npx prisma migrate dev --name initIf a prisma/seed.ts file is provided, you can populate your database with sample data by running:
npx prisma db seedThis will run the seeding script and insert sample portfolios and trades into the database.
To start the development server, run:
pnpm run devThis will start the Next.js development server and you can access the application in your browser at http://localhost:3000.