Introduction

Welcome to the StudiPlan.ai documentation. This application is an intelligent study planning platform designed to help students and professionals organize and execute their learning plans more effectively.

This project was created as a submission for the Blackbox x PNJ Hackathon, with the primary goal of building a practical, modern, and fully functional learning tool using the latest web technologies.

Project Philosophy: The Name

Why "StudiPlan.ai" not "StudyPlan.ai"?

The name "StudiPlan" is a creative blend. "Studi" is the Indonesian word for "Study". This not only gives the project a unique, memorable brand but also pays homage to its origin and developer's language. The English "StudyPlan.ai" is generic and likely already taken. "StudiPlan" is distinct.

Why ".ai" if it doesn't use AI?

This is a key point. The ".ai" suffix represents thevision and ambition of the project, not its current (V1) implementation.

  • V1 (Current): The app uses deterministic, rule-based logic (a "smart generator" in `/api/generate-plan`). It intelligently calculates dates, splits content, and provides tips based on pre-programmed rules. It's "intelligent," but not true "Artificial Intelligence."
  • V2 (The Vision): The ".ai" signifies the future goal: to replace this static logic with a true Large Language Model (LLM). The plan is to integrate an API (like the Blackbox API) to create truly dynamic, adaptive, and conversational plans based on user prompts (see "Future Development").

Key Features

📚 Interactive Courses

Provides structured learning materials for 4 programming languages (Python, Golang, Java, C++). Each course is presented in a long-scroll format with a sticky sidebar navigation and interactive quizzes to test comprehension.

🤖 Dynamic Study Planner

The core feature. Users select a subject, duration, and user type. A local API route then generates a complete schedule with real-time dates, daily material allocation, and recommendations.

➕ Multi-Subject Aggregation

Users can add multiple plans sequentially. If you generate a 1-week Python plan, you can then generate a 1-week Java plan, which will automatically start on "Week 2" and continue the schedule, allowing for a single, combined study plan.

✏️ In-Place Editing & PDF Export

The generated plan is fully interactive. Users can click the "Edit" (pencil) icon on any session to open a modal and modify the title, time, methods, and tips. The final, aggregated plan can be exported as a clean PDF document for offline use.

How to Use (User Guide)

Step 1: Generate Your First Plan

  1. Navigate to the Study Plan page.
  2. Select your desired subject (e.g., "Python").
  3. Choose a duration (e.g., "1 Week").
  4. Select your user type (e.g., "Student").
  5. Click the Generate button.
  6. Your plan will appear, broken down by week and day.

Step 2: Add More Subjects (Optional)

  1. After your first plan is visible, stay on the same page.
  2. In the form, select a new subject (e.g., "Java").
  3. Choose a new duration (e.g., "1 Week").
  4. Click the button again (it now says "Add to Plan").
  5. The new plan (e.g., "Week 2 - Java") will be automatically appended to the end of your current plan.

Step 3: Interact With Your Plan

  • Click any session title (e.g., "Python: 1. Introduction") to go directly to that lesson in the Courses page.
  • Click the pencil icon (✏️) on any session to open a pop-up and edit its details (time, methods, tips).
  • Click the "Export PDF" button to save a clean, text-based copy of your entire plan.
  • Click the "Reset Plan" button at any time to clear the plan and start over.

Tech Stack

Frontend

  • Next.js 14 (App Router): Modern React framework with Server Components.
  • TypeScript: Ensures type safety and code scalability.
  • Tailwind CSS: A utility-first CSS framework for rapid, consistent styling.
  • Shadcn/ui: Accessible and customizable UI components.
  • Framer Motion: For smooth page transitions and component animations.
  • React Syntax Highlighter: For clean code snippets in course materials.
  • jsPDF: Used to generate clean, text-based PDF exports of the study plan.

Backend & Data

  • Next.js API Routes: Serverless backend to handle the plan generator logic.
  • Static Content (.ts): All course materials and quiz banks are stored as TypeScript files (`lib/content/`). This provides fast build-time performance and eliminates the need for an external database for content.

Use of Blackbox.ai

The Blackbox.ai VSCode extension was used extensively as the primary AI assistant during the development of this project. Here’s how it was used:

1. Code Generation & Boilerplate

Blackbox.ai was instrumental in creating the boilerplate for React/Next.js components (e.g., creating the initial `QuizCard` component), layout structures, and Tailwind CSS-compatible styling.

2. Refactoring & Debugging

AI was used to refactor complex logic. For example, when upgrading the study plan generator to support multi-subject aggregation, AI helped update the API logic and ensure all TypeScript types remained in sync. It also helped identify complex bugs, like the `html2canvas` and `jsPDF` integration issues.

3. Content Writing

AI assisted in writing and structuring a large portion of the course material and quiz banks (especially for Java and C++), significantly speeding up the data-filling process.

Future Development

True AI Integration (LLM)

This is the highest priority. The plan is to replace the current rule-based generator (`/api/generate-plan`) with a true LLM (like the Blackbox API). This would allow users to make natural language requests (e.g., "Give me a 3-week plan for Python and Java, but I have no experience and can only study on weekends").

User Authentication & Database

Implement an authentication system (using Supabase Auth or NextAuth) so users can save, load, and manage their study plans across devices. This requires moving from static data to a proper database (like Supabase/PostgreSQL).

Progress Tracking

Once users are authenticated, add a feature to "check off" completed study sessions and track quiz scores, providing a visual progress bar for their learning journey.