A modern course exploration platform built with Next.js, featuring an interactive network graph visualization of course relationships and a clean, responsive UI.
Course Explorer is designed to help students and educators visualize and explore course relationships across different academic disciplines. The platform provides an intuitive way to understand course prerequisites, dependencies, and connections through an interactive network graph.
- Interactive Course Network Visualization: Explore course relationships through an interactive graph powered by vis-network
- Advanced Search: Quickly find courses using the command menu with fuzzy search capabilities
- Course Details: View comprehensive information about each course including prerequisites and descriptions
- Dark/Light Mode: Toggle between themes for comfortable viewing
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Modern UI: Built with Radix UI components and Tailwind CSS for a polished user experience
The application is live at: https://courses.coolstuff.work
- Framework: Next.js 16 with App Router
- Language: TypeScript
- UI Components: Radix UI, shadcn/ui
- Styling: Tailwind CSS
- Visualization: vis-network for course relationship graphs
- Icons: Lucide React
- State Management: React Context API
- Deployment: Vercel
/
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js app routes
│ ├── components/ # Reusable UI components
│ ├── lib/ # Utility functions and types
│ └── styles/ # Global styles
├── branch-json/ # Course data in JSON format
└── ...
The interactive network graph visualizes course relationships using force-directed layout. Courses are represented as nodes and relationships as edges, allowing users to explore dependencies and connections.
A powerful search interface that allows users to quickly find courses using fuzzy search. The command menu supports keyboard navigation and provides instant results.
Detailed course information including title, code, description, prerequisites, and related courses. The interface is designed to be clean and easy to navigate.
- Node.js 18+ or Bun 1.0+
- npm, yarn, pnpm, or bun package manager
# Clone the repository
git clone https://github.com/your-username/course-web.git
cd course-web
# Install dependencies
npm install
# or
yarn install
# or
pnpm install
# or
bun installnpm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
npm run build
# or
yarn build
# or
pnpm build
# or
bun run buildnpm start
# or
yarn start
# or
pnpm start
# or
bun run startnpm run lintThe project is configured for deployment on Vercel. You can deploy using:
npm run deployCourse data is stored in JSON files in the branch-json/ directory. Each file represents a different academic branch and contains:
- Course codes
- Course titles
- Prerequisites
- Descriptions
- Relationships to other courses
- Create a new JSON file in the
branch-json/directory - Follow the existing data structure format
- Update the course data loader in
src/lib/courses.ts
- Modify components in the
src/components/directory - Update styles in the
src/styles/directory - Configure theme in
src/components/theme-provider.tsx
- Create a new branch for your feature
- Implement the feature following existing patterns
- Add appropriate tests
- Update documentation if needed
- Submit a pull request
We welcome contributions! Please see our CONTRIBUTING.md file for detailed guidelines on how to contribute to this project.
This project is open source and available under the MIT License.
For questions or support, please open an issue on the GitHub repository.
- Built with Next.js
- UI components from Radix UI
- Network visualization powered by vis-network
- Icons from Lucide
- Add user authentication
- Implement course bookmarking
- Add course reviews and ratings
- Expand course database
- Add academic planning tools