{"id":37891452,"url":"https://github.com/vektorprogrammet/dashboard","last_synced_at":"2026-01-16T16:56:41.522Z","repository":{"id":281668993,"uuid":"874714394","full_name":"vektorprogrammet/dashboard","owner":"vektorprogrammet","description":"Vektorprogrammets interne dashboard applikasjon","archived":false,"fork":false,"pushed_at":"2026-01-10T21:44:57.000Z","size":720,"stargazers_count":0,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-01-11T01:34:12.388Z","etag":null,"topics":["react","react-router","shadcn-ui","tailwindcss","typescript","webapp"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vektorprogrammet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-10-18T10:27:51.000Z","updated_at":"2025-09-29T16:16:16.000Z","dependencies_parsed_at":"2025-04-10T11:33:25.431Z","dependency_job_id":"79024541-4786-4644-8337-38bb3d1ca22e","html_url":"https://github.com/vektorprogrammet/dashboard","commit_stats":null,"previous_names":["vektorprogrammet/dashboard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vektorprogrammet/dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vektorprogrammet%2Fdashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vektorprogrammet%2Fdashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vektorprogrammet%2Fdashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vektorprogrammet%2Fdashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vektorprogrammet","download_url":"https://codeload.github.com/vektorprogrammet/dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vektorprogrammet%2Fdashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28480081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router","shadcn-ui","tailwindcss","typescript","webapp"],"created_at":"2026-01-16T16:56:41.444Z","updated_at":"2026-01-16T16:56:41.509Z","avatar_url":"https://github.com/vektorprogrammet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vektor Dashboard\n\nVektor dashboard web app built for internal team members of Vektorprogrammet.\n\n## Workflow\n\n### Programs needed to run project\n\n- [node](https://nodejs.org/en)\n- [pnpm](https://pnpm.io/)\n\n### Installation\n\nInstall the required external dependencies:\n\n```sh\npnpm install\n```\n\n### Run locally\n\nRun the dev server:\n\n```sh\npnpm dev\n```\n\n### Linting and formatting\n\nCheck for linting errors and apply safe fixes:\n\n```sh\npnpm lint\n```\n\nCheck for formatting errors and apply safe fixes:\n\n```sh\npnpm format\n```\n\nDo both in one check:\n\n```sh\npnpm check\n```\n\n### Testing\n\nInstall required browsers for running e2e tests:\n\n```sh\npnpm e2e:install\n```\n\nRun all tests:\n\n```sh\npnpm e2e:test\n```\n\nUse the `ui` flag to watch the tests:\n\n```sh\npnpm exec playwright test --ui\n```\n\nRun tests for individual browsers:\n\n| Google Chrome | Firefox | Safari |\n| --- | --- | --- |\n|`pnpm e2e:test:chromium`|`pnpm e2e:test:firefox`|`pnpm e2e:test:webkit`|\n\nGenerate tests interactively:\n\n```sh\npnpm e2e:test:generate\n```\n\nRead more in the [docs](https://playwright.dev/docs/codegen).\n\n### Deployment\n\nFirst, build your app for production:\n\n```sh\npnpm build\n```\n\nThen run the app in production mode:\n\n```sh\npnpm start\n```\n\nNow you'll need to pick a host to deploy it to.\n\n## File structure\n\n- `dashboard/`: root folder with configuration files and subfolders\n  - `.github/`: GitHub config like CI/CD workflows and PR templates\n  - `.react-router/`: autogenerated types from React Router\n  - `.vscode/`: Local per user workspace settings for those using VSCode\n  - `app/`: All source code for the web app\n    - `__tests__/`: End-to-end tests for full pages or user stories\n    - `components/`: Common components used in multiple pages. Encapsulates features into singular units.\n      - `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.\n    - `hooks/`: Common React hooks reused in multiple pages\n    - `lib/`: Common code reused in multiple pages\n    - `mock/api/`: Mock api data\n    - `routes/`: Page components rendered by our router. This includes common layouts and should try to reflect either the routing or grouping of responsibilities as close as possible. If the component uses router apis, then it should most likely lie here.\n    - `globals.css`: Style variables accessable throughout the whole app. Mainly configuration of Tailwind and CSS variables.\n    - `root.tsx`: Root HTML rendered for ALL pages. Contains global metadata, styles and providers.\n    - `routes.ts`: Routing declared through the React Router routes API. Check out the [docs](https://reactrouter.com/start/framework/routing) for an in-depth explanation of the API.\n  - `build/`: Build artifacts for deploying the app to servers\n  - `public/`: Assets requiring no processing, clients download these files as is.\n\n## Improve your workflow\n\n### VSCode Profiles\n\nSeparate your settings and extensions based on the projects\nyou're working on or your different responsibilities with [VSCode Profiles](https://code.visualstudio.com/docs/editor/profiles)\n\n### VSCode Extensions\n\nMaintain consistent coding styles in teams [`EditorConfig.EditorConfig`](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)\n\nMake TypeScript errors readable with [`YoavBls.pretty-ts-errors`](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)\n\n#### Intellisense (Autocomplete)\n\n- Module imports: [`christian-kohler.npm-intellisense`](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)\n- Tailwind classes: [`bradlc.vscode-tailwindcss`](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)\n- Iconify icons: [`antfu.iconify`](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)\n\nRead more about [Intellisense](https://code.visualstudio.com/docs/editor/intellisense)\n\n#### Run unit tests in VSCode\n\n[`vitest.explorer`](https://marketplace.visualstudio.com/items?itemName=vitest.explorer)\n\n#### Run and record e2e tests in VSCode\n\n[`ms-playwright.playwright`](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright)\n\n#### Format files automatically\n\nInstall the official Biome extension [`biomejs.biome`](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)\n\nConfigure the VSCode workspace settings:\n\n```jsonc\n// .vscode/settings.json\n{\n  // Set default formatter to Biome\n  \"editor.defaultFormatter\": \"biomejs.biome\",\n  // Format on save\n  \"editor.formatOnSave\": true,\n  // On save:\n  \"editor.codeActionsOnSave\": {\n    // add missing imports\n    \"source.addMissingImports.ts\": \"always\",\n    // organise imports\n    \"source.organizeImports\": \"always\"\n  },\n}\n```\n\n### Write HTML blazingly fast with Emmet\n\nEmmet provides snippets and abbreviations to write HTML tags quickly.\nEmmet is included by default with VSCode, so you don't need an extension!\n\nRead about Emmet in VSCode [here](https://code.visualstudio.com/docs/editor/emmet)\n\n### Improve your Git experience with Source Control\n\nSource Control in VSCode provides a visual UI for interacting with Git.\nPersonally, this vastly improves the experience learning Git.\nOnce you've learned Git commands through Source Control,\nthen you can decide whether to memorise the commands for the terminal.\n\nRead more about Source Control [here](https://code.visualstudio.com/docs/sourcecontrol/overview)\n\n## Philosophy\n\nWe are a voluntary IT-group for Vektorprogrammet at NTNU.\nOur team consists of people who study a variation of fields,\nwith widely different experiences with web development.\n\nVektor IT's main goal will therefore always be learning\nweb development in a fun way,\nsecondary to the maintenance of the website.\n\nWhen choosing what technologies to work with we evaluate:\n\n- What problem does this tool solve?\n- Does this problem have a de facto standard solution?\n  - If so, why are/aren't we choosing the standard?\n- Is this tool included in the web development curriculum at NTNU?\n\n## Tech-stack\n\n### Technologies\n\n| Use case | Official docs | Our reasoning |\n| --- | --- | --- |\n| Programming language: | [TypeScript](https://www.typescriptlang.org/) | [the language of the web](#typescript-language-of-the-web) |\n| Component framework: | [React](https://react.dev/) | [helps us re-use code](#react-helps-us-re-use-code) |\n| Build tool: | [Vite](https://vite.dev/) | [makes build configuration a problem of the past](#vite-makes-build-configuration-a-problem-of-the-past) |\n| Router/Meta-framework: | [React Router v7](https://reactrouter.com/dev/guides) | [expands our app over multiple pages](#react-router-expands-our-app-over-multiple-pages) |\n| Style system: | [Tailwind](https://tailwindcss.com/) | [simplifies styling and makes everything pretty](#tailwind-simplifies-styling-and-makes-everything-pretty) |\n| Icon library: | [Iconify](https://iconify.design/) | [does for icons what Tailwind did for CSS](#iconify-centralises-icons-and-eliminates-the-need-for-any-more-icon-dependencies) |\n| Linter, Formatter: | [Biome](https://biomejs.dev/) | [eliminates bugs pre-emptively and keeps code consistent](#biome-eliminates-bugs-preemptively-and-keeps-code-consistent) |\n| Component collection: | [Shadcn/ui](https://ui.shadcn.com/) | [starts us off on the right foot](#shadcnui-starts-us-off-on-the-right-foot) |\n| Headless components: | [Radix UI](https://www.radix-ui.com/) | [provides functional and accessible primitives](#radix-primitives-provides-functional-and-accessible-primitives) |\n| e2e test runner | [Playwright](https://playwright.dev/) | [makes sure everything works as intended](#playwright-makes-sure-everything-works-as-intended)\n| Package manager: | [pnpm](https://pnpm.io/) | [reduces the black hole that is node_modules](#pnpm-reduces-the-black-hole-that-is-node_modules) |\n| All-in-one component library: | [Mantine](https://mantine.dev/) | [fills in the remaining holes](#mantine-fills-in-the-remaining-holes) |\n\n### External Services\n\n| Use case | Official docs | Our reasoning |\n| --- | --- | --- |\n| Deployment | [DigitalOcean](https://www.digitalocean.com/) | [provides an all-in-one hosting solution with predictable prices](#digitalocean-provides-an-all-in-one-hosting-solution-with-predictable-prices) |\n| Auth management | [Clerk](https://clerk.com/) | [makes setting up auth fast and secure](#clerk-makes-setting-up-auth-fast-and-secure) |\n| Analytics and Feature flags | [Posthog](https://posthog.com/) | [gives insight into our users behavior](#posthog-gives-insight-into-our-users-behavior) |\n\n## Resources\n\n- Learn web dev by creating your own projects [The Odin Project](https://www.theodinproject.com/)\n- The unofficial web development bible [MDN Web Docs](https://developer.mozilla.org/en-US/)\n- Find out the standards on web accessibility [W3C Web Accessibility Initiative](https://www.w3.org/WAI/)\n\n## Decisions\n\n### TypeScript, language of the web\n\nTypeScript reduces runtime errors to red squiggles in your editor.\\\nTypeScript helps your text editor or IDE autocomplete your code with intellisense.\n\nTypeScript was chosen as our programming language for both backend and frontend problems.\\\nJavaScript is the most used language on the web,\nand TypeScript (for application developers) is effectively JavaScript but better (with types).\n\nIt is also the language used in NTNU's curriculum.\n\n### React helps us re-use code\n\nReact was chosen as our component framework as it is the de facto\nstandard while also being included in NTNU's curriculum.\n\n### Vite makes build configuration a problem of the past\n\nDuring the 2020s Vite became the de facto standard build tool\nfor building applications with React.\\\nIt solves the problem of building applications with React.\\\nIt is included in NTNU's curriculum.\\\nTherefore, there is no reason to choose any other build tools.\n\n### React Router expands our app over multiple pages\n\nReact Router was chosen as our router solution as it is widely used\nand\nit is included in NTNU's curriculum.\n\n### Tailwind simplifies styling and makes everything pretty\n\nTailwind was chosen as our style system as it is currently\nthe de facto standard for styling modern web applications.\nIt is incredibly efficient, only bundling the classes used within the application.\n\nIt is included in NTNU's curriculum.\n\n### Biome eliminates bugs preemptively and keeps code consistent\n\nBiome was chosen over Prettier and ESlint because configuring ESlint\ntakes an ungodly amount of time.\\\nESlint might have extensible configuration,\nbut Biome ships with great defaults and incredible performance.\\\nUsing 1 tool for 2 problems also reduces the amount of packages we depend on, which reduces the surface area for attack and accidental bugs.\n\n### Iconify centralises icons and eliminates the need for any more icon dependencies\n\nIconify provides a single component for displaying icons,\nover 200,000 icons to use while shipping none of them in our app bundle.\\\nIcons are fetched on the client from Iconify's api when needed and\ncached in local storage to reduce unnecessary network requests.\n\nIconify does for icons what Tailwind did for CSS.\n\n### shadcn/ui starts us off on the right foot\n\nshadcn/ui is not a dependency,\nbut a collection of copy-pastable components,\nproviding a great starting point for building UIs.\\\nshadcn/ui uses tools we already have decide to use so it fits nicely\nwithin our \"stack\".\n\n### Radix Primitives provides functional and accessible primitives\n\nRadix Primitives is a collection of headless (unstyled) components\nso commonly used within web apps they have standards for accessibility.\\\nRadix Primitives adhere to the\n[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) accessibility practices.\\\nRadix Primitives is used in the component collection shadcn/ui provides.\\\nIn house UI components should use Radix Primitives when possible.\n\n### Playwright makes sure everything works as intended\n\nPlaywright does e2e testing by running all tests in the different major browsers.\nThis is our most important way of testing as functionality is tested in the\nsame environment users interact with the application in.\n\n### pnpm reduces the black hole that is node_modules\n\npnpm install and manages packages globally while reducing unnecessary\nmerge conflicts and providing a readable lock file when they eventually do happen.\npnpm is essentially npm but better at the cost of one character\n\n### Mantine fills in the remaining holes\n\nMantine provides pre-built components, hooks, form functionality,\ndate pickers and charts.\nThe hooks are the most compelling,\nproviding general utilities for building components.\n\nMantine does make it so you learn Mantine instead of React which is\na major disadvantage for why we might step away from it in the future.\\\nBut as of now,\nit provides good general use defaults until a more specialised tool is needed.\n\n### DigitalOcean provides an all-in-one hosting solution with predictable prices\n\nDigitalOcean might not have a generous free tier,\nbut it does have a platform for deploying web apps,\nwebsites, web workers, serverless functions and managed databases at predictable prices.\nPredictable prices makes sure our organisation doesn't overspend and\nprotects us from being billed by DDOS.\n\n### Clerk makes setting up auth fast and secure\n\nTODO\n\n### Posthog gives insight into our users behavior\n\nTODO\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvektorprogrammet%2Fdashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvektorprogrammet%2Fdashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvektorprogrammet%2Fdashboard/lists"}