realworld
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
Top Related Projects
Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation for your next big idea — freeing you to create without sweating the small things.
Ruby on Rails
The Web framework for perfectionists with deadlines.
Fast, unopinionated, minimalist web framework for node.
Spring Boot
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀
Quick Overview
RealWorld is an exemplary fullstack Medium.com clone created for developers to showcase and compare different frontend and backend implementations. It provides a standardized spec and API for building real-world applications, allowing developers to see how the same application is built using various tech stacks.
Pros
- Offers a comprehensive, real-world application example for learning and comparison
- Supports multiple frontend and backend implementations, showcasing different technologies
- Provides a standardized API and spec, ensuring consistency across implementations
- Encourages best practices and modern development techniques
Cons
- May be overwhelming for beginners due to its complexity
- Some implementations might become outdated if not regularly maintained
- The project's scope may limit exploration of certain technology-specific features
- Requires significant time investment to fully understand and implement
Getting Started
To get started with RealWorld:
- Choose a frontend and backend implementation from the available options.
- Clone the selected repositories:
git clone https://github.com/gothinkster/react-redux-realworld-example-app.git
git clone https://github.com/gothinkster/node-express-realworld-example-app.git
- Follow the README instructions for each repository to set up and run the application.
- Explore the codebase and compare it with other implementations to learn about different approaches and technologies.
Competitor Comparisons
Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation for your next big idea — freeing you to create without sweating the small things.
Pros of Laravel
- Comprehensive PHP framework with built-in features for rapid development
- Extensive documentation and large community support
- Elegant syntax and powerful ORM (Eloquent) for database operations
Cons of Laravel
- Steeper learning curve for beginners compared to RealWorld's flexibility
- Opinionated structure may limit customization for some projects
- Potentially heavier footprint for simple applications
Code Comparison
Laravel (routes/web.php):
Route::get('/', function () {
return view('welcome');
});
RealWorld (src/routes.js):
export default {
home: '/',
login: '/login',
register: '/register',
editor: '/editor',
article: '/article/:slug'
}
Laravel focuses on a PHP-based MVC structure with a powerful routing system, while RealWorld provides a flexible, language-agnostic approach to building real-world applications. Laravel offers a more opinionated framework with built-in features, whereas RealWorld emphasizes adaptability across various tech stacks.
Laravel is ideal for developers seeking a robust PHP ecosystem, while RealWorld caters to those looking for a blueprint to implement real-world features across different technologies. The choice between them depends on project requirements, team expertise, and desired level of framework guidance.
Ruby on Rails
Pros of Rails
- Comprehensive, full-stack framework with built-in conventions and tools
- Large, mature ecosystem with extensive documentation and community support
- Integrated testing framework and database management tools
Cons of Rails
- Steeper learning curve for beginners compared to RealWorld's modular approach
- Less flexibility in choosing specific components or technologies
- Potentially slower performance for large-scale applications
Code Comparison
Rails (config/routes.rb):
Rails.application.routes.draw do
resources :articles
root 'home#index'
end
RealWorld (src/routes.js):
import { Router } from 'express';
import * as articles from './controllers/articles';
const router = Router();
router.get('/articles', articles.list);
router.get('/articles/:id', articles.get);
Rails focuses on convention over configuration, providing a more opinionated structure. RealWorld offers a modular approach, allowing developers to choose their preferred technologies and architectures.
Rails is a comprehensive framework suitable for rapid development of full-stack applications, while RealWorld serves as a reference implementation for building real-world applications using various front-end and back-end technologies.
Both projects have their merits, with Rails excelling in productivity for standard web applications and RealWorld offering flexibility and a learning platform for modern web development practices.
The Web framework for perfectionists with deadlines.
Pros of Django
- Comprehensive web framework with built-in features for rapid development
- Extensive documentation and large, active community support
- Robust ORM for database operations and migrations
Cons of Django
- Steeper learning curve for beginners compared to RealWorld
- More opinionated structure, which may limit flexibility in some cases
- Heavier footprint, potentially overkill for smaller projects
Code Comparison
Django (models.py):
from django.db import models
class Article(models.Model):
title = models.CharField(max_length=200)
content = models.TextField()
author = models.ForeignKey('auth.User', on_delete=models.CASCADE)
created_at = models.DateTimeField(auto_now_add=True)
RealWorld (typically in a framework-specific implementation):
const mongoose = require('mongoose');
const ArticleSchema = new mongoose.Schema({
title: String,
body: String,
author: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
createdAt: { type: Date, default: Date.now }
});
The Django code showcases its built-in ORM with field types and relationships, while the RealWorld example demonstrates a more flexible, framework-agnostic approach using MongoDB and Mongoose.
Fast, unopinionated, minimalist web framework for node.
Pros of Express
- Mature and widely-adopted web application framework for Node.js
- Extensive ecosystem with numerous middleware and plugins
- Highly flexible and minimalist, allowing developers to structure applications as needed
Cons of Express
- Requires more setup and boilerplate code for complex applications
- Less opinionated, which can lead to inconsistencies across projects
- Steeper learning curve for beginners compared to more structured frameworks
Code Comparison
Express:
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
RealWorld:
import { Router } from 'express';
const router = Router();
router.get('/', (req, res) => {
res.json({ message: 'Welcome to the RealWorld API' });
});
Summary
Express is a lightweight and flexible web application framework for Node.js, offering developers freedom in structuring their applications. RealWorld, on the other hand, provides a more opinionated and structured approach, showcasing real-world examples of fullstack applications across various frameworks and libraries.
While Express excels in its simplicity and extensive ecosystem, RealWorld offers a more comprehensive learning resource for developers looking to understand how different technologies can be used to build real-world applications. The choice between the two depends on the specific needs of the project and the developer's experience level.
Spring Boot
Pros of Spring Boot
- Extensive ecosystem with a wide range of starter dependencies
- Robust auto-configuration capabilities for rapid development
- Strong community support and comprehensive documentation
Cons of Spring Boot
- Steeper learning curve for beginners
- Can be overkill for small projects or microservices
- Potential for "magic" behavior due to auto-configuration
Code Comparison
Spring Boot:
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
RealWorld:
const express = require('express');
const app = express();
const port = 3000;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
Spring Boot provides a more opinionated and streamlined setup, while RealWorld offers a more flexible and lightweight approach. Spring Boot's annotation-based configuration simplifies the bootstrapping process, whereas RealWorld's example demonstrates a more explicit server setup using Express.js.
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀
Pros of Nest
- Comprehensive framework with built-in support for dependency injection, modules, and decorators
- Strong TypeScript integration and extensive documentation
- Active community and regular updates
Cons of Nest
- Steeper learning curve due to its opinionated structure
- Potentially overkill for smaller projects or simple APIs
- Heavier initial setup compared to more lightweight frameworks
Code Comparison
Nest (Controller):
@Controller('cats')
export class CatsController {
@Get()
findAll(): string {
return 'This action returns all cats';
}
}
RealWorld (Express route):
router.get('/api/articles', (req, res, next) => {
Article.find().then(articles => {
return res.json({ articles: articles.map(article => article.toJSONFor()) });
}).catch(next);
});
Summary
Nest offers a robust, opinionated framework with strong TypeScript support, ideal for large-scale applications. RealWorld provides a more flexible, lightweight approach suitable for smaller projects or those requiring less structure. Nest's code tends to be more declarative with decorators, while RealWorld follows a more traditional Express-style routing approach.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
See how the exact same Medium.com clone (called Conduit) is built using different frontends and backends. Yes, you can mix and match them, because they all adhere to the same API spec ð®ð
While most "todo" demos provide an excellent cursory glance at a framework's capabilities, they typically don't convey the knowledge & perspective required to actually build real applications with it.
RealWorld solves this by allowing you to choose any frontend (React, Angular, & more) and any backend (Node, Django, & more) and see how they power a real-world, beautifully designed full-stack app called Conduit.
Read the full blog post announcing RealWorld on Medium.
Join us on GitHub Discussions! ð
Implementations
Over 100 implementations have been created using various languages, libraries, and frameworks.
Explore them on CodebaseShow.
Create a new implementation
Create a new implementation >>>
Or you can view upcoming implementations (WIPs).
Learn more
- "Introducing RealWorld ð" by Eric Simons
- Every tutorial is built against the same API spec to ensure modularity of every frontend & backend
- Every frontend utilizes the same handcrafted Bootstrap 4 theme for identical UI/UX
- There is a hosted version of the backend API available for public usage, no API keys are required
- Interested in creating a new RealWorld stack? View our starter guide & spec
Active Maintainers
Gérôme Grignon - Maintainer
Gérôme is a Frontend Software Engineer at Lucca. He's an open-source enthusiast.
Manuel Vila - Maintainer
Manuel is an independent Software Engineer, creator of the Layr framework and the CodebaseShow website.
Top Related Projects
Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation for your next big idea — freeing you to create without sweating the small things.
Ruby on Rails
The Web framework for perfectionists with deadlines.
Fast, unopinionated, minimalist web framework for node.
Spring Boot
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot