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
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).
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