Vektor Homepage

Vektorprogrammets homepage website

Required programs

• node v22
• pnpm v10

Scripts

pnpm install

Install required dependencies:

pnpm install

pnpm dev

Run the dev server:

pnpm run dev

pnpm check

Check for linting and formatting errors:

pnpm check

Apply safe fixes:

pnpm check:fix

Apply unsafe fixes:

pnpm check:fix:unsafe

pnpm lint

Check for linting errors:

pnpm lint

Apply safe fixes:

pnpm lint:fix

Apply unsafe fixes:

pnpm lint:fix:unsafe

pnpm format

Check for formatting errors:

pnpm format

Apply fixes:

pnpm lint:fix

Testing

Install required browsers for running e2e tests:

pnpm e2e:install

Run all tests:

pnpm e2e:test

Use the ui flag to watch the tests:

pnpm exec playwright test --ui

Run 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:generate

Read more in the docs.

Deployment

First, build your app for production:

pnpm run build

Then run the app in production mode:

pnpm start

Now you'll need to pick a host to deploy it to.

File structure

• dashboard/: root folder with configuration files and subfolders
  • .github/: GitHub config like CI/CD workflows and PR templates
  • .react-router/: autogenerated types from React Router
  • .vscode/: Local per user workspace settings for those using VSCode
  • build/: Build artifacts for deploying the app to servers
  • public/: Assets requiring no processing, clients download these files as is.
  • src/: All source code for the web app
    • __tests__/: End-to-end tests for full pages or user stories
    • components/: Common components used in multiple pages. Encapsulates features into singular units.
      • ui: Primitives acting as the foundational building blocks for composing larger features or sections, for example common layout components like headers, footers and sidebars, or features like a login modal. Most primitives originates from shadcn/ui and might be manually tweaked to our preferences.
    • hooks/: Common React hooks reused in multiple pages
    • lib/: Common code reused in multiple pages
    • routes/: React Router route modules with filenames following the flat route config https://reactrouter.com/how-to/file-route-conventions
    • index.css: Style variables accessable throughout the whole app. Mainly configuration of Tailwind and CSS variables.
    • root.tsx: Root HTML rendered for ALL pages. Contains global metadata, styles and providers.
    • routes.ts: React Router configuration. Check out the docs for an in-depth explanation of the API.