[{"data":1,"prerenderedAt":216},["ShallowReactive",2],{"project-/projects/2025-10-frederiksberg-kommune-een-indgang":3},{"id":4,"title":5,"body":6,"description":191,"extension":192,"meta":193,"navigation":211,"path":212,"seo":213,"stem":214,"__hash__":215},"content/en/projects/2025-10-frederiksberg-kommune-een-indgang.md","Frederiksberg Kommune — Een Indgang",{"type":7,"value":8,"toc":187},"minimark",[9,95,101],[10,11,12,13,19,20,24,25,30,31,35,36,40,41,46,47,52,53,58,59,63,64,68,69,74,75,79,80,84,85,89,90,94],"p",{},"I was hired by ",[14,15,18],"span",{"className":16},[17],"color-light-blue","Frederiksberg Kommune"," to build the new ",[14,21,23],{"className":22},[17],"Een Indgang"," platform — a modern, citizen‑facing service that streamlines access to municipal services and event permits. Built with ",[14,26,29],{"className":27},[28],"color-zest","Nuxt 4"," and ",[14,32,34],{"className":33},[28],"TypeScript",", the solution delivers a robust full‑stack architecture with a type‑safe ",[14,37,39],{"className":38},[28],"tRPC"," API, data modeling via ",[14,42,45],{"className":43},[44],"color-sun","Drizzle"," on ",[14,48,51],{"className":49},[50],"color-electric","PostgreSQL",", and strict validation using ",[14,54,57],{"className":55},[56],"color-lavender","Zod",". The app provides secure OIDC authentication with ",[14,60,62],{"className":61},[56],"MitID"," (via Nets eID Broker), state management through ",[14,65,67],{"className":66},[44],"Pinia",", and a visual, drag‑and‑drop planning experience for placing stages, booths, and facilities on location maps. Accessibility, localization, and reliability are first‑class through ",[14,70,73],{"className":71},[72],"color-bright-green","WCAG 2.1"," patterns, ",[14,76,78],{"className":77},[28],"i18n",", end‑to‑end tests with ",[14,81,83],{"className":82},[72],"Playwright",", and CI/CD on ",[14,86,88],{"className":87},[17],"GitHub Actions"," with ",[14,91,93],{"className":92},[17],"Docker",".",[10,96,97],{},[98,99,100],"strong",{},"Key contributions:",[102,103,104,115,122,135,138,149,159,166,176,184],"ul",{},[105,106,107,108,111,112],"li",{},"Designed the full‑stack architecture with ",[14,109,29],{"className":110},[28],", server routes, and type‑safe ",[14,113,39],{"className":114},[28],[105,116,117,118,121],{},"Implemented OIDC auth with ",[14,119,62],{"className":120},[56]," via Nets eID Broker",[105,123,124,125,46,128,131,132],{},"Modeled the domain with ",[14,126,45],{"className":127},[44],[14,129,51],{"className":130},[50]," and validation with ",[14,133,57],{"className":134},[56],[105,136,137],{},"Built a drag‑and‑drop map planning UI for event artifacts (stages, booths, facilities)",[105,139,140,141,144,145],{},"Established state and data flows with ",[14,142,67],{"className":143},[44]," and composables using ",[14,146,148],{"className":147},[28],"VueUse",[105,150,151,152,155,156],{},"Added ",[14,153,78],{"className":154},[28]," and implemented accessible UI patterns to meet ",[14,157,73],{"className":158},[72],[105,160,161,162,165],{},"Set up testing with ",[14,163,83],{"className":164},[72]," plus linting/formatting (ESLint/Prettier)",[105,167,168,169,172,173],{},"Automated CI/CD with ",[14,170,88],{"className":171},[17]," and containerization via ",[14,174,93],{"className":175},[17],[105,177,178,179],{},"Implemented transactional emails through ",[14,180,183],{"className":181},[182],"color-ruby","Sendgrid",[105,185,186],{},"Delivered documentation, admin workflows (status changes, edits), and handover to the municipal team",{"title":188,"searchDepth":189,"depth":189,"links":190},"",2,[],"I was hired by Frederiksberg Kommune to build the new Een Indgang platform — a modern, citizen‑facing service that streamlines access to municipal services and event permits. Built with Nuxt 4 and TypeScript, the solution delivers a robust full‑stack architecture with a type‑safe tRPC API, data modeling via Drizzle on PostgreSQL, and strict validation using Zod. The app provides secure OIDC authentication with MitID (via Nets eID Broker), state management through Pinia, and a visual, drag‑and‑drop planning experience for placing stages, booths, and facilities on location maps. Accessibility, localization, and reliability are first‑class through WCAG 2.1 patterns, i18n, end‑to‑end tests with Playwright, and CI/CD on GitHub Actions with Docker.","md",{"client":18,"dateFrom":194,"dateTo":195,"type":196,"skills":197,"role":202,"link":203,"images":204},"2025-08-01","2025-12-01","Freelance",[29,198,199,45,57,67,200,83,73,88,93,201,78],"Typescript","Figma","trpc","oidc","Full Stack Developer","https://www.frederiksberg.dk/",[205,206,207,208,209,210],"images/projects/frederiksberg-kommune/fk-een-indgang-1.avif","images/projects/frederiksberg-kommune/fk-een-indgang-2.avif","images/projects/frederiksberg-kommune/fk-een-indgang-3.avif","images/projects/frederiksberg-kommune/fk-een-indgang-4.avif","images/projects/frederiksberg-kommune/fk-een-indgang-5.avif","images/projects/frederiksberg-kommune/fk-een-indgang-6.avif",true,"/en/projects/2025-10-frederiksberg-kommune-een-indgang",{"title":5,"description":191},"en/projects/2025-10-frederiksberg-kommune-een-indgang","AqZxO5gHzlwW78jsG9km8hjX10HUVeGr2SExlX3FonU",1779177083464]