React web application development

What React is good for

React is a JavaScript library that builds the screen out of small, reusable components. It is strong in applications that people keep open all day, full of forms, tables, filters and charts: when data changes, only the affected part is redrawn, and a component written once is reused across dozens of screens.

Where React fits well

An admin dashboard, customer portal or internal tool that people use after logging in
A system where different roles, such as managers, staff and customers, look at the same data through their own screens
A reporting screen full of charts, tables and filters
You want the same team to build a mobile app later (with React Native)

Where we would not suggest React on its own

A marketing site of a few pages whose content rarely changes: plain HTML or a static site is enough
The main goal is for the pages to bring in visitors from search engines: then we use React with Next.js
Your team already has another front-end library (Vue, Angular) in place and it works well

React with Vite, or Next.js

Both are React; the difference is where the page is prepared. An app set up with Vite runs in the browser and is a simple, fast structure for dashboards behind a login. Next.js prepares pages as HTML on the server or at build time; we prefer it for pages that should draw visitors from search engines. Hippotenus has both side by side: the marketing site is Next.js, and the dashboard institutions use every day is Vite and React.

	Vite + React	Next.js
Where the page is prepared	In the browser	On the server or at build time
Search engine visibility	Not needed behind a login	Strong for public pages
Deployment	Built static files are served	A Node.js server or static output
Our example	Hippotenus dashboard, Logaritim	Atölye Tasarım, hippotenus.com

What React does in our products

The everyday interfaces of two of our live products are written in React. A few of the needs we solved in the code:

The Hippotenus web dashboard has separate groups of screens for admins, teachers, parents, students and super admins; a user who opens a page they have no permission for sees an access notice.
Mock-exam and performance analyses in the student dashboard are drawn with Recharts as radar, line and bar charts.
On the messaging screen, new messages, the “typing” indicator and read receipts arrive over Socket.IO without a page reload.
In the survey builder and the study planner, items are reordered by drag and drop (dnd-kit).
In Logaritim’s exam wizard, the paper preview updates as soon as columns, margins and student information fields are chosen; the exam and answer key PDFs are generated on the server and downloaded.
In a client project’s admin dashboard, screens and buttons are shown or hidden according to a permission tree, and records are shown clustered on a map.

Libraries we use alongside React

Vite

Development server and build tool. The Hippotenus dashboard, Logaritim and soruverse.com are built with Vite.

TanStack Query

Keeps server data in a cache and refreshes it when needed. In the Hippotenus dashboard the cache is also stored in the browser, so the latest data shows without waiting when the dashboard is reopened.

Recharts

Radar, line and bar charts in dashboards. We use it in Hippotenus and in the finance screens of a client project.

KaTeX

To display maths formulas properly in the browser. In Hippotenus and Logaritim, formulas in question texts are rendered with KaTeX.

Socket.IO

Messages and status updates that arrive without a page reload. We use it for messaging in the Hippotenus dashboard.

Vitest and Testing Library

To test components the way the user sees them. The Hippotenus dashboard’s components are tested with these tools.

How a React project runs

01
Free scoping call
30 min
We talk about who will use the application, which role sees which data and the budget you have in mind.
02
Written scope and quote
We write down the list of screens, the roles and permissions and the acceptance criteria; whether the app is built with Vite or Next.js is settled here too.
03
Weekly releases
Every week you open the working version in your own browser and try it; your comments decide the next week’s work.
04
Testing and release
Before release, a senior QA tests every role’s screens one by one.
05
The 30 days after launch
30 days
We fix the bugs that surface in this period free of charge; after that you can continue with monthly maintenance.

Timelines and budget ranges are published on our web application development and pricing pages; this page rests on the same figures.

Questions about React

Does an app written in React show up in search engines?

Dashboards behind a login don’t need to. Public pages need their HTML prepared in advance: either we use Next.js or we turn the pages into static HTML at build time. The pepechura.com site you are reading is written in React, and every page is pre-rendered this way.

Won’t the app slow down as it grows?

We split screens into separate bundles, so users download only the code for the page they open. In the Hippotenus dashboard, the chart and formula libraries are not loaded on first visit, and long conversations draw only the rows on screen. In Logaritim, frequently opened admin pages are downloaded in advance while the browser is idle.

Can the same team build the mobile app?

Yes. React Native uses the same component model as React. On Hippotenus, the team that writes the web dashboard in React is also developing the mobile app with Expo.

What do I own when the project is delivered?

A perpetual licence to use the software, and its documentation. Transferring the source code to you is also possible; the extra fee for it is listed as a separate line in the quote.

React web application development

What we have built with it

Hippotenus

Logaritim