FutureTracker 🚀

Build Your Future, One Opportunity at a Time : Your all-in-one opportunity tracker for internships, hackathons, and career growth

📋 Table of Contents

• Overview
• Live Demo
• Features
• Tech Stack
• System Architecture
• Getting Started
• Environment Variables
• Deployment
• Project Structure
• API Documentation
• Screenshots
• Documentation

🎯 Overview

FutureTracker is a modern, full-featured SaaS application designed to help students and professionals track their career opportunities. Whether you're applying for internships, participating in hackathons, or managing multiple job applications, FutureTracker provides an intuitive interface to organize, track, and manage all your opportunities in one place.

Why FutureTracker?

• 🔐 Secure Authentication: Sign in with Google, GitHub, or email via Clerk
• ⚡ Real-time Sync: Instant updates across all devices via Supabase Realtime
• 📊 Visual Management: Kanban-style status board for easy progress tracking
• 📈 Analytics Dashboard: Track success rates, trends, and conversion funnels
• 📅 Deadline Management: Never miss an important deadline with calendar integration
• 📄 PDF Reports: Export detailed reports for your records
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile

Demonstration Videos

• Website Demonstration Video – walk through the UI, navigation, and primary flows.
• Code Demonstration Video – review the repository layout, component architecture, and deployment steps.

🌐 Live Demo

Frontend: https://futuretracker.online
Backend API: https://futurestack-api.onrender.com

✨ Features

Core Features

• 🔐 Authentication: Secure OAuth login with Google, GitHub, and email (powered by Clerk)
• 📊 Dashboard: Real-time statistics, analytics, and upcoming deadline tracking
• ➕ CRUD Operations: Create, read, update, and delete opportunities
• 🔍 Search & Filter: Quickly find opportunities by title, status, or category
• 📅 Calendar View: Visual representation of all deadlines
• 📋 Status Board: Kanban-style board with drag-and-drop status updates
• 📈 Analytics: Charts for status distribution, weekly trends, conversion funnels, and deadline heatmaps
• 📄 PDF Export: Generate professional reports with multiple export options
• 📎 Documents: Upload resumes, cover letters, and portfolio links; track which documents were used for each internship
• 🎨 Modern UI: Clean, dark-themed interface with smooth animations
• 📱 Responsive: Fully responsive design for all screen sizes

Technical Features

• ⚡ Real-time Updates: WebSocket-powered instant sync via Supabase Realtime
• 🔄 JWT Authentication: Secure API access with Clerk tokens
• 🛡️ Row-Level Security: Data isolation at the database level
• 📦 Error Handling: Comprehensive error handling with user-friendly messages
• ⏳ Loading States: Skeleton loading indicators for premium UX
• 🔔 Toast Notifications: Instant feedback for all actions
• 🎯 Auto-logout on 401: Expired sessions handled gracefully

🛠 Tech Stack

Frontend

Technology	Version	Purpose
React	19.2.0	UI library with hooks
React Router DOM	7.9.6	Client-side routing
Tailwind CSS	3.4.18	Utility-first CSS framework
Clerk React	5.59.2	Authentication SDK
Supabase JS	2.89.0	Realtime subscriptions
Recharts	3.6.0	Data visualizations
Framer Motion	12.23.24	Animations
React Calendar	6.0.0	Calendar component
jsPDF	3.0.3	PDF generation
Axios	1.13.2	HTTP client

Backend

Technology	Purpose
Node.js + Express	RESTful API server
Clerk SDK	JWT verification
Supabase Client	PostgreSQL database access

External Services

Service	Purpose
Clerk	OAuth authentication (Google, GitHub, Email)
Supabase	PostgreSQL database + Realtime WebSockets
Vercel	Frontend hosting
Render	Backend hosting

🏗 System Architecture

┌─────────────────────────────────────────────────────────────────────────────┐
│                              USER BROWSER                                    │
│  ┌─────────────────────────────────────────────────────────────────────────┐ │
│  │  React App (Vercel)                                                     │ │
│  │  ├── Clerk Auth (OAuth login)                                           │ │
│  │  ├── Supabase Client (Realtime subscriptions)                          │ │
│  │  └── Axios (API calls with JWT)                                        │ │
│  └─────────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
                                    │
                     JWT Token + API Requests
                                    ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                         EXPRESS BACKEND (Render)                            │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────────────────────────────┐
│  │ Auth         │  │ Routes       │  │ Services                            │
│  │ Middleware   │──│ /api/*       │──│ Supabase Admin Client               │
│  │ (Clerk JWT)  │  │              │  │ (user_id filtered queries)          │
│  └──────────────┘  └──────────────┘  └──────────────────────────────────────┘
└─────────────────────────────────────────────────────────────────────────────┘
                                    │
                                    ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                           SUPABASE (PostgreSQL)                             │
│  ┌──────────────────────────────────────────────────────────────────────────┐
│  │  Tables: users, opportunities                                           │
│  │  Features: Row-Level Security, Realtime subscriptions                   │
│  └──────────────────────────────────────────────────────────────────────────┘
└─────────────────────────────────────────────────────────────────────────────┘

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Clerk account (clerk.com)
• Supabase account (supabase.com)

Installation

1. Clone the repository

   git clone https://github.com/Venkat-Kolasani/FutureStack.git
   cd FutureStack

2. Install frontend dependencies

   npm install

3. Install backend dependencies

   cd backend
   npm install
   cd ..

4. Set up environment variables (see Environment Variables)

5. Start the backend

   cd backend
   npm run dev

6. Start the frontend (in a new terminal)

   npm start

The app will open at http://localhost:3000

🔐 Environment Variables

Frontend (.env in root)

# Clerk Authentication
REACT_APP_CLERK_PUBLISHABLE_KEY=pk_test_...

# Backend API URL
REACT_APP_API_URL=http://localhost:3001/api

Backend (backend/.env)

# Server
PORT=3001
NODE_ENV=development

# CORS (Frontend URL)
CORS_ORIGIN=http://localhost:3000

# Clerk Authentication
CLERK_SECRET_KEY=sk_test_...

# Supabase Database
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=eyJ...

🚢 Deployment

Frontend (Vercel)

1. Push your code to GitHub
2. Connect your repo to Vercel
3. Add environment variables:
   • REACT_APP_CLERK_PUBLISHABLE_KEY
   • REACT_APP_API_URL (your Render backend URL + /api)
4. Deploy

Backend (Render)

1. Create a new Web Service on Render
2. Connect your GitHub repo, set root directory to backend
3. Add environment variables:
   • NODE_ENV=production
   • CORS_ORIGIN (your Vercel frontend URL)
   • CLERK_SECRET_KEY
   • SUPABASE_URL
   • SUPABASE_SERVICE_ROLE_KEY
4. Deploy

📁 Project Structure

futurestack/
├── public/                    # Static files
├── src/
│   ├── components/           # Reusable components
│   │   ├── auth/            # Authentication components
│   │   │   └── ProtectedRoute.jsx
│   │   ├── common/          # Common UI components
│   │   │   ├── Button.jsx
│   │   │   ├── Card.jsx
│   │   │   ├── Modal.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── ErrorBoundary.jsx
│   │   ├── dashboard/       # Dashboard components
│   │   │   ├── DeadlineWidget.jsx
│   │   │   └── StatsCard.jsx
│   │   ├── opportunities/   # Opportunity components
│   │   │   └── OpportunityForm.jsx
│   │   └── statusboard/     # Kanban board components
│   ├── hooks/               # Custom React hooks
│   │   └── useAuthToken.js  # JWT token management
│   ├── lib/                 # Library configurations
│   │   └── supabase.js      # Supabase client
│   ├── pages/               # Page components (routes)
│   │   ├── Home.jsx
│   │   ├── Dashboard.jsx
│   │   ├── InternshipList.jsx
│   │   ├── HackathonList.jsx
│   │   ├── AddOpportunity.jsx
│   │   ├── EditOpportunity.jsx
│   │   ├── StatusBoard.jsx
│   │   ├── Calendar.jsx
│   │   ├── Analytics.jsx
│   │   └── Reports.jsx
│   ├── services/            # API services
│   │   └── api.js           # Axios instance + interceptors
│   ├── utils/               # Utility functions
│   │   ├── dateHelpers.js
│   │   └── pdfExport.js
│   ├── App.js               # Main app component
│   └── index.js             # Entry point
├── backend/                  # Express API server
│   ├── src/
│   │   ├── server.js        # Express entry point
│   │   ├── middleware/
│   │   │   └── auth.js      # Clerk JWT verification
│   │   ├── routes/
│   │   │   ├── opportunities.js
│   │   │   └── analytics.js
│   │   └── lib/
│   │       └── supabase.js  # Supabase admin client
│   └── package.json
├── docs/                     # Documentation
├── tailwind.config.js       # Tailwind configuration
└── package.json             # Frontend dependencies

🔌 API Documentation

Base URL

• Development: http://localhost:3001/api
• Production: https://futurestack-api.onrender.com/api

Authentication

All endpoints except /health require a valid Clerk JWT token:

Authorization: Bearer <clerk_jwt_token>

Endpoints

Method	Endpoint	Description	Auth
GET	/health	Health check	❌
GET	/opportunities	List user's opportunities	✅
GET	/opportunities/:id	Get single opportunity	✅
POST	/opportunities	Create opportunity	✅
PATCH	/opportunities/:id	Update opportunity	✅
DELETE	/opportunities/:id	Delete opportunity	✅
GET	/analytics	Get dashboard analytics	✅
GET	/me	Get current user info	✅

Example: Create Opportunity

POST /api/opportunities
Authorization: Bearer <token>
Content-Type: application/json

{
  "title": "Software Engineer Intern",
  "description": "Full-stack development role",
  "link": "https://example.com/apply",
  "deadline": "2025-12-31",
  "category": "internship",
  "status": "applied",
  "notes": "Prepare portfolio"
}

📸 Screenshots

Landing Page

Clean, modern landing page with animated hero section

Dashboard

Real-time statistics with color-coded cards:

• Internships (Blue)
• Hackathons (Orange)
• Shortlisted (Yellow)
• Selected (Green)

Status Board

Kanban-style board with 5 columns for visual progress tracking

Calendar View

Interactive calendar with deadline visualization

Reports

Flexible PDF export with multiple options

🎨 Design System

Color Palette

• Primary: Blue (#3B82F6) - Internships, Primary actions
• Secondary: Orange (#F97316) - Hackathons
• Success: Green (#10B981) - Selected status
• Warning: Yellow (#F59E0B) - Shortlisted status
• Danger: Red (#EF4444) - Rejected status, Errors
• Background: Gray-900 (#111827) - Dark theme

Typography

• Font Family: Inter, system-ui, sans-serif
• Headings: Bold, 2xl-3xl
• Body: Regular, sm-base
• Labels: Medium, sm

📚 Documentation

• Devin Wiki – canonical, always-current runbook with high-level decisions, architecture diagrams, and demo notes.
• Local references: docs/ARCHITECTURE.md, docs/DOCUMENTATION.md, docs/INTEGRATION_TEST_RESULTS.md, and docs/PROJECT_SUMMARY.md provide offline deep dives, test evidence, and executive summaries.

---

Built with ❤️ by Venkat Kolasani