Building UI Before the API Is Ready

📰 Medium · Startup

Learn to build UI before the API is ready to streamline development and improve collaboration between frontend and backend teams

intermediate Published 5 Jul 2026

Action Steps

Define the expected API contract and data structures using tools like Swagger or API Blueprint
Build a mock API using tools like Mocky or JSON Server to simulate backend responses
Create a searchable table of users with role badges, account statuses, loading state, empty state, and pagination using frontend frameworks like React or Angular
Use a state management library like Redux or MobX to manage the UI state and simulate backend interactions
Test and refine the UI and product flow using the mock API and iterate on the design and implementation

Who Needs to Know This

Frontend developers and designers can benefit from this approach, as it allows them to work on the UI and product flow independently of the backend implementation, while still considering the expected contract and API requirements

Key Insight

💡 Building the frontend around an expected contract early on allows the UI, product flow, and backend implementation to grow together

Key Takeaways

Learn to build UI before the API is ready to streamline development and improve collaboration between frontend and backend teams

Full Article

Title: Building UI Before the API Is Ready

URL Source: https://medium.com/@xanhido/building-ui-before-the-api-is-ready-7df1da51bd6a?source=rss------startup-5

Published Time: 2026-07-05T16:10:08Z

Markdown Content:
[Sitemap](https://medium.com/sitemap/sitemap.xml)

[Open in app](https://play.google.com/store/apps/details?id=com.medium.reader&referrer=utm_source%3DmobileNavBar&source=post_page---top_nav_layout_nav-----------------------------------------)

Sign up

[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40xanhido%2Fbuilding-ui-before-the-api-is-ready-7df1da51bd6a&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)

[](https://medium.com/?source=post_page---top_nav_layout_nav-----------------------------------------)

Get app

[Write](https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------)

[Search](https://medium.com/search?source=post_page---top_nav_layout_nav-----------------------------------------)

Sign up

[Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40xanhido%2Fbuilding-ui-before-the-api-is-ready-7df1da51bd6a&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)

![Image 1: Unknown user](https://miro.medium.com/v2/resize:fill:32:32/1*dmbNkD5D-u45r44go_cf0g.png)

# Building UI Before the API Is Ready

[![Image 2: Zero to Launch: Web Architecture](https://miro.medium.com/v2/resize:fill:32:32/1*AQ8sTH6wUpekeHX6TPZDOA.png)](https://medium.com/@xanhido?source=post_page---byline--7df1da51bd6a---------------------------------------)

[Zero to Launch: Web Architecture](https://medium.com/@xanhido?source=post_page---byline--7df1da51bd6a---------------------------------------)

Follow

4 min read

·

Just now

[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2F7df1da51bd6a&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40xanhido%2Fbuilding-ui-before-the-api-is-ready-7df1da51bd6a&user=Zero+to+Launch%3A+Web+Architecture&userId=a5ad58c93b05&source=---header_actions--7df1da51bd6a---------------------clap_footer------------------)

[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Frepost%2Fp%2F7df1da51bd6a&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40xanhido%2Fbuilding-ui-before-the-api-is-ready-7df1da51bd6a&user=Zero+to+Launch%3A+Web+Architecture&userId=a5ad58c93b05&source=---header_actions--7df1da51bd6a---------------------repost_header------------------)

[](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F7df1da51bd6a&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40xanhido%2Fbuilding-ui-before-the-api-is-ready-7df1da51bd6a&source=---header_actions--7df1da51bd6a---------------------bookmark_footer------------------)

[Listen](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2Fplans%3Fdimension%3Dpost_audio_button%26postId%3D7df1da51bd6a&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40xanhido%2Fbuilding-ui-before-the-api-is-ready-7df1da51bd6a&source=---header_actions--7df1da51bd6a---------------------post_audio_button------------------)

Share

One of the most useful habits a frontend developer can build is learning how to move before the backend is fully readу

This does not mean ignoring the backend. It does not mean inventing random data and hoping everything will work later. It means building the frontend around an expected contract early enough that the UI, the product flow, and the backend implementation can grow together.

Imagine a very normal task. You need to build a user management page. The design is already approved. The page should show a searchable table of users, role badges, account statuses, loading state, empty state, and pagination. From the frontend side, the job is clear. You kno

Read full article → ← Back to Reads

Building UI Before the API Is Ready

Key Takeaways

Full Article

Related Videos