--- title: "Web app implementation" url: "https://wzor.biz/en/services/wdrozenie-aplikacji-webowej/" description: "Front-end implementation for web apps: SaaS, operations panels, CRM. React and TypeScript, API integrations, roles and permissions, your repository." lang: "en" --- # Web app implementation [Free consultation](https://wzor.biz/en/free-consultation/) [Projects](https://wzor.biz/en/projects/) We turn the Figma file into a working app in the browser - a front end in React and TypeScript, wired to your API, with roles, permissions and edge cases handled on screen rather than in a comment on the mockup. We have worked with leading companies and startups Challenges ## Three moments when it pays to hand the front end outside Not sure whether you need a coded front end or a platform without programming will do? [See the no-code rollout](https://wzor.biz/en/services/wdrozenie-no-code/) or [book a call](https://wzor.biz/en/free-consultation/) - we will say plainly when code is overkill. - „The project is stuck between Figma and the backlog” The mockups are signed off, but the engineering team is booked for quarters ahead and the front end only enters the plan two releases from now. We take over the browser layer while your engineers stay with the API and the business logic nobody from outside would take over better anyway. - „The operations panel grew screens nobody designed” The internal tool was built feature by feature, each one added by a different engineer under the pressure of a ticket. Today handling a single order takes three tabs and tribal knowledge. We redesign and reimplement the front layer module by module, on the same API. - „The backend is ready, there is nobody to write the front end” You have the API, the database and a team that maintains them, but nobody to build an interface above the level of a raw table. We come in with a pair - a designer plus a front-end developer - and close the layer the user actually sees, without hiring for a permanent role. Who it is for ## Who we implement web apps for - ### SaaS companies whose product rests on a single engineer The backend moves faster than the front end can expose it, and every new capability ends up in the interface as one more tab glued on by someone busy with other work. We take over the browser layer and organise it into a library of views, so adding a feature stops meaning adding more mess. - ### Operations teams working out of spreadsheets and internal tools Daily work happens across a few spreadsheets, email and a system nobody has full documentation for, and mistakes surface at the client. We assemble one panel in the browser out of that, starting with the process that costs the team the most switching between tools. - ### Vendors of industry systems moving into the browser The system has run for years as an application installed on a workstation, and clients now ask for laptop access and for several people working at once. We build the web layer on the existing logic, module by module, so the old and the new version can run side by side for a while. - ### Software houses that need a front end subcontracted The project is sold, the backend is staffed, and the browser layer is slipping because the hands or the design skills are missing. We work under your brand, in your repository and your release rhythm, and the client relationship stays on your side. ![Four printed interface layouts on a desk: a dashboard, a phone screen, a form and a table, with one block circled in marker](https://wzor.biz/_astro/dla-kogo-wydruki-ekranow.GsgQefUA_1bzGfa.webp) Our difference ## What makes our implementation different - ### The data contract is written before the first screen Before a view exists, we settle with your backend which fields arrive, what may be empty, what an error looks like and how the front end learns about a user's permissions. It is a week of work that removes the most expensive category of rework - rebuilding finished screens because the data looks nothing like the mockup assumed. - ### Designer and developer are one pair here, not two stages The same pair carries the project from mockup to release, so the decision about a table layout is made knowing how many records the API really returns. There is no hand-off between departments where half the design intent gets lost. - ### Empty states and errors are designed with the view, not after it Every screen gets a full set of states - loading, no data, no permission, dropped connection, a list too long - designed at the same time as the happy path. They decide how the app feels in daily work, and in most rollouts they get added at the end, in a hurry. - ### The repository is yours from the first commit We work in your repository, under your code review rules, with conventions written down in the project. The end of the engagement is then not a handover of a package, but simply us stepping out of a project that was on your side all along. Process ## 6-14 weeks from the data contract to the release. In modules, not one leap 1. Week 1 ### Technical kick-off and the data contract A review of what already exists: the API, the data model, user roles, infrastructure constraints. We write down the contract between the front end and the backend - which fields, which states, which error codes - and split the scope into modules with a release order. 2. Week 1–3 ### App skeleton and the library of views Setting the project up in your repository - routing, navigation shell, session, permission handling. Plus the first set of components the rest of the app will stand on: table, form, modal, notification, empty state. 3. Week 3–9 ### Modules and integrations Modules land one at a time, each immediately wired to real data and shown on the staging environment. Instead of a demo at the end of the project you get a working slice of the app every two weeks and can correct course before it grows. 4. Week 8–12 ### Permissions, edge cases, performance A pass through the roles - what an admin, an operator and an external user each see - and through the situations that do not exist in a mockup: no data, a dropped connection, a very long list, a write conflict. End-to-end tests for the most important paths go into the pipeline. 5. Week 12–14 ### Release and hand-off Production environment setup, error monitoring, release. A hand-off session with your team - architecture, conventions, where to add a new module - plus component documentation and thirty days of support. Deliverables ## Three things. A working front end, connected data, the repository yours - ### The app's front end in code App screens built in React and TypeScript - tables with filtering and pagination, multi-step forms with validation, detail views, search. Not individual pages, but a library of views you assemble the next modules from. - ### Integrations and the data layer Wiring to your API (REST or GraphQL), login and session handling, roles and per-permission visibility of features, error handling and retries. When the API is still being built, we write down the contract and work against mocked responses so the front end does not wait for the backend. - ### Repository, environments and documentation From day one the code lives in your repository, not ours. Plus a staging and a production environment, a release pipeline, end-to-end tests for the key paths and component documentation. Thirty days of support after the release. Toolkit ## What we use We pick the stack around what you already maintain, not around what we happen to like most. Below is the default set we start the conversation from. ![A workbench from above: two printed interface layouts, a magnifier enlarging one block, a steel ruler and a greyscale step wedge running from white to black, with one line underlined in orange marker](https://wzor.biz/_astro/warsztat-lupa-linijka-skala-szarosci.C5DINzRJ_Z2n7L7C.webp) - React and TypeScript (Next.js or Vite) - REST or GraphQL, the contract written before the code - OAuth 2.0 and SSO login, roles enforced in the view - WCAG 2.2 AA and full keyboard support - End-to-end tests in Playwright, wired into CI - Docker, CI/CD, staging and production environments Next step ## Let us talk about your project Tell us what you have to do. We will come back with scope and a quote. [Free consultation](https://wzor.biz/en/free-consultation/) [Projects](https://wzor.biz/en/projects/) Selected work ## Projects from the products we implement A selection of projects from the kinds of products we most often come into with an implementation - web apps, operations panels and internal systems. Some rollouts sit behind a login or ship under the client's brand, so we show those during a consultation. - [ ![WygodnaDieta - a phone showing the app's home screen: an "Excellent" Trustpilot rating and a "Menu-Choice Diet" plan card priced from PLN 80.90/day, against a red gradient with vegetables.](https://wzor.biz/_astro/cover.BfmwIntu_1CFKMk.webp) WygodnaDieta - App and online store for a meal-box diet service ](https://wzor.biz/en/projects/wygodna-dieta/) - [ ![NeoBank - three phones on a green background with the brand wordmark behind them: payment cards, a dashboard showing 27,568.89 PLN available with transfer shortcuts, and a savings goal at 61%.](https://wzor.biz/_astro/cover.cTNj7kPE_Z2t5E6w.webp) NeoBank - A banking app concept for young customers ](https://wzor.biz/en/projects/neobank/) - [ ![myAzymut - a monitor with a map of Europe and shipment routes between cities, a "Fleet signal" panel listing vehicles with no signal and with a delayed signal, and a timeline at the bottom; a night-time motorway junction and a large myAzymut wordmark in the background.](https://wzor.biz/_astro/cover.CMSoXGtF_Kvont.webp) myAzymut - Client portal concept for a freight carrier ](https://wzor.biz/en/projects/myazymut/) - [ ![Puls CRM - the wordmark with a blue pulse line above a monitor showing the "Deals" screen: a side menu, the sales pipeline kanban with the columns New, In talks, Proposal and Won, and deal cards with company, value and days in stage; light blue waves in the background.](https://wzor.biz/_astro/cover.B_Q_VQbe_1ERf64.webp) Puls CRM - CRM app concept for a sales team ](https://wzor.biz/en/projects/puls-crm/) - [ ![Flotino - a loan calculator and the "Who is our online loan for?" screen on phone mock-ups, against blurred colourful shapes.](https://wzor.biz/_astro/cover.BIgugYRo_ZeHyg7.webp) Flotino - Online cash loan service ](https://wzor.biz/en/projects/flotino/) - [ ![PWS Konstanta - the homepage on a laptop mock-up: a hero "The highest quality of insurance backed by experience" with a photo of a column capital and a "30 years" badge.](https://wzor.biz/_astro/cover.CtYGmRYj_Z2gVAJr.webp) PWS Konstanta - Website for an insurance broker ](https://wzor.biz/en/projects/pw-konstanta/) - [ ![Fonia - two phones on a teal background: the cashback app home screen with a 325.53 PLN balance and a list of partner stores, next to a store search with suggestions for Empik, Booking, AliExpress and Play.](https://wzor.biz/_astro/cover.DdIowm6o_Z12riqx.webp) Fonia - A cashback app for online shoppers ](https://wzor.biz/en/projects/fonia/) - [ ![EzzyGuide - three phones on a dark background: a sign-up confirmation, guide Małgorzata Iwańska's profile with a star rating, and tour details for "In the Footsteps of the Wrocław Dwarves" with the price and contact details.](https://wzor.biz/_astro/cover.DW1rNgrl_ca7w6.webp) EzzyGuide - A tours app connecting guides with travellers ](https://wzor.biz/en/projects/ezzyguide/) - [ ![VERSA - the B2B panel for an automotive parts distributor open on a hand-held tablet: the account overview, a shipment tracking map, the partner programme at 30% off, order history and a list of popular products.](https://wzor.biz/_astro/cover.DWv2CO5n_Z27qwnC.webp) VERSA - B2B panel concept for a parts distributor ](https://wzor.biz/en/projects/panel-b2b-versa/) - [ ![Tip Card - two phones: the client panel ("Hi Barbara", earnings 350 PLN, withdraw) and the "Boost your tips with Tip Card!" landing with personalised QR cards, on a colourful gradient background.](https://wzor.biz/_astro/cover.DTw-Pu6y_4lOMF.webp) Tip Card - Cashless tipping platform ](https://wzor.biz/en/projects/tip-card/) - [ ![Jawny Lublin - a laptop showing the portal home page: the lead article, the city category menu and a column of popular stories.](https://wzor.biz/_astro/cover.DReNwwRw_1JC914.webp) Jawny Lublin - A watchdog portal on city transparency ](https://wzor.biz/en/projects/jawny-lublin/) - [ ![NXC Liquid Cooling - the opening screen on a laptop, beside an angled phone showing a process stage and the brand orb, on a violet ground.](https://wzor.biz/_astro/cover.D5gcxP4g_Z1zSAqQ.webp) NXC Liquid Cooling - A liquid cooling systems website ](https://wzor.biz/en/projects/nxc-liquid-cooling/) - [ ![Bosfor BALI Dealer - a monitor and a phone showing the catamaran dealer site: the "BALI is about comfort" hero with a catamaran and the "dreams are meant to be fulfilled" line.](https://wzor.biz/_astro/cover.DGxZT243_Z1A6GRy.webp) Bosfor BALI Dealer - Website for a BALI catamaran dealer ](https://wzor.biz/en/projects/bosfor-bali/) - [ ![Bosfor Charter - a tablet showing the yacht charter platform: a photo of a couple on a yacht and a search widget (number of weeks, dates, yacht type, "Search"), against a sea backdrop.](https://wzor.biz/_astro/cover.DHPu_e5c_Zgsk30.webp) Bosfor Charter - Yacht charter platform with booking ](https://wzor.biz/en/projects/bosfor-charter/) - [ ![SPEC Food Service - a monitor and a phone showing the site: the "Your trusted partner in the world of gastronomy" hero with kitchen photos and a render of the company building, on a light background.](https://wzor.biz/_astro/cover.DdJ4QOy5_22gHR2.webp) SPEC Food - Website for gastronomy - SPEC Food Service ](https://wzor.biz/en/projects/spec-food-service/) - [ ![Thaliana Space - a tablet showing the space company site: the "Propelling new era of space" hero with a planet and stars, on black.](https://wzor.biz/_astro/cover.CULgsv9m_1E9sVv.webp) Thaliana Space - Website for a space-propulsion company ](https://wzor.biz/en/projects/thaliana-space/) - [ ![Wolumen - the "Offer" step of the energy price comparison: three tariff options with per-kWh rates, a contract-length picker and a discount-code field, beside an account statistics card showing 34,225 zł of savings and the electricity and gas prices; on a blue background.](https://wzor.biz/_astro/cover.CpuQAJvX_ZyCKhF.webp) Wolumen - Energy and gas price comparison for businesses ](https://wzor.biz/en/projects/wolumen/) - [ ![Econverse - two phones showing the event website: the "Bilet do świata start-upów" hero and the "how to sign up" section, on a purple background.](https://wzor.biz/_astro/cover.B94izcES_7kHPe.webp) Econverse - Website for a start-up event ](https://wzor.biz/en/projects/econverse-strona/) - [ ![DentAg - a phone and a tablet showing the dental clinic site: the "kindness and professionalism" hero with a photo of a dentist, on blue.](https://wzor.biz/_astro/cover.-U2qFI7e_1odNAb.webp) DentAg - Website for a dental clinic in Radom ](https://wzor.biz/en/projects/dentag/) - [ ![AIESEC - a tablet and a laptop showing the home page: the "go on an internship with AIESEC" hero, a mosaic of participant photos and the "go on an internship or volunteer" and "become our partner" buttons.](https://wzor.biz/_astro/cover.Bju2-F43_Z1bbDVk.webp) AIESEC - Website for internships and volunteering abroad ](https://wzor.biz/en/projects/aiesec/) - [ ![QSAN (DAGMA) - a laptop and a phone showing the product page: the "flagship Unified Storage model" hero with a disk array, on a dark background with a green accent.](https://wzor.biz/_astro/cover.DKpQ_Ne6_Z1Itgbp.webp) DAGMA - Product page for disk arrays and storage systems ](https://wzor.biz/en/projects/dagma/) - [ ![Bosfor Group - a laptop showing the sailing group site: the "Your adventure at sea begins with Bosfor Group" hero with a catamaran, against a sea backdrop.](https://wzor.biz/_astro/cover.C0etgjfR_Z1t33er.webp) Bosfor Group - Website for the Bosfor sailing group ](https://wzor.biz/en/projects/bosfor-group/) - [ ![Mobilizacja Biznesu - a monitor and a phone showing the company site: the "Experience you can trust" hero with mobile-app mockups, on a dark background with a blue accent.](https://wzor.biz/_astro/cover.CaV1NQ00_Z17Sc3N.webp) Mobilizacja Biznesu - Website for a mobile-tools firm ](https://wzor.biz/en/projects/mobilizacja-biznesu/) - [ ![Pro Sensum - a laptop and a phone showing the psychology-practice site: the "individual and group psychological therapy" hero with a photo of a therapy session, on a light background.](https://wzor.biz/_astro/cover.DCCqbSSm_27H8O4.webp) Pro Sensum - Website for a psychology practice ](https://wzor.biz/en/projects/pro-sensum/) [Projects](https://wzor.biz/en/projects/) Outcomes ## What you get, by when, and how you can verify it - 6–14 weeks From the data contract to the release - six weeks for a single module on a ready API, fourteen for a multi-role app with integrations - Every 2 weeks The rhythm in which the next working module lands on staging, so progress is something you open in a browser rather than read in a ticket status - WCAG 2.2 AA The public W3C accessibility standard we check forms, tables and keyboard navigation against before the release - 0 days How long the code hand-off takes with us, because the repository has been yours since the first commit and we work in it as co-authors The timings and release rhythm come from the schedule described above on this page, WCAG 2.2 AA is a public W3C standard. We do not quote averaged results from rollouts - client apps sit behind a login, so we show them by name during a consultation. Client voices ## What our clients say - > „Working with the Wzór team was a genuinely great experience! They always answered our questions quickly and were flexible about our comments. They have no shortage of creative ideas and are at the same time thoroughly reliable and on time. The end result fully met our expectations; we recommend them to anyone looking for professionals who care.” ![](https://wzor.biz/_astro/opinia.BrbzyDCf_1rSYiY.webp)Maja Wieloch-Silecka Operations Director, Bosfor Group - > „Our clients expect us to act fast and effectively across a very wide scope - from building a brand, through a website with a store, to running an effective sales campaign. Not an easy task, but doable when you have a tight-knit team and partners who take on challenges on the fly. For us, quality, accountability and commitment are key, and working with UX Agency Wzór gives us that 100%.” ![](https://wzor.biz/_astro/piotr-alberski.B09Ae7iY_Z19yEFs.webp)Piotr Alberski Chief Operating Officer, Agencja XO Media - > „Our cooperation with UX Agency Wzór started with our own website. We really liked the way they work, so we decided to subcontract projects for our clients to them on a White Label basis. We loved their workflow, the way they hand projects over to our team, their documentation and their work on the design system. Now we can take on bigger risks.” ![](https://wzor.biz/_astro/mateusz-swol.DkFG1xeC_1fOqLw.webp)Mateusz Swół Chief Operating Officer, Sellace The team ## Who runs the implementation The implementation is run by a pair - a designer responsible for the views and their states and a front-end developer who implements them in your repository. The same pair stays with the project through release and hand-off. - ![Aleksandra Bondar](https://wzor.biz/_astro/aleksandra-bondar.Bn8yt1m6_14BXcM.webp) ### Aleksandra Bondar Senior UX/UI Designer - ![Patryk Korycki](https://wzor.biz/_astro/patryk-korycki.D95uAkaq_Z9hpwb.webp) ### Patryk Korycki CEO, Analityk Biznesowy - ![Tadeusz Wadas](https://wzor.biz/_astro/tadeusz-wadas.W_mr3ido_Z20GQjB.webp) ### Tadeusz Wadas Senior UX/UI Designer Time and scope ## How long the implementation takes and what drives the quote 6–14 weeks Six weeks is one module on an existing, documented API - an admin panel over a ready backend, for example. Fourteen weeks and beyond is a multi-role app with several integrations and a user migration from the old system; there we split the work into releases so the first working module reaches you sooner. - The number of modules and unique views in the app - API maturity - ready and documented, or being built in parallel - The number of user roles and the scope of permissions to handle - Integrations with external systems, payments and identity providers - The starting point - a finished Figma design or designing from scratch - Whether a data and user migration ships together with the implementation FAQ ## Questions that come up most often How much does a web app implementation cost? We quote each project individually, because two apps with the same name can differ several times over in cost. The quote is driven by the number of modules and unique views, API maturity (ready and documented, or being built in parallel with the front end), the number of roles and the scope of permissions, integrations with external systems, and whether we start from a finished Figma design or design from scratch. After a short call and a look at the API documentation we send a concrete proposal within 48 hours. How is this different from a no-code rollout? In what the app is responsible for. A [no-code rollout](https://wzor.biz/en/services/wdrozenie-no-code/) covers marketing and lead-gen sites - content is the main material there, and the editorial team maintains it themselves in Webflow or WordPress. Here the material is data and processes - a user logs in, holds a role, filters a table of tens of thousands of records and saves something that has to reach the system on the other side. That cannot be assembled on a platform without code in a way that survives a year of development. Do you write the backend as well? Not in full, and we say so plainly - Wzór is a UX agency with development capability, not a software house with its own backend department. We take on the browser layer and the integrations: wiring to your API, login, session, permissions enforced in the view, error handling. When the backend does not exist yet, we help define the data contract and either point you to a partner or work with your own engineering team. What if the API is still being built? That is the most common scenario and it is not an obstacle. We start by writing down the contract - which fields arrive, what may be empty, what an error looks like, how the front end learns about permissions - and build the views against mocked responses. The front end and the backend then run in parallel, and connecting them is a matter of swapping an address, not rewriting screens. One condition: the contract has to be agreed together, not guessed by us. Which technology do you implement in? React and TypeScript by default, in Next.js or plain Vite, styled with Tailwind. It is not a dogma, though - if you already maintain apps in Vue or Angular and have a team that will take the code over from us, we implement in your stack. A technology nobody on your side can maintain is a worse choice than one that is not our first preference. Who owns the repository and the code once the engagement ends? You do, from the first commit rather than from the moment of hand-off. We work in your repository, under your code review rules, with the conventions written down in the project. That way the end of the engagement is not an event - there is no package to hand over, no migration, no week spent moving access around. What stays is documented code, tests and environment configuration. Will you take over an app somebody else wrote? Yes, after a code review. We start with a few days spent assessing the state of things - architecture, dependencies, tests, how state and permissions are handled - and say honestly whether it is worth developing what exists or cheaper to build a new layer next to the old one. More often than a full replacement, the second option works: new modules land one at a time and the old screens go dark in turn. Do you work white-label for software houses? Yes, it is one of our standing models. We come in as your front-end team - in your repository, your release rhythm and under your brand - and the relationship with the end client stays entirely on your side. Details: [/en/services/white-label/](https://wzor.biz/en/services/white-label/). Related services ## Related services - [UX Consulting](https://wzor.biz/en/services/konsultacje-ux/) - [Product discovery](https://wzor.biz/en/services/warsztaty-ux/) - [UX Audit](https://wzor.biz/en/services/audyty-ux/) - [UX Research](https://wzor.biz/en/services/badania-uzytkownikow/) - [Product Strategy](https://wzor.biz/en/services/strategia-produktu/) - [Technical Audit](https://wzor.biz/en/services/audyt-techniczny/)