Boulder Browse

This project is a visual course management tool built using React Flow. It allows users to build and visualize their CU Boulder class plan while connecting pre-requisites.

Features

• Interactive Course Nodes:
  Visual representation of courses, displaying course codes, titles, and last semester.
• Searchbar:
  Search bar to add courses to the interactive grid.
• Sidebar:
  Sidebar opens on course node click to display more details about the course. Can add prerequisites directly from sidebar.
• Automatic Layout:
  Implemented tree layout to clearly visualize courses. Controls to automatically update layout as more courses and edges are added.
• Draggable Attributes:
  Assign attributes like "Freshman Year", "Sophomore Year", "Transfer Credit", etc., to course nodes.
• Dynamic Styling:
  Nodes change color based on assigned attributes.
• Adjustable Controls:
  Various controls to change styling of the edges and direction of course handles
• Responsive Design:
  Utilizes Tailwind CSS for styling and responsiveness.

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/boulder-browse.git

2. Navigate to the project directory:

   cd boulder-browse

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

Usage

Running the Project

1. Start the development server:

   npm start

2. Open your browser and navigate to http://localhost:3000 to see the application in action.