Convert Figma logo to code with AI

gothinkster logorealworld

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more

80,240
7,289
80,240
51

Top Related Projects

78,107

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.

55,550

Ruby on Rails

79,088

The Web framework for perfectionists with deadlines.

64,773

Fast, unopinionated, minimalist web framework for node.

Spring Boot

66,731

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:

  1. Choose a frontend and backend implementation from the available options.
  2. 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
  1. Follow the README instructions for each repository to set up and run the application.
  2. Explore the codebase and compare it with other implementations to learn about different approaches and technologies.

Competitor Comparisons

78,107

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.

55,550

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.

79,088

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.

64,773

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.

66,731

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

RealWorld Example Applications

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.