💰 Financial Dashboard

A sample web application developed as part of a technical challenge, designed to demonstrate modern full-stack development practices. This project allows users to manage and visualize personal financial transactions using mock data sourced from ./data/transactions.json. It leverages Next.js App Router, NextAuth.js for Google authentication, and TypeScript for strong type safety.

---

🔍 Features

• 🔐 Google OAuth2 authentication with NextAuth.js
• 📊 Dashboard for viewing and filtering financial transactions
• 💾 Server-side transaction loading with secure session validation
• 🎨 Styled with Styled Components and Radix UI primitives
• 📁 App Router (Next.js 15) structure
• 📦 Lightweight and optimized for performance

---

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Auth: NextAuth.js
• Tests: Jests
• Styling: Styled Components, Radix UI
• Language: TypeScript
• Icons: React Icons (Google logo)

---

🚀 Getting Started

1. Clone the repository

git clone https://github.com/patpolts/financial-dashboard.git
cd financial-dashboard

2. Install dependencies

npm install
# or
yarn install

3. Set up environment variables

Copy env_example to .env

cp env_example .env  

and add the following:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=local next url

You can generate NEXTAUTH_SECRET using:

openssl rand -base64 32

4. Run the development server

npm run dev
# or
yarn dev

5. Run tests

npm run test
# or
yarn test

Visit http://localhost:3000 to view the app.

---

📁 Project Structure

src/
├── app/                # App Router structure (Next.js 13+)
│   ├── login/          # Public login page
│   ├── dashboard/      # Authenticated dashboard
│   └── api/            # API routes
│       └── auth/
│           ├── [...nextauth]/  # NextAuth handler
│           └── login-limit/    # Rate limiting endpoint (optional)
├── components/         # Reusable UI components
├── libs/               # Auth/session utilities, helpers
├── styles/             # Styled Components & theme setup

---

👤 Author

• Patricia Poltts
  LinkedIn • GitHub

---

📝 License

This project is open-source and available under the MIT License.