HCI Planner

Try this project live!

Overview

The HCI Planner project is a web application I designed to support students of my masters, human-computer interaction (HCI), with planning their masters.

Tech Stack

  • Frontend: React, Next.js, TailwindCSS, DaisyUI
  • State Management: Zustand
  • Testing: Jest, React Testing Library
  • Tooling: TypeScript, ESLint, Prettier

Outcome

The HCI Planner project has successfully started helping students in their planning. As of now, more than 20 students have used the application, and the feedback has been overwhelmingly positive.

Lessons Learned

  • State Management: Zustand proved to be a great choice for state management. It provides a simple API and integrates well with React, while also being lightweight and performant. For developers, it is easy to learn, use, and separate logic, making it a great choice for medium to large-sized applications.
  • Theming: Giving users the ability to customize the theme of the application is a great and very fun way to enhance user experience. DaisyUI made it easy to implement several different themes, which users enjoyed and appreciated.

Conclusion

Creating the HCI Planner showcases the potential of combining modern frameworks and libraries with participatory design principles. The project had a very practical purpose, and also acted as a learning tool for both the users and myself as a developer. The positive feedback from users has been incredibly gratifying, and I look forward to continuing to improve the application based on their suggestions and needs while also collaborating with other HCI students.

It was a very rewarding experience that, to me, highlighted the importance of thoughtful design and structured development practices.