Quick Start

Explore the suite of software we use.

Written in a beginner-friendly language in order to provide a smooth onboarding experience for cuHacking's 2024-25 development team, and also act as a general open-source reference for other projects.

🔭 Project Management

GitHub Projects

Tracking issues, tasks, and progress directly within GitHub.

Allows everyone to see what everyone else is up to, and do work without blocking each other.

Notion

Powerful all-in-one workspace used by all teams at cuHacking.

Mostly to keep an open line of communication with other teams, technical tasks will be on GitHub Projects.

🪄 UI/UX Design

Figma

An outrageously powerful collaborative design tool for wireframing ideas and prototyping mockups.

Allows you to sort out your UI/UX first, saving you from writing code and end up building the wrong thing which also may look like potato 🥔

🐞 Development

🌐 Monorepo Manager

Nx

Allows sharing code and assets between projects, and makes using many different technologies together possible.

Massively improves productivity as you don't have to context switch between different git repos with different version histories.

📦 Package Manager

pnpm

Drop-in replacement for npm that is faster and better in almost every way.

Better for both the disk health of your computer and the speed of our CI/CD pipelines

✨ Front-End

⁉️ State Management

XState

Powerful and flexible state management library based on finite state machines and statecharts.

Strong focus on predictability and control over state transitions, allowing for more reliable and well-defined workflows.

Ideal for managing complex or multi-step processes, where each state and transition can be explicitly defined and visualized.

Separates business logic from UI, making it framework-agnostic and easy to integrate with React, Vue, and other libraries.

⚙️ Back-End & Middleware

tRPC

End-to-end typesafe API layer for interfacing with databases.

PostgreSQL

Open-source relational database system where we store data.

Drizzle

An ORM that saves us from writing raw SQL queries, plays well with the Node.ts ecosystem.

Payload CMS

Content Management System to hold static data displayed across our websites and apps.

Provides a database that stores static content such as text and images away from our codebase, so that other teams can change them directly through a nice admin dashboard without having to contact us.

Gives us the power of WordPress without getting in our way for customizability.

🧹 Code Quality

ESLint

Find and fix problems in code, and enforce style guide and best practices.

Saves you from having to memorize and study our style guide by giving you instant feedback while coding.

Saves us from having to make our entire style guide and re-invent best practices from scratch using plugins.

Can catch lightweight surface bugs. Cannot catch deep business logic bugs, but prevents the likelihood of them happening by catching the surface bugs.

Prettier

An opinionated code formatter to make code look Prettier.

Cannot catch bugs. Only handles fixing inconsistencies in spacing, quotes, semicolons, parentheses, brackets, etc.

Conventional Commits

Standardized open-source specification for commit messages.

Commitizen

A tool to create standardized commit messages that adhere to the conventional commits specification + our sprinkles on top.

Commitlint

Lint commit messages according to our specifications.

Commitlint/config-conventional- Plugin that enforces conventional commits for commit messages and allows us to modify them.

Commitlint/cz-commitlint- Provides an integration for Commitizen so that the only options displayed to you are the same ones defined in Commitlint.

In a nutshell, blocks commit messages that do not meet our specs, which in turn saves our CI pipelines from crashing or creating the wrong versions, which in turn ensures our whole app doesn't blow up.

Lint-staged

Runs ESLint and Prettier on Git staged files so that there are no code style diffs at the PR level.

Husky

Library that allows us to quickly and easily trigger Git hooks, which in turn trigger commands to run the tools mentioned above.

⚗️ Testing

Vitest

For writing both Unit Tests and Integration Tests.

Code with peace of mind and get instant feedback if you break something.

Playwright

For End-to-End Testing of our entire app.

Instead of clicking around the entire app yourself to see if it still works after every single time you make a change, why not let a robot do it for you?

Storybook Test Runner

Executes Vitest and Playwright test suites on design system components, along with handling accessibility testing, and coverage testing using plugins.

Chromatic

Visual test server platform to easily spot differences in UI and discuss them as a team, integrated with Storybook.

Can catch visual bugs by comparing new renders with a specified baseline, and block the changes from making it to production prior to being reviewed.

☁️ Deployment

Semantic Release (being replaced by Nx Release)

Automated versioning and package publishing as per the Semantic Versioning specification.

Parses the history of commit messages to automatically generate changelogs.

Requires conventional commit specs to be followed in order to work properly.

GitHub Actions

Automated CI/CD pipelines to run linting, test suites, and handle versioning.

The final boss you need to defeat before human eyes even see your code.

Very fun to configure and watch at work. Not very fun to debug ☁️

Docker

Containerization platform to develop, ship, and run the app anywhere.

Your computer is a box. Someone else's computer is a box. Your box is different from their box. The thing works on their box but not yours. What if both of you used the same box with the same configs and could easily pass it around like hot potato? 📦🤔

Docker is that box, more fancily referred to as a 'container'. Both of you run this box inside your box. It works for both of you by boxception.

Netlify

For safely deploying our app to the web so that people can see and use it from their browsers.

Uses AWS under the hood.

Integrates well with Next.js and also allows for demo deployments for our own purposes which are not indexed on google.

If we push a version that makes it past all our tests but somehow breaks at the build stage, Netlify will provide instant feedback and not deploy it, leaving up the previous functional version.

Also allows quick and easy rollbacks to previously deployed versions.