Skip to content

TECHNICAL STACK

Technical stack

This project is built using a modern web development stack, leveraging efficient, scalable, and developer-friendly technologies. Below is an overview of the technical stack used:

Bun

  • Bun is a fast JavaScript runtime and package manager that simplifies dependency management and accelerates development workflows.
  • It replaces traditional Node.js tooling like npm or yarn and focuses on speed and developer productivity.
  • In this project, Bun is used for:
  • Installing and managing dependencies.
  • Running development and production builds efficiently.

Next.js

  • Next.js is a React framework for building server-rendered and statically generated websites and applications.
  • Key features utilized:
  • File-based Routing: Simplifies page creation by using the filesystem structure.
  • Server-side Rendering (SSR) and Static Site Generation (SSG): Ensures fast and SEO-friendly performance.
  • API Routes: Provides backend functionality directly in the application.

React

  • React is a JavaScript library for building interactive user interfaces.
  • The component-based architecture of React allows for reusable and modular UI components.
  • React’s declarative nature ensures an intuitive development experience and efficient DOM updates.

TypeScript

  • TypeScript is a superset of JavaScript that adds static typing, enhancing code quality and maintainability.
  • Benefits:
  • Catching errors at compile-time instead of runtime.
  • Improved code readability and developer tooling support, such as IntelliSense.
  • In this project, TypeScript ensures type safety across components, APIs, and utility functions.

Tailwind CSS

  • Tailwind CSS is a utility-first CSS framework for styling components directly in HTML or JSX files.
  • Benefits:
  • Rapid UI development with a consistent design system.
  • No need for custom CSS files for every minor style change, reducing the overhead of maintaining stylesheets.
  • Customization through a tailwind.config.js file for theming and responsive design.

This stack provides a robust foundation for building scalable, maintainable, and performant web applications, with an emphasis on developer productivity and modern user experience.

Dependencies and plugins

Plate

  • Plate is a rich-text editor framework for React built on top of Slate. It allows us to build a custom editor with default plugins that we can add together.
  • Benefits:
  • Highly customizable, we can define our own plugins, marks and styling
  • Large choices of plugins already in the ecosystem
  • Works well with react and typescript
  • Downsides:
  • It has a steep learning curve, since it’s built on slate, there is three level of abstraction to it Slate + Plate + plugins which can be hard to debug and understand
  • Very opinionated, plate can be quite rigid in it’s way of functioning and it is hard to make it work out of the box
  • The plugin APIs and packages have changed over time. Upgrading Plate versions can require refactors, especially in complex editors.

Leaflet

Leaflet is an open-source JavaScript library for interactive maps. It is designed with simplicity, performance and usability in mind. It is lightweight but can also be extended with lots of plugins. It is the perfect based

  • Benefits:
  • Lightweight - Only \~42KB gzipped, making it extremely fast to load and render
  • Simple API - Easy to learn and implement with excellent documentation
  • Several applications - Handles pins, borders and more annotation tools natively
  • Downsides:
  • Limited styling options - Less flexible styling compared to canvas-based solutions
  • Performance with large datasets - Can struggle with thousands of markers or complex overlays
  • DOM-based rendering - Uses DOM elements which can be slower than canvas for complex visualizations

Leaflet is the perfect solution for constellation as it’s is the best world between optimized fast rendering and customizable option, it allows us to add our tools and build around this base. We implemented custom pins, border, zoom and modals triggering behavior.

Pixi JS

Pixi JS is fast 2D WebGL rendering library with canvas fallback, designed for creating interactive graphics.

  • Advantages:
  • High performance - Uses WebGL for hardware-accelerated rendering, handles thousands of objects smoothly
  • Rich graphics API - Comprehensive tools for sprites, graphics, filters, and particle effects
  • Great for animations - Excellent performance for dynamic, animated content with built-in ticker
  • Downsides:
  • Larger bundle size - \~400KB minified, significantly larger than Leaflet
  • Steeper learning curve - More complex API, requires understanding of display objects and containers
  • Overkill for simple tasks - Too powerful (and heavy) for basic static visualizations

The graph view is a very important part of constellation, so we need to have a powerful library to build it, as it is a corner stone of our project ; we intend to implement a very complex links and elements visualization system. We have a strong base with an interactive force-directed graph visualization that runs smoothly at 60+ fps.

Joyride

Joyride is a library for creating guided product tours and feature walkthroughs in React applications.

  • Advantages:
  • Feature-rich - Provides tooltips, spotlights, overlays, and step progression out of the box
  • Customizable - Highly configurable styling, positioning, and behavior
  • Accessibility focused - Built with keyboard navigation and screen reader support
  • Downsides:
  • Fixed interaction model - Can be rigid for complex, multi-branch tour scenarios
  • Styling complexity - Custom themes require overriding many nested style properties
  • Z-index conflicts - Can clash with modal dialogs or other high-z-index elements

We needed to create a quick onboarding system in the app, joyride was the perfect solution for speed and efficiency while still being really enjoyable for the users with action based tutorials all over the app.

Minor dependencies

  • Zod — Runtime schema validation and parsing for API payloads and form validation (keeps runtime data types safe).
  • TanStack Query (react-query) — Client-side data fetching, caching and background updates for a responsive UI.
  • Axios — Promise-based HTTP client used for server and client requests where fetch/ky is not used.
  • clsx — Tiny utility for conditionally joining CSS class names.
  • date-fns — Lightweight utilities for parsing, formatting and manipulating dates.
  • nanoid — Small, secure ID generator used to produce compact unique IDs.
  • uploadthing — File upload utilities and server handlers used for editor and media uploads.
  • ky — Minimal HTTP client (fetch wrapper) with nice defaults like retries and timeouts (used in some utilities).

How to run

bun install
bun dev

This will start the development server at http://localhost:3000.

How to build

bun build

This will create an optimized production build in the .next directory.