A web app powered by Claude that transforms messy course syllabi into clean, interactive study maps with progress tracking, deadlines, and AI-generated quizzes.
- 📄 PDF syllabus parsing and topic extraction
- 🗺️ Interactive study map (Topics → Subtopics → Microtopics)
- ✅ Progress tracking at microtopic granularity
- 📅 Upcoming deadlines and exam timeline
- 🎯 Exam/Project-focused study views
- 📚 Curated learning resources per topic
- 🧠 AI-generated quizzes on demand
- Frontend: React + Vite + Tailwind CSS
- State: Zustand
- Routing: React Router
- PDF: react-pdf + pdfjs-dist
- AI: Claude API (Anthropic)
- Icons: Lucide React
- Node.js 18+ and npm
- Anthropic API key
- Clone the repository
git clone <repo-url>
cd studymap-project- Install dependencies
npm install- Set up environment variables
cp .env.example .env
# Add your VITE_ANTHROPIC_API_KEY to .env- Start the development server
npm run dev- In a separate terminal, start the API server
node api/server.jsVisit http://localhost:3000 to see the app.
studymap-project/
├── src/
│ ├── components/
│ │ ├── ui/ # Reusable UI components
│ │ ├── layout/ # Layout components
│ │ └── features/ # Feature-specific components
│ ├── pages/ # Page components
│ ├── contexts/ # React contexts
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # External library configs
│ ├── types/ # Type definitions
│ ├── utils/ # Utility functions
│ └── styles/ # Global styles
├── api/ # Backend API routes
└── public/ # Static assets
- Person 1: Frontend Lead + Routing (Landing, Dashboard, Navigation)
- Person 2: Claude Integration + Backend (API, PDF parsing, Quiz generation)
- Person 3: UI Components + Progress System (Tree, Checkboxes, Progress)
- Person 4: Features + Quiz System (Upcoming, Resources, Quiz player)
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build
MIT