Module 1 · ListDashboards and internal tools
Tables, filters, charts and actions on your data, with each role's permissions.
Examples of deliverables
- Order dashboard
- Ticket board
- Customer view
Technology · Interfaces
Interface and application development with React
React is the library used to build the screens people work in: dashboards, search, long forms, lists that are filtered and edited. We develop those interfaces and connect them to your data, inside your website or as an application of their own.
Often combined with
Fig. 01Instrument deskLooping
Situations
What you can solve with a React interface
React pays off when a screen isn't for reading but for doing: someone filters, edits, saves and expects the answer without a reload.
A dashboard to look up and act
Orders, tickets or customers on one screen that filters, sorts and lets the task get done without leaving it.
A form that doesn't fit on one page
Several steps, fields that depend on others, validation as you type and a draft that isn't lost when the tab closes.
Search with filters
Catalogs and lists that respond as you type and combine criteria without reloading.
An inherited interface that is hard to change
Duplicated components, states that drift out of sync and bugs that are hard to reproduce. It is tidied up in parts, without stopping the product.
What to check before starting
- Which API or source provides the data, and how long it takes to answer
- What each type of user is allowed to do
- What happens when a request fails halfway
- Which browsers and devices it is really used on
Services
What we build with React
From a single screen inside your website to a product's whole set of components.
- Module 1 · List
Module 2 · StateComponents and design systems
Reusable, documented pieces such as buttons, tables, modals and forms, so every screen behaves the same way.
Examples of deliverables
- Component library
- Table with sorting and paging
- Accessible components
Module 3 · FiltersComplex forms
Steps, validation, conditional fields, saved drafts and error messages that say what is missing.
Examples of deliverables
- Multi-step sign-up
- Request with attachments
- Order configurator
Module 4 · DetailAPI connections
Loading, saving and updating data with its states in view: loading, saved, error and retry.
Examples of deliverables
- Reading and editing through an API
- Updates without reloading
- Errors and retries
A working example
Filter a list and edit a record
An illustrative example with made-up data. Filter by status, open an order, change something and save. One of the saves fails on purpose, so you can see what the interface shows when that happens.
Filter by status
Orders ·
No orders with that status.
Order detail
Pick an order from the list to view and edit it.
A mockup that runs in your browser: there is no server or database behind it, and the orders are invented.
Integration
How it fits with your systems
An interface stores nothing on its own. It needs somewhere to read from, somewhere to write to and a way to know who is in front of it.
Where it comes from
- Your system's API data and permissions
- The user's sessionwho they are and what they may do
- The interface design components and states
ReactReact interfaceshows, validates and sends
Where it goes
- Next.js application routes, server and sign-in
- Astro site components inside pages
- Mobile app part of the logic, with React Native
Dependencies worth checking
- Whether the API already exists or has to be built
- How the user is identified
- Which React version and libraries the current project uses
- Which data may be stored in the browser and which may not
How we work and what we deliver
How we run a React interface
- 01
Initial review
The current screens, the API available and the task the person repeats most often in a day.
- 02
Scope
Which screens and states are in: empty, loading, error and no permission count too.
- 03
First release
One complete screen connected to real data, usable from start to finish.
- 04
Validation
The person who will use it tests it with their own cases: the odd record, the slow connection, the missing permission.
- 05
Documentation
How to start the project, how to add a screen and what each component does.
What you get when the job closes
- The code in a repository in your name
- The components documented with their states
- Tests for the main flows
- A guide to run and deploy it
Questions
Questions about React
Missing yours? Write it to info@veodar.com and we'll reply with a specific question, not a brochure.
React or a content management system?
It depends on what the screen does. To publish pages, a CMS is enough. React pays off when the person works in the screen: they filter, edit, save and expect an immediate answer.
Can you work on a React application that already exists?
Yes. We start by reading the code and running it locally. If some parts are worth tidying before anything is added, we point them out with a specific reason, not out of taste.
Is React enough on its own for a public website?
What does my system need in order to connect?
An API that lets us read and write what the screen shows. If there isn't one, it can be built; that is separate work, best quoted on its own.
Will the interface be accessible?
It is built to be used with a keyboard and a screen reader, with visible focus, labels and enough contrast. We check that during development, not at the end.
Updated:
Other technologies
What it is combined with
- Next.js developmentApplications that combine public pages, user sign-in and server functions. Development and integration of the different parts of the project.
- Node.js backendAPIs, connections between systems and background processes. We automate the exchange of information between your website and your business tools.
- JavaScript programmingCalculators, filters, validation and interactions for your website. New features and problem-solving in the code you already have.
Get started
Tell us which screen you need.
The task done on it, where the data comes from and who will use it. That tells us where to start.
What helps us assess it
- What task the person does on that screen
- Where the data comes from
- Screenshots or a prototype, if they exist
- Who will use it, and with which permissions
Before you write, see how we price a project or our solutions by department.
Fig. 07Morse keyH · E · L · L · O