🎓 Course Path Planner

A modern, interactive web application for planning your academic journey. Built with React, this tool helps students visualize course prerequisites, plan semester schedules, and track degree progress through an intuitive interface and interactive dependency graphs.

✨ Features

📚 Course Management

• Browse comprehensive course catalog with search and filtering
• View detailed course information, prerequisites, and descriptions
• Color-coded categories (Core, Elective, Math, Science, General)
• Real-time prerequisite validation

📅 Academic Planning

• Plan courses across 8 semesters (4-year degree)
• Drag-and-drop course scheduling with conflict detection
• Credit tracking per semester and overall
• Smart prerequisite checking prevents invalid scheduling

📊 Progress Tracking

• Visual progress bars for degree requirements
• Credit breakdown by category
• Graduation timeline and completion percentage
• Summary statistics and milestone tracking

🕸️ Interactive Dependency Graph

• D3.js-powered visualization of course relationships
• Interactive nodes showing prerequisite connections
• Semester-based positioning for planned courses
• Zoom, pan, and filter controls for easy navigation

💾 Data Management

• JSON-based course data (easily customizable)
• Export functionality for course plans
• Persistent planning across sessions
• No backend required - runs entirely in the browser

🚀 Quick Start

Prerequisites

• Node.js 14+ and npm
• Modern web browser

Installation

1. Clone or create the project:

npx create-react-app course-path-planner
cd course-path-planner

2. Install dependencies:

npm install lucide-react d3
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Configure Tailwind CSS: Update tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

4. Add Tailwind to CSS: Replace src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Create the file structure:

src/
├── components/
│   ├── CoursePathPlanner.js
│   └── CourseGraph.js
├── data/
│   └── courses.json
├── App.js
└── index.js

6. Add the component files (copy from provided artifacts)

7. Start the development server:

npm start

Visit http://localhost:3000 to see your Course Path Planner!

📁 Project Structure

course-path-planner/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── CoursePathPlanner.js    # Main application component
│   │   └── CourseGraph.js          # D3.js graph visualization
│   ├── data/
│   │   └── courses.json            # Course data and requirements
│   ├── App.js                      # Root component
│   ├── App.css                     # Additional styles
│   └── index.js                    # Application entry point
├── package.json
├── tailwind.config.js
└── README.md

🎯 Usage Guide

Course Catalog Tab

• Search courses by name or ID using the search bar
• Filter by category using the dropdown menu
• Browse course cards showing details, prerequisites, and credits
• Color coding helps identify course types at a glance

My Planner Tab

• Add courses to semesters using the + button
• Remove courses with the × button
• View semester credits and course requirements
• Export your complete plan as JSON

Dependency Graph Tab

• Visualize course prerequisites as an interactive network
• Toggle between showing all courses or planned courses only
• Zoom/Pan to navigate large graphs
• Click nodes for detailed course information
• Drag nodes to rearrange the layout

Progress Tab

• Track progress toward degree requirements
• View credit breakdowns by category
• Monitor completion percentages
• Check graduation timeline and requirements

🛠️ Customization

Adding New Courses

Edit src/data/courses.json to add courses:

{
  "id": "CS999",
  "name": "Advanced Topic",
  "credits": 3,
  "prerequisites": ["CS201", "CS220"],
  "category": "Elective",
  "semester": "Fall",
  "description": "Course description here"
}

Modifying Degree Requirements

Update the degreeRequirements section in courses.json:

"degreeRequirements": {
  "totalCredits": 120,
  "coreCredits": 45,
  "electiveCredits": 30,
  // ... other requirements
}

Customizing Semesters

Modify semesterTemplates to change the number of semesters or dates:

"semesterTemplates": {
  "1": { "semester": "Fall 2024", "courses": [] },
  // ... add more semesters
}

🎨 UI Components

Course Cards

• Color-coded borders by category
• Prerequisite validation with visual feedback
• Credit display and course details
• Interactive buttons for planning actions

Dependency Graph

• D3.js force simulation for natural node positioning
• Color-coded nodes matching course categories
• Arrow connections showing prerequisite relationships
• Semester guides for planned course organization

📊 Technical Details

Built With

• React 18.2+ - Component-based UI framework
• Tailwind CSS - Utility-first CSS framework
• D3.js - Data visualization library
• Lucide React - Beautiful icon library

Performance Features

• Client-side only - No backend required
• JSON data storage - Fast loading and easy to modify
• Optimized rendering - Efficient React patterns
• Responsive design - Works on all device sizes

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React Team for the excellent framework
• Tailwind CSS for beautiful, utility-first styling
• D3.js Community for powerful data visualization tools
• Lucide for clean, consistent icons

📞 Support

If you encounter any issues or have questions:

1. Check the troubleshooting section above
2. Search existing GitHub issues
3. Create a new issue with detailed information

---

Happy Planning! 🎓 Build your perfect academic roadmap with Course Path Planner.