This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

Cogniva is a full-featured, offline-first Intelligent Learning Workspace — a PWA built with React, TypeScript, and Tailwind CSS.

I built it for my friend who is preparing for CS university exams (Data Structures, DBMS, Operating Systems, Computer Networks). They were juggling five different apps — a timer, Anki, a notes app, YouTube, and a spreadsheet to track progress — and still feeling overwhelmed. Cogniva replaces all of them with a single cohesive workspace.

live deployed link: https://lakshchinchmalatpure.github.io/HacktroberFest_dev_challenge/

Core Features

Feature Description
🎯 Pomodoro Focus Timer Circular visual countdown, session tagging, audio feedback cues, and automatic XP rewards
🃏 SM-2 Flashcards Spaced-repetition cards with 4-state mastery tracking (new → learning → review → mastered) using the SuperMemo-2 algorithm
📝 Adaptive Quizzes Multi-format assessments (Multiple Choice, True/False, Multi-Answer) generated per subject and topic
📊 Learning Analytics Weekly study time distribution, quiz accuracy trendlines, and a 30-day activity heatmap built with Recharts
🤖 Cogniva AI Co-Pilot An AI study assistant that explains concepts (e.g., deadlocks), diagnoses quiz mistakes, generates personalized 7-day study plans, and triggers quiz/flashcard creation with one click
🏆 Gamification XP, levels, streaks, streak-risk alerts, and achievement badges to keep motivation high
📅 Study Planner Calendar-style weekly schedule with task management
🌙 Dark / Light Mode Full theme support with a smooth toggle
📶 Offline-First PWA Service Worker registration + Web App Manifest for installable offline use

The demo workspace is pre-seeded with a user profile ("Alex Morgan") enrolled in 5 subjects, realistic flashcard libraries, and preset quiz question banks — so anyone can click "Try Demo" and immediately experience the full product.

Demo

🚀 Live Deployed App: https://lakshchinchmalatpure.github.io/HacktroberFest_dev_challenge/

💻 Local Development: http://localhost:5173 (see instructions below)

To run locally:

git clone https://github.com/LakshChinchmalatpure/HacktroberFest_dev_challenge cd cogniva npm install npm run dev 

Then open http://localhost:5173 and click "Try Demo" to enter the full workspace as Alex Morgan.

Key screens to explore:

  • /app — Dashboard with KPI stats, streak alerts, activity heatmap, and AI Co-Pilot button
  • /app/focus — Pomodoro timer with session tagging
  • /app/flashcards — SM-2 review queue and card generator
  • /app/quizzes — Adaptive quiz engine with explanations and accuracy tracking
  • /app/analytics — Charts: weekly study hours, accuracy trends, subject breakdown
  • /app/achievements — XP, levels, and badge wall

Code

📦 cogniva/ ├── src/ │ ├── components/ │ │ ├── ai/ # AIChatDrawer — contextual AI study assistant │ │ ├── dashboard/ # StatCard, ActivityHeatmap, AdaptiveInsightCard, QuickActions │ │ ├── flashcards/ # FlashcardReview, CardGenerator, MasteryBadge │ │ ├── gamification/ # XP bar, LevelBadge, AchievementsGrid │ │ ├── landing/ # Hero, FeatureGrid, ProductPreview │ │ ├── planner/ # Weekly calendar task manager │ │ ├── pomodoro/ # PomodoroTimer (SVG circular progress + audio) │ │ └── quiz/ # QuizRunner, OptionCard, ResultsSummary │ ├── services/ │ │ ├── aiService.ts # AI Co-Pilot logic: chat, flashcard gen, quiz gen │ │ └── spacedRepetition.ts # SM-2 algorithm implementation │ ├── store/ │ │ └── useAppStore.ts # Zustand global state (user, subjects, cards, sessions) │ ├── lib/ │ │ ├── pwa.ts # Service Worker registration │ │ ├── sound.ts # Web Audio API sound effects (timer bells, completion) │ │ └── utils.ts # XP/level calculations, time formatters │ ├── pages/ # DashboardPage, FocusPage, FlashcardsPage, QuizzesPage, │ │ # AnalyticsPage, PlannerPage, AchievementsPage, SettingsPage │ └── data/ │ ├── presetFlashcards.ts # Seeded CS flashcard library │ └── presetQuestions.ts # Seeded quiz question bank ├── public/ │ ├── manifest.json # PWA Web App Manifest │ └── sw.js # Service Worker for offline-first caching └── index.html # Meta, OG tags, Google Fonts (Inter + Outfit), PWA links 

How I Built It

Tech Stack

Layer Technology
Framework React 19 + TypeScript 6
Build Tool Vite 8
Styling Tailwind CSS 3 + custom design tokens
State Management Zustand 5 — single store for user profile, subjects, flashcards, sessions
Animations Framer Motion 14 — page transitions, card flips, drawer slides
Charts Recharts 3 — Area charts, Bar charts, Radar charts for analytics
Routing React Router DOM 7
Sound Web Audio API (oscillators + gain nodes) via sound.ts — no external lib
PWA Service Worker + Web App Manifest for offline-first installability
Linting Oxlint

Open-Source AI Integration

The AI Co-Pilot (src/services/aiService.ts) is architected around an open, swappable AI backend. The service is model-agnostic by design:

  1. Prompt-classified intent engine — The assistant parses user messages and routes them to specialized response generators (concept explanation, quiz generation, mistake diagnosis, study plan creation).

  2. SM-2 Spaced Repetition (src/services/spacedRepetition.ts) — A clean open-source implementation of the SuperMemo-2 algorithm. This is the same algorithm powering Anki — implemented from scratch with 4-state mastery progression.

  3. Adaptive Recommendation Engine (AdaptiveInsightCard) — Identifies weak topics by correlating quiz attempt history with incorrect answer patterns. This powers the "one-click remedial session" feature.

  4. Resilient Fallback Architecture — The AI service first checks a curated preset knowledge base (seeded flashcards and quiz questions for CS subjects). If no preset matches, a dynamic template generator produces subject-aware, difficulty-scaled content. This means the app works completely offline without any API key.

The architecture is designed so that replacing the fallback generator with a real open-weight LLM (e.g., Gemma 3, Mistral 7B, or LLaMA 3 via Ollama) requires only changing one method in aiService.ts — the interface contract stays identical.

Why Does Open Innovation Matter?

For my friend, closed AI APIs were a non-starter for two reasons: cost and privacy. Study notes and quiz mistakes are personal data — they should not be logged by a SaaS provider.

Open innovation made three things possible that closed APIs would not have allowed:

  1. Privacy-first design. All intelligence runs locally. The SM-2 algorithm, the adaptive topic detection, the study plan generation — none of it phones home. Every recommendation is computed client-side from the user's own data. A closed API would require shipping flashcard content and quiz results to a remote server.

  2. Offline-first by default. Because the AI layer uses open algorithms (SM-2, template-based generation), the app works fully offline. A closed LLM API dependency would break the entire learning loop whenever there is no internet — exactly when my friend is on a train or in an exam prep room with spotty connectivity.

  3. Extensibility without lock-in. The aiService.ts interface makes it trivial to plug in Gemma via Ollama, Mistral via LM Studio, or any other open-weight model running locally. The community can swap in any model and the rest of the app continues working. That composability is only possible when the AI layer is open.

Open source is what allowed Cogniva to be a real tool for a real person, not a demo that requires an API key and a credit card.

My Agent Session

This entire platform was engineered iteratively using Antigravity IDE (powered by Google DeepMind). The agent assisted with architecture planning, SM-2 spaced repetition algorithmic implementation, component tree generation, dark-mode glassmorphic UI design, analytics charts, and PWA integration.

Cogniva — Building the AI-Powered Adaptive Learning Workspace
You

Build a production-quality, premium AI-powered learning platform called Cogniva.

Product Name

Cogniva

Tagline

Your Intelligent Learning Workspace

Product Vision

Cogniva is an AI-powered adaptive learning platform that helps students focus, learn, practice, test, and improve from one unified workspace.

This is being developed for the Hacktoberfest Dev Challenge, so build it as a serious open-source project and portfolio-grade SaaS product — NOT as a basic college project.

The final application should look and feel like a polished startup product that demonstrates strong Full-Stack Development + AI + UI/UX + Software Engineering skills.

1. CORE EXPERIENCE

The primary learning loop must be:

Choose Subject → Set Goal → Focus → Learn → Test → Analyze → Improve → Repeat

Cogniva should combine:

  • AI Study Assistant
  • Pomodoro Focus System
  • AI Flashcard Generator
  • Smart Flashcards
  • AI Quiz Generator
  • Interactive Quiz Engine
  • Adaptive Learning Recommendations
  • Study Analytics
  • Study Planner
  • Streaks & Achievements
  • Subject Management
  • Offline-first learning

2. PREMIUM LANDING PAGE

Create a highly polished SaaS landing page.

Hero:

Learn Smarter. Focus Deeper. Improve Faster.

Subtitle:

Cogniva is an AI-powered learning workspace that combines focused study sessions, intelligent flashcards, adaptive quizzes, and personalized learning insights.

Primary CTA:

Start Learning

Secondary CTA:

Explore Cogniva

Hero visual should show a beautiful preview of the Cogniva dashboard.

Add sections:

Why Cogniva?

Focus
Stay productive with intelligent Pomodoro sessions.

Learn
Create and review intelligent flashcards.

Practice
Generate quizzes based on your subjects and weak areas.

Improve
Use analytics and AI recommendations to continuously improve.

Personalize
Let Cogniva adapt learning recommenda
<truncated 11923 bytes>
ring practices.

Use:

  • Reusable components
  • Meaningful variable names
  • Type-safe interfaces
  • Clean separation of concerns
  • Consistent formatting
  • Error handling
  • Comments only where useful

Avoid:

  • Duplicate code
  • Hardcoded UI everywhere
  • Giant components
  • Unused dependencies
  • Placeholder implementations presented as finished features

32. FINAL USER JOURNEY

The most important journey must work perfectly:

Landing Page
↓
Try Demo
↓
Dashboard
↓
Select Subject
↓
Start Pomodoro
↓
Review Flashcards
↓
Take Quiz
↓
View Results
↓
Identify Weak Topic
↓
Receive Cogniva AI Recommendation
↓
Start Recommended Study Session

Make this flow extremely smooth.

33. FINAL PRODUCT POSITIONING

Cogniva should NOT be presented as:

"Just a Pomodoro app."

It should be presented as:

Cogniva is an AI-powered adaptive learning workspace that helps students focus, learn, test, and continuously improve.

The project should demonstrate:

AI + Full-Stack Development + Modern UI/UX + Data Visualization + PWA + Adaptive Learning + Open Source Engineering

The final result should look like a real startup MVP / production-quality SaaS product, suitable for:

  • Hacktoberfest Dev Challenge
  • GitHub portfolio
  • LinkedIn showcase
  • SDE portfolio
  • AI engineering portfolio
  • Full-stack developer portfolio
  • Recruiter demonstration

Prioritize working functionality, polished UX, clean architecture, and an impressive end-to-end demo over adding unnecessary features.

Show more
Agent
▸ list_dir {"DirectoryPath":"\"d:\\\\HacktoberFest2026_Dev_Challenge\"","toolAction":"\"...
{ "DirectoryPath": "\"d:\\\\HacktoberFest2026_Dev_Challenge\"", "toolAction": "\"Listing workspace directory\"", "toolSummary": "\"Workspace listing\"" }
list_dir executed successfully
▸ run_command {"CommandLine":"\"node -v; npm -v\"","Cwd":"\"d:\\\\HacktoberFest2026_Dev_Cha...
$ {"CommandLine":"\"node -v; npm -v\"","Cwd":"\"d:\\\\HacktoberFest2026_Dev_Challenge\"","WaitMsBeforeAsync":"5000","toolAction":"\"Checking Node and npm versions\"","toolSummary":"\"Check Node environment\""}
run_command executed successfully

Created At: 2026-10-04T22:28:57+05:30
Completed At: 2026-10-04T22:29:03+05:30

 The command exited with code 0. Output: v24.12.0 

11.11.1

▸ run_command {"CommandLine":"\"npx -y create-vite@latest --help\"","Cwd":"\"d:\\\\Hacktobe...
$ {"CommandLine":"\"npx -y create-vite@latest --help\"","Cwd":"\"d:\\\\HacktoberFest2026_Dev_Challenge\"","WaitMsBeforeAsync":"10000","toolAction":"\"Running create-vite --help\"","toolSummary":"\"Check create-vite flags\""}
run_command executed successfully

Created At: 2026-10-04T22:29:09+05:30
Completed At: 2026-10-04T22:29:16+05:30

 The command exited with code 0. Output: Usage: create-vite [OPTION]... [DIRECTORY] 

Create a new Vite project in JavaScript or TypeScript.
When running in TTY, the CLI will start in interactive mode.

Options:

▸ run_command {"CommandLine":"\"npx -y create-vite@latest ./ --template react-ts --no-inter...
$ {"CommandLine":"\"npx -y create-vite@latest ./ --template react-ts --no-interactive\"","Cwd":"\"d:\\\\HacktoberFest2026_Dev_Challenge\"","WaitMsBeforeAsync":"10000","toolAction":"\"Scaffolding Vite React TypeScript app\"","toolSummary":"\"Scaffold Vite app\""}
run_command executed successfully

Created At: 2026-10-04T22:29:18+05:30
Completed At: 2026-10-04T22:29:25+05:30

 The command exited with code 0. Output: | 

o Scaffolding project in cogniva...
|
— Done. Now run:

npm install
npm run dev

▸ run_command {"CommandLine":"\"npm install && npm install react-router-dom lucide-react zu...
$ {"CommandLine":"\"npm install && npm install react-router-dom lucide-react zustand recharts framer-motion clsx tailwind-merge canvas-confetti && npm install -D tailwindcss@^3.4.17 postcss autoprefixer @types/canvas-confetti\"","Cwd":"\"d:\\\\HacktoberFest2026_Dev_Challenge\"","WaitMsBeforeAsync":"30000","toolAction":"\"Installing project dependencies\"","toolSummary":"\"Install npm packages\""}
run_command executed successfully

Created At: 2026-10-04T22:29:29+05:30
Completed At: 2026-10-04T22:29:34+05:30

 The command exited with code 1. Output: At line:1 char:13 
  • npm install && npm install react-router-dom lucide-react zustand rech ...
  • ~~ The token '&&' is not a valid statement separator in th
▸ run_command {"CommandLine":"\"npm install; npm install react-router-dom lucide-react zust...
$ {"CommandLine":"\"npm install; npm install react-router-dom lucide-react zustand recharts framer-motion clsx tailwind-merge canvas-confetti; npm install -D tailwindcss@^3.4.17 postcss autoprefixer @types/canvas-confetti\"","Cwd":"\"d:\\\\HacktoberFest2026_Dev_Challenge\"","WaitMsBeforeAsync":"60000","toolAction":"\"Installing dependencies in PowerShell\"","toolSummary":"\"Install npm dependencies\""}
run_command executed successfully

Created At: 2026-10-04T22:29:44+05:30
Tool is running as a background task with task id: c090b9a0-b4ce-4d52-b500-b59a625f2692/task-15
Task Description: npm install; npm install react-router-dom lucide-react zustand recharts framer-motion clsx tailwind-merge canvas-confetti; npm install -D tailwindcs

▸ manage_task {"Action":"\"status\"","TaskId":"\"c090b9a0-b4ce-4d52-b500-b59a625f2692/task-...
{ "Action": "\"status\"", "TaskId": "\"c090b9a0-b4ce-4d52-b500-b59a625f2692/task-15\"", "toolAction": "\"Checking install task status\"", "toolSummary": "\"Check npm install status\"" }
manage_task executed successfully

I have initialized the React + TypeScript Vite project and launched the dependency installation for react-router-dom, lucide-react, zustand, recharts, framer-motion, canvas-confetti, clsx, tailwind-merge, and tailwindcss. I will proceed with configuration as soon as installation completes.

▸ manage_task {"Action":"\"status\"","TaskId":"\"c090b9a0-b4ce-4d52-b500-b59a625f2692/task-...
{ "Action": "\"status\"", "TaskId": "\"c090b9a0-b4ce-4d52-b500-b59a625f2692/task-15\"", "toolAction": "\"Checking npm install status\"", "toolSummary": "\"Check npm install status\"" }
manage_task executed successfully

The installation is running in the background. I'll wait for the completion notification.

▸ list_dir {"DirectoryPath":"\"d:\\\\HacktoberFest2026_Dev_Challenge\"","toolAction":"\"...
{ "DirectoryPath": "\"d:\\\\HacktoberFest2026_Dev_Challenge\"", "toolAction": "\"Listing workspace root contents\"", "toolSummary": "\"Workspace contents\"" }
list_dir executed successfully
▸ run_command {"CommandLine":"\"npx tailwindcss init -p\"","Cwd":"\"d:\\\\HacktoberFest2026...
$ {"CommandLine":"\"npx tailwindcss init -p\"","Cwd":"\"d:\\\\HacktoberFest2026_Dev_Challenge\"","WaitMsBeforeAsync":"5000","toolAction":"\"Initializing Tailwind CSS config\"","toolSummary":"\"Init Tailwind CSS\""}
run_command executed successfully

Created At: 2026-10-04T22:31:00+05:30
Tool is running as a background task with task id: c090b9a0-b4ce-4d52-b500-b59a625f2692/task-25
Task Description: npx tailwindcss init -p
Task logs are available at: file:///[APP_DATA_DIR]

Tailwind CSS initialization initiated. Will configure theme and typography as soon as it completes.

▸ manage_task {"Action":"\"status\"","TaskId":"\"c090b9a0-b4ce-4d52-b500-b59a625f2692/task-...
{ "Action": "\"status\"", "TaskId": "\"c090b9a0-b4ce-4d52-b500-b59a625f2692/task-25\"", "toolAction": "\"Checking task status\"", "toolSummary": "\"Check tailwind init status\"" }
manage_task executed successfully

I will wait for the task to finish.

▸ view_file {"AbsolutePath":"\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\tailwind.config.j...
{ "AbsolutePath": "\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\tailwind.config.js\"", "toolAction": "\"Viewing tailwind.config.js\"", "toolSummary": "\"View Tailwind config\"" }
view_file executed successfully
▸ view_file {"AbsolutePath":"\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\index.html\"","to...
{ "AbsolutePath": "\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\index.html\"", "toolAction": "\"Viewing index.html\"", "toolSummary": "\"View index.html\"" }
view_file executed successfully
▸ list_dir {"DirectoryPath":"\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\src\"","toolActi...
{ "DirectoryPath": "\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\src\"", "toolAction": "\"Listing src directory\"", "toolSummary": "\"List src files\"" }
list_dir executed successfully
▸ view_file {"AbsolutePath":"\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\vite.config.ts\""...
{ "AbsolutePath": "\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\vite.config.ts\"", "toolAction": "\"Viewing vite.config.ts\"", "toolSummary": "\"View vite config\"" }
view_file executed successfully
▸ run_command {"CommandLine":"\"npm install -D @types/node\"","Cwd":"\"d:\\\\HacktoberFest2...
$ {"CommandLine":"\"npm install -D @types/node\"","Cwd":"\"d:\\\\HacktoberFest2026_Dev_Challenge\"","WaitMsBeforeAsync":"15000","toolAction":"\"Installing @types/node\"","toolSummary":"\"Install types node\""}
run_command executed successfully

Created At: 2026-10-04T22:32:23+05:30
Completed At: 2026-10-04T22:32:31+05:30

 The command exited with code 0. Output: 

up to date, audited 156 packages in 2s

32 packages are looking for funding
run npm fund for details

5 high severity vulnerabilities

To address issues that do not

▸ view_file {"AbsolutePath":"\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\tsconfig.app.json...
{ "AbsolutePath": "\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\tsconfig.app.json\"", "toolAction": "\"Viewing tsconfig.app.json\"", "toolSummary": "\"View tsconfig.app.json\"" }
view_file executed successfully
▸ view_file {"AbsolutePath":"\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\tsconfig.json\"",...
{ "AbsolutePath": "\"d:\\\\HacktoberFest2026_Dev_Challenge\\\\tsconfig.json\"", "toolAction": "\"Viewing tsconfig.json\"", "toolSummary": "\"View tsconfig.json\"" }
view_file executed successfully
▸ write_to_file {"CodeContent":"\"{\\n \\\"compilerOptions\\\": {\\n \\\"tsBuildInfoFile\...
{ "CodeContent": "\"{\\n \\\"compilerOptions\\\": {\\n \\\"tsBuildInfoFile\\\": \\\"./node_modules/.tmp/tsconfig.app.tsbuildinfo\\\",\\n \\\"target\\\": \\\"ES2022\\\",\\n \\\"lib\\\": [\\\"ES2022\\\", \\\"DOM\\\", \\\"DOM.Iterable\\\"],\\n \\\"module\\\": \\\"ESNext\\\",\\n \\\"types\\\": [\\\"vite/client\\\", \\\"node\\\"],\\n \\\"skipLibCheck\\\": true,\\n\\n /* Bundler mode */\\n \\\"moduleResolution\\\": \\\"bundler\\\",\\n \\\"allowImportingTsExtensions\\\": false,\\n \\\"resolveJsonModule\\\": true,\\n \\\"isolatedModules\\\": true,\\n \\\"noEmit\\\": true,\\n \\\"jsx\\\": \\\"react-jsx\\\",\\n\\n /* Path aliases */\\n \\\"baseUrl\\\": \\\".\\\",\\n \\\"paths\\\": {\\n \\\"@/*\\\": [\\\"src/*\\\"]\\n },\\n\\n /* Linting */\\n \\\"strict\\\": true,\\n \\\"noUnusedLocals\\\": false,\\n \\\"noUnusedParameters\\\":...
Source:https://dev.to/laksh_chinchmalatpure/cogniva-ai-powered-adaptive-learning-workspace-built-for-a-friend-j70

Related posts