realworld-apps/realworld

🔥 Hot★ 83,449TypeScriptAudience · developerComplexity · 3/5ActiveLicenseSetup · moderate

Mindmap

mindmap
  root((repo))
    What it does
      Medium clone app
      Users articles comments
      Authentication API
    How it works
      Shared API spec
      Shared frontend tests
      Mix and match stacks
    Use cases
      Learn new framework
      Compare implementations
      Evaluate technologies
    Tech stack
      100+ implementations
      React Angular Vue
      Node Django Rails
    Resources
      CodebaseShow site
      Live demo API
      Submission guide

mindmap root((repo)) What it does Medium clone app Users articles comments Authentication API How it works Shared API spec Shared frontend tests Mix and match stacks Use cases Learn new framework Compare implementations Evaluate technologies Tech stack 100+ implementations React Angular Vue Node Django Rails Resources CodebaseShow site Live demo API Submission guide

Things people build with this

USE CASE 1

Learn a new web framework by studying a real-world app structure instead of a toy todo list.

USE CASE 2

Compare how the same blogging app is built across different backend and frontend stacks side-by-side.

USE CASE 3

Evaluate a new technology by seeing a fair, production-like reference implementation before committing to it.

USE CASE 4

Build and submit your own implementation to showcase a framework or language you want to promote.

Tech stack

TypeScriptReactAngularVueNode.jsDjangoRailsDocker

Getting it running

Difficulty · moderate Time to first run · 30min

Each framework variant requires its own runtime/package manager (Node, Python, Ruby, etc.) and Docker is needed to avoid installing all of them locally.

MIT license, use freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

RealWorld is a project that gives developers a single, realistic example application, a clone of the Medium.com blogging site, and shows the same app built over and over again using many different web technologies. The project's premise is that most demo apps you find online are tiny todo lists that show a framework's surface but not how you would really structure a working application. RealWorld is the larger version: a Medium-style site with users, articles, comments, and follows that exercises authentication, database access, an API, and a fully styled front-end. The way it works is that there is a single shared API specification that every backend implementation must follow, and a single shared visual theme and set of end-to-end tests that every frontend must pass. Because every backend exposes the same API and every frontend talks to that same API, you can mix and match: a React frontend with a Django backend, an Angular frontend with a Node backend, and so on. Over one hundred community implementations have been built across different languages, libraries, and frameworks, listed on a companion site called CodebaseShow. There is also a hosted version of the backend API at api.realworld.show that anyone can plug a frontend into without setting up a server, plus a public demo at demo.realworld.show. You would use RealWorld when you want to learn a new framework by reading or writing a non-trivial example, when you want to compare how the same app is structured across different stacks, or when you are evaluating a backend or frontend technology and want a fair, like-for-like reference. The README also describes how to create and submit a new implementation.

Copy-paste prompts

Prompt 1

Show me how to build a RealWorld backend in [framework], following the shared API spec at realworld-docs.netlify.app.

Prompt 2

Compare the React frontend implementation with the Vue implementation on the RealWorld CodebaseShow site.

Prompt 3

I want to submit a new RealWorld implementation in [language]. What are the steps and requirements?

Prompt 4

Use the hosted RealWorld API at api.realworld.show to build a frontend without setting up a backend server.

Prompt 5

Show me the RealWorld spec for user authentication and how it's implemented in a Node.js backend.

Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.