Stock Portfolio Overview
Stock portfolio dashboard built with Next.js and Firebase Genkit AI, featuring Prisma ORM, Radix UI components, and Recharts visualisations
Stock Portfolio Overview
Overview
Stock Portfolio Overview is a stock portfolio dashboard built with Next.js and Firebase. It uses Genkit AI for assistive features and presents portfolio data through Recharts visualisations, helping investors get a clear picture of their holdings.
Key Features
- Portfolio Dashboard: A consolidated view of holdings and performance
- Data Visualisations: Charts and graphs powered by Recharts
- AI Features: Genkit AI layered into the experience for insights
- Clean UI: Interface built with Radix UI components
- Type-safe Data: Portfolio data managed through Prisma ORM
Technical Stack
- Framework: Next.js
- Platform: Firebase
- AI: Genkit AI
- Data: Prisma ORM
- Charts: Recharts
- Styling: Tailwind CSS, Radix UI
- Validation: Zod
Architecture
The application follows a modern Next.js dashboard architecture:
- Frontend: Next.js with Radix UI components and Recharts visualisations
- AI: Genkit AI flows providing assistive insights
- Data Layer: Prisma ORM for type-safe data access
- Platform: Firebase services support the application
- Validation: Zod schemas at the data boundaries
Challenges & Solutions
- Data Visualisation: Used Recharts to present portfolio data clearly
- AI Integration: Wired Genkit AI into the dashboard for insights
- Type Safety: Prisma and Zod keep data access and validation consistent
- UI Consistency: Built the interface on Radix UI primitives
Impact & Results
- Portfolio Clarity: Gives investors a clear overview of their holdings
- Visual Insight: Charts make performance easy to read at a glance
- Assistive AI: Genkit-powered features add context to the data