On February 7, 2025, I delivered a quick presentation on Husker's technology stack, design principles, and overall architecture at James's office, as part of Northeastern University's Industry-Aligned Student Programs. Here's a bit about the topics I discussed!
History
- Husker started as a Google Sheets back in 2021 before I joined Northeastern.
- I was annoyed by the number of links and resources we had the lack of good organization. MyNortheastern was cool, but did not have everything (It was shut down soon).
(next slide - screenshot of husker (NEU Links) google sheet, see slides)
- It started off as a Google Sheet with people commenting to add/update links
(next slide - screenshot of husker v1, see slides)
- I soon decided to make it a website, and I added "wiki" pages for things like apps to download or free stuff.
(next slide - screenshot of husker v3)
- Since then I've redesigned it twice
- Used ShadCN UI for the latest version
Tech Stack - Husker
- React + NextJS: personal preference on framework
- ShadCN UI + TailwindCSS: styling and components
- Notion: CMS
- Google Forms: for contribute form submissions
- Vercel: hosting
Why ShadCN UI
- Useful to have copy-pasteable building apps to build your app faster and not have to worry about the smaller (but important) things like dropdowns, context menus, etc, and accessibility
- Shortcut to build your own UI library using "building blocks", it provides a basic set of components like minimally styled buttons which you can customize to your liking
- I did not customize these components all that much because I wanted Husker to feel super simple, with the UI actively getting out of your way
- I usually do not like using libraries like MUI because it is difficult to style it to your exact liking. ShadCN UI does things differently by having you "copy paste" the components into your codebase, so you own them and are able to customize them
- I do still think it is a good idea to learn how to use the underlying libraries (Radix UI) because you are responsible for maintaining it
- While ShadCN's components are easy to install and use, they are pretty complicated themselves, so it's a good idea to understand how they work
Select component: https://github.com/ninest/husker/blob/main/components/ui/select.tsx#L75
(next slide - image of husker v3 showing sheet and multi-select component)
Challenge with Husker - getting users to contribute
- While Husker had good number of users, I was not getting a lot of user-contributions, and it was mainly me editing and updating the content
- I wanted users to be able to freely edit content without having to fill out a form or messaging me on reddit, so I wanted to go with a CMS
Why Notion
- We've all used Notion for its organization/database capabilities, so I thought it would be a good idea to use it as a content management system
- Using a database for links and the wiki
- It is difficult to manage content in code, and it's especially difficult to make quick changes and let others contribute
Notion APIs: https://github.com/ninest/husker/blob/main/modules/notion/apis.ts#L32
Issues with Notion
- While it has a great experience for the editor, it does not provide a great DX
- I had to implement a lot of things on my own, such as a renderer for notion content in react
- I do think a better option would have been to use a proper CMS that was made for these use-cases
Husker Gym
- An app to show crowd levels at the gyms
Tech Stack
- Using GitHub Actions for the cron job as its free and easy to use
- Using python for web scraping and populating the database
Problems with Husker Gym
- Not "simple" enough: although I learned a ton using Python and the technologies, I should have just done everything in javascript to make it simpler
- Not great dev setup for the databases, I should have written a script to create a postgres database rather than relying on pscale for local development too
Husker Courses
- A course viewer and planner
- Community contributions for course information and files (syllabus, notes, etc)
- Wrote a script to scrape Banner
NU Courses (scripts to scrape banner): https://github.com/ninest/nu-courses
Why didn't I publish this?
- Not much time to work on it third year onwards
- I got caught up in trying to make it "perfect" even though it worked fine
Tips for your projects
- Make a decision and stick to it: research your options, make a decision, and commit
- Don't let perfect me the enemy of good
- Keep it simple: make your dev setup simple. If you were to come back in a year to make an update, how easy will it be? Document everything
- Document everything
- Make sure others know what you're doing