Degree Overlap Visualizer

A React-based web application that helps community college students visualize how their completed courses apply to multiple associate degree programs.

Features

• Input completed courses manually or via CSV import
• View progress across multiple degree programs
• Visualize course overlap between degrees
• Plan future semesters with "what-if" scenarios
• Track remaining requirements for each degree

Tech Stack

• React 18 with Vite
• Tailwind CSS for styling
• Recharts for data visualization
• Local storage for data persistence

Getting Started

Prerequisites

• Node.js 16.x or later
• npm 7.x or later

Installation

1. Clone the repository:

git clone https://github.com/yourusername/degree-overlap-mvp.git
cd degree-overlap-mvp

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

Usage

1. Add Completed Courses

   • Use the course form to add individual courses
   • Or import courses from a CSV file (see public/sample-courses.csv for format)

2. Select Degree Programs

   • Choose from the available degree programs in the sidebar
   • View progress and requirements for each selected degree

3. View Visualizations

   • Progress: See completion percentage for each degree
   • Course Overlap: Identify courses that count toward multiple degrees
   • Distribution: View how courses apply to different requirement categories
   • Timeline: Plan future semesters with recommended courses

4. Plan Ahead

   • Use the timeline view to plan future semesters
   • Add potential courses to see their impact on degree progress
   • Get recommendations for optimal course selection

Data Structure

Course Format

{
  id: "unique-id",
  code: "ENG101",
  name: "English Composition",
  credits: 3,
  grade: "A", // optional
  semester: "Fall 2023", // optional
}

CSV Import Format

code,name,credits,grade,semester
ENG101,English Composition I,3,A,Fall 2023

Development

Project Structure

degree_overlap_mvp/
├── src/
│   ├── components/     # React components
│   ├── data/          # Sample data and configurations
│   ├── hooks/         # Custom React hooks
│   ├── utils/         # Utility functions
│   └── styles/        # Global styles
└── public/            # Static assets

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run test - Run tests

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some 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
• Vite
• Tailwind CSS
• Recharts