Skip to main content
Version: Sprint 1

The Tech Stack

1. Introduction​

This project requires a responsive and interactive web application capable of managing frequently changing application state, including tape cells, head movement, execution status, and live diagram highlighting. The selected technology stack—SolidJS, SolidStart, Vite, and Vercel—was chosen to provide a high-performance development environment while reducing unnecessary architectural complexity.

The primary objective of this stack is to create a cohesive system with fewer independently configured services, simplifying development, deployment, and future maintenance.

2. SolidJS​

SolidJS is the primary frontend framework for this project.

A key advantage of SolidJS is its fine-grained reactivity model, which operates without a virtual DOM. Application state changes are tracked through reactive signals, allowing only the specific parts of the interface affected by a state update to be modified. This is particularly suitable for this application, where elements such as tape cells, head positions, execution states, and diagram highlights may update repeatedly during program execution.

This approach can improve efficiency compared with frameworks that re-render and reconcile larger sections of the interface after each state change.

SolidJS also provides a component-based development model and supports JSX, while maintaining a relatively small runtime footprint. Its reactive design avoids some of the optimisation patterns commonly required in React applications, such as extensive use of memoisation hooks to prevent unnecessary rendering.

Overall, SolidJS provides the project with a responsive and efficient foundation for building its interactive user interface.

3. SolidStart​

SolidStart extends SolidJS by providing a full-stack application framework.

The framework supports both frontend functionality and backend API routes within a single project structure. This reduces the need to maintain a separate Express server, development proxy, and CORS configuration. A unified structure is particularly beneficial for this project because previous development approaches involving separate frontend and backend processes introduced configuration issues such as port mismatches, proxy errors, and CORS conflicts.

SolidStart also provides file-based routing, where application pages and routes are determined by the structure of the src/routes/ directory. This reduces routing boilerplate and makes the application's structure easier for contributors to understand.

Additional benefits include:

  • Built-in server-side rendering support.
  • Integrated API route capabilities.
  • A unified frontend and backend project structure.
  • Simplified deployment through supported hosting platforms.

SolidStart therefore serves as the central framework that connects the application's interface and server-side functionality.

4. Vite​

Vite is used as the project's development and build tooling.

Its development server provides fast startup times and Hot Module Replacement (HMR), allowing developers to see code changes quickly without repeatedly performing full application reloads. This is particularly useful for this project, which contains an interactive interface requiring frequent adjustments to components, controls, animations, and visual execution states.

Vite uses native ES modules during development, meaning that only changed modules generally need to be reprocessed. This helps maintain a fast development feedback loop as the application grows.

Vite also provides access to a broad plugin ecosystem, simplifying integration with additional technologies and development tools.

Since SolidStart is built on top of Vite, the two technologies form a complementary development environment rather than requiring separate and conflicting build configurations.

5. Vercel​

Vercel is selected as the deployment platform for this project.

Its integration with modern web frameworks simplifies deployment by allowing the application to be built and deployed directly from the project's source repository. Preview deployments can also be generated for development branches or pull requests, allowing changes to be tested before being merged into the main application.

Vercel provides centralized management of environment variables and secrets. Sensitive information, including database connection details, OAuth credentials, and authentication secrets, can therefore be stored outside the project's source code and repository.

The platform also supports serverless and edge-based deployment models, allowing server-side API functionality to be deployed without requiring the team to manually configure and manage a dedicated server.

For a student or prototype project, Vercel's available entry-level deployment options make it suitable for initial development while still providing opportunities for future scaling.

6. Overall Stack Architecture​

The main justification for the selected technology stack is that it minimizes the number of independently configured components required to develop and deploy the application.

Rather than separately maintaining:

  • a frontend framework;
  • a backend framework;
  • a development server;
  • a proxy configuration;
  • CORS configuration;
  • a bundler; and
  • a hosting environment,

the selected stack provides a more integrated development pipeline.

The architecture can be summarized as follows:

SolidJS → User Interface and Reactive State
SolidStart → Application Framework and API Routes
Vite → Development and Build Tooling
Vercel → Deployment and Hosting

Authentication through Better Auth and the PostgreSQL database remain separate services, but the main application infrastructure is consolidated into a smaller and more cohesive system.

This reduces the risk of configuration drift between independently running services. It also simplifies the onboarding process for new contributors because the project can follow a clearer development workflow, rather than requiring multiple servers and configurations to be coordinated manually.

7. Conclusion​

The selected technology stack is designed around performance, simplicity, and reduced configuration complexity.

SolidJS provides efficient fine-grained reactivity for the application's frequently changing visual state. SolidStart unifies frontend and backend functionality within a single framework. Vite provides fast development tooling and hot module replacement, while Vercel simplifies deployment and environment management.

Together, these technologies provide a cohesive architecture that is well suited to the interactive requirements of this project while reducing the complexity associated with maintaining multiple independently configured services.

SolidJS + SolidStart + Vite + Vercel + Better Auth + PostgreSQL

This architecture provides a clear and scalable foundation for the continued development of this application.