Install the required external dependencies:
pnpm installRun the dev server:
pnpm run devCheck for linting errors and apply safe fixes:
pnpm lintCheck for formatting errors and apply safe fixes:
pnpm formatDo both in one check:
pnpm checkInstall required browsers for running e2e tests:
pnpm e2e:installRun all tests:
pnpm e2e:testUse the ui flag to watch the tests:
pnpm exec playwright test --uiRun tests for individual browsers:
| Google Chrome | Firefox | Safari |
|---|---|---|
pnpm e2e:test:chromium |
pnpm e2e:test:firefox |
pnpm e2e:test:webkit |
Generate tests interactively:
pnpm e2e:test:generateRead more in the docs.
First, build your app for production:
pnpm run buildThen run the app in production mode:
pnpm startNow you'll need to pick a host to deploy it to.
Separate your settings and extensions based on the projects you're working on or your different responsibilities with VSCode Profiles
Maintain consistent coding styles in teams EditorConfig.EditorConfig
Make TypeScript errors readable with YoavBls.pretty-ts-errors
- Module imports:
christian-kohler.npm-intellisense - Tailwind classes:
bradlc.vscode-tailwindcss - Iconify icons:
antfu.iconify
Read more about Intellisense
Install the official Biome extension biomejs.biome
Configure the VSCode workspace settings:
// .vscode/settings.json
{
// Set default formatter to Biome
"editor.defaultFormatter": "biomejs.biome",
// Format on save
"editor.formatOnSave": true,
// On save:
"editor.codeActionsOnSave": {
// add missing imports
"source.addMissingImports.ts": "always",
// organise imports
"source.organizeImports": "always"
},
}Emmet provides snippets and abbreviations to write HTML tags quickly. Emmet is included by default with VSCode, so you don't need an extension!
Read about Emmet in VSCode here
Source Control in VSCode provides a visual UI for interacting with Git. Personally, this vastly improves the experience learning Git. Once you've learned Git commands through Source Control, then you can decide whether to memorise the commands for the terminal.
Read more about Source Control here
We are a voluntary IT-group for Vektorprogrammet at NTNU. Our team consists of people who study a variation of fields, with widely different experiences with web development.
Vektor IT's main goal will therefore always be learning web development in a fun way, secondary to the maintenance of the website.
When choosing what technologies to work with we evaluate:
- What problem does this tool solve?
- Does this problem have a de facto standard solution?
- If so, why are/aren't we choosing the standard?
- Is this tool included in the web development curriculum at NTNU?
| Use case | Official docs | Our reasoning |
|---|---|---|
| Programming language: | TypeScript | the language of the web |
| Component framework: | React | helps us re-use code |
| Build tool: | Vite | makes build configuration a problem of the past |
| Router/Meta-framework: | React Router v7 | expands our app over multiple pages |
| Style system: | Tailwind | simplifies styling and makes everything pretty |
| Icon library: | Iconify | does for icons what Tailwind did for CSS |
| Linter, Formatter: | Biome | eliminates bugs pre-emptively and keeps code consistent |
| Component collection: | Shadcn/ui | starts us off on the right foot |
| Headless components: | Radix UI | provides functional and accessible primitives |
| e2e test runner | Playwright | makes sure everything works as intended |
| Package manager: | pnpm | reduces the black hole that is node_modules |
| All-in-one component library: | Mantine | fills in the remaining holes |
| Use case | Official docs | Our reasoning |
|---|---|---|
| Deployment | DigitalOcean | provides an all-in-one hosting solution with predictable prices |
| Auth management | Clerk | makes setting up auth fast and secure |
| Analytics and Feature flags | Posthog | gives insight into our users behavior |
- Learn web dev by creating your own projects The Odin Project
- The unofficial web development bible MDN Web Docs
- Find out the standards on web accessibility W3C Web Accessibility Initiative
TypeScript reduces runtime errors to red squiggles in your editor.
TypeScript helps your text editor or IDE autocomplete your code with intellisense.
TypeScript was chosen as our programming language for both backend and frontend problems.
JavaScript is the most used language on the web,
and TypeScript (for application developers) is effectively JavaScript but better (with types).
It is also the language used in NTNU's curriculum.
React was chosen as our component framework as it is the de facto standard while also being included in NTNU's curriculum.
During the 2020s Vite became the de facto standard build tool
for building applications with React.
It solves the problem of building applications with React.
It is included in NTNU's curriculum.
Therefore, there is no reason to choose any other build tools.
React Router was chosen as our router solution as it is widely used and it is included in NTNU's curriculum.
Tailwind was chosen as our style system as it is currently the de facto standard for styling modern web applications. It is incredibly efficient, only bundling the classes used within the application.
It is included in NTNU's curriculum.
Biome was chosen over Prettier and ESlint because configuring ESlint
takes an ungodly amount of time.
ESlint might have extensible configuration,
but Biome ships with great defaults and incredible performance.
Using 1 tool for 2 problems also reduces the amount of packages we depend on, which reduces the surface area for attack and accidental bugs.
Iconify provides a single component for displaying icons,
over 200,000 icons to use while shipping none of them in our app bundle.
Icons are fetched on the client from Iconify's api when needed and
cached in local storage to reduce unnecessary network requests.
Iconify does for icons what Tailwind did for CSS.
shadcn/ui is not a dependency,
but a collection of copy-pastable components,
providing a great starting point for building UIs.
shadcn/ui uses tools we already have decide to use so it fits nicely
within our "stack".
Radix Primitives is a collection of headless (unstyled) components
so commonly used within web apps they have standards for accessibility.
Radix Primitives adhere to the
WAI-ARIA accessibility practices.
Radix Primitives is used in the component collection shadcn/ui provides.
In house UI components should use Radix Primitives when possible.
Playwright does e2e testing by running all tests in the different major browsers. This is our most important way of testing as functionality is tested in the same environment users interact with the application in.
pnpm install and manages packages globally while reducing unnecessary merge conflicts and providing a readable lock file when they eventually do happen. pnpm is essentially npm but better at the cost of one character
Mantine provides pre-built components, hooks, form functionality, date pickers and charts. The hooks are the most compelling, providing general utilities for building components.
Mantine does make it so you learn Mantine instead of React which is
a major disadvantage for why we might step away from it in the future.
But as of now,
it provides good general use defaults until a more specialised tool is needed.
DigitalOcean might not have a generous free tier, but it does have a platform for deploying web apps, websites, web workers, serverless functions and managed databases at predictable prices. Predictable prices makes sure our organisation doesn't overspend and protects us from being billed by DDOS.
TODO
TODO