College Course Planner

• 

  This is what the entire page looks like.

Inspiration

When brainstorming for this hackathon, I wanted to create something to support SF State students—especially since this is my first semester here. I'm also competing in a hackathon hosted by SF State, it made sense to give back to the community offering me this opportunity. After seeing previous winners’ projects, like an SF State campus map for new students, I was inspired to address another common challenge for newer students: picking and planning their future classes. So, I created a website that simplifies course selection and visualizes a student’s path to graduation, making the transition easier for all.

What it does

The website has three main sections. First, users input their major, allowing the site to generate a roadmaps and list of required courses for that major. The second section presents a visual planning tool where students can add or remove semesters, drag courses to build a customized schedule, and easily track progress. The third section displays the school recommended semester-by-semester breakdown of how you should take those classes, giving students a reference to see a school approved way of taking those classes.

How we built it

We built this project using the T3 stack, which combines Next.js for the frontend, TypeScript for type safety, Drizzle ORM for database management, and PostgreSQL as our data store. This stack enabled us to quickly prototype and deploy a responsive, interactive interface while managing complex data structures. The T3 stack provided the flexibility and performance needed to deliver a seamless user experience for course planning and roadmap visualization. We also used Vercel for deployments.

Challenges we ran into

One major challenge was designing an interface that balances simplicity with functionality. We wanted to ensure the planner was intuitive for new students without overwhelming them. Another challenge was organizing and structuring the database to accommodate various majors’ unique course requirements, including electives and prerequisites. Managing data efficiently while maintaining a smooth user experience required careful planning and iteration.

Accomplishments that we're proud of

We're proud of creating a tool that directly benefits students and addresses a real need on campus. Developing a dynamic roadmap generator that adapts to different majors and tracks student progress in real-time was a major technical achievement. We're also thrilled with the visual design, which makes complex planning accessible and easy to use.

What we learned

We learned a lot about user experience design, particularly in simplifying complex workflows. On the technical side, working with Drizzle ORM and PostgreSQL deepened our knowledge of data management, while building the frontend taught us more about creating interactive and responsive web applications. Collaborating as a team also improved our skills in communication, problem-solving, and iterative design.

What's next for College Course Planner

Next, we plan to enhance the planner with features like automated course recommendations based on prerequisites and elective options. We’re also considering adding a GPA tracker, an integration with SF State’s official course catalog, and mobile compatibility so students can access their plans on the go. Expanding to include minor selections or double-major paths is also on our roadmap.

Built With

• drizzle
• next.js
• postgresql
• t3
• tailwindcss
• typescript
• vercel