Convert Figma logo to code with AI

gothinkster logonode-express-realworld-example-app

No description available

3,597
1,609
3,597
59

Top Related Projects

80,429

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

Exemplary real world application built with React + Redux

Exemplary real world application built with Angular

An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.

Quick Overview

The gothinkster/node-express-realworld-example-app is a Node.js and Express-based implementation of the "RealWorld" backend API spec. It serves as a reference for building scalable and production-ready applications using Node.js and Express, following best practices and modern development patterns.

Pros

  • Implements a comprehensive API spec, covering common real-world scenarios
  • Uses popular and well-maintained technologies (Node.js, Express, MongoDB)
  • Follows best practices for project structure and code organization
  • Includes authentication, authorization, and data validation

Cons

  • May be overwhelming for beginners due to its comprehensive nature
  • Some dependencies might be outdated and require updates
  • Limited documentation for advanced customization or extension
  • Lacks built-in support for more modern features like GraphQL or WebSockets

Code Examples

  1. User registration:
router.post('/users', function(req, res, next) {
  var user = new User();

  user.username = req.body.user.username;
  user.email = req.body.user.email;
  user.setPassword(req.body.user.password);

  user.save().then(function(){
    return res.json({user: user.toAuthJSON()});
  }).catch(next);
});
  1. Authentication middleware:
function auth(req, res, next) {
  if (req.payload.id) {
    User.findById(req.payload.id).then(function(user){
      if(!user){ return res.sendStatus(401); }

      req.user = user;
      return next();
    }).catch(next);
  } else {
    return res.sendStatus(401);
  }
}
  1. Article creation:
router.post('/', auth, function(req, res, next) {
  User.findById(req.payload.id).then(function(user){
    if (!user) { return res.sendStatus(401); }

    var article = new Article(req.body.article);

    article.author = user;

    return article.save().then(function(){
      return res.json({article: article.toJSONFor(user)});
    });
  }).catch(next);
});

Getting Started

  1. Clone the repository:

    git clone https://github.com/gothinkster/node-express-realworld-example-app.git
    
  2. Install dependencies:

    cd node-express-realworld-example-app
    npm install
    
  3. Set up environment variables:

    cp .env.example .env
    
  4. Start the server:

    npm start
    

The API will be available at http://localhost:3000/api.

Competitor Comparisons

80,429

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

Pros of realworld

  • Comprehensive collection of example applications in various frontend and backend technologies
  • Provides a standardized "RealWorld" spec for consistent implementation across platforms
  • Extensive documentation and resources for developers to learn and compare different tech stacks

Cons of realworld

  • May be overwhelming for beginners due to the large number of implementations
  • Requires more setup time to explore different implementations compared to a single, focused example
  • Potential for inconsistencies across implementations despite the standardized spec

Code Comparison

node-express-realworld-example-app:

router.post('/users', function(req, res, next){
  var user = new User();

  user.username = req.body.user.username;
  user.email = req.body.user.email;
  user.setPassword(req.body.user.password);

  user.save().then(function(){
    return res.json({user: user.toAuthJSON()});
  }).catch(next);
});

realworld (example from React+Redux implementation):

export const register = (username, email, password) => {
  return dispatch => {
    dispatch({ type: REGISTER });
    return agent.Auth.register(username, email, password)
      .then(payload => dispatch({ type: REGISTER_SUCCESS, payload }))
      .catch(error => dispatch({ type: REGISTER_FAILURE, error }));
  };
};

The code comparison shows different approaches to user registration, with node-express-realworld-example-app using a more traditional Express.js route handler, while the realworld example demonstrates a Redux action creator for handling registration in a React application.

Exemplary real world application built with React + Redux

Pros of react-redux-realworld-example-app

  • Provides a complete frontend implementation with React and Redux
  • Offers a more interactive and responsive user interface
  • Allows for efficient state management and data flow using Redux

Cons of react-redux-realworld-example-app

  • Requires additional setup and configuration compared to the backend-only solution
  • May have a steeper learning curve for developers new to React and Redux
  • Potentially larger bundle size, which could affect initial load times

Code Comparison

node-express-realworld-example-app (Backend):

router.post('/users', function(req, res, next){
  var user = new User();

  user.username = req.body.user.username;
  user.email = req.body.user.email;
  user.setPassword(req.body.user.password);

  user.save().then(function(){
    return res.json({user: user.toAuthJSON()});
  }).catch(next);
});

react-redux-realworld-example-app (Frontend):

const mapStateToProps = state => ({
  ...state.auth,
});

const mapDispatchToProps = dispatch => ({
  onChangeEmail: value =>
    dispatch({ type: UPDATE_FIELD_AUTH, key: 'email', value }),
  onChangePassword: value =>
    dispatch({ type: UPDATE_FIELD_AUTH, key: 'password', value }),
  onSubmit: (email, password) =>
    dispatch({ type: LOGIN, payload: agent.Auth.login(email, password) }),
});

The backend code focuses on handling API requests and database operations, while the frontend code manages state and user interactions using React and Redux.

Exemplary real world application built with Angular

Pros of angular-realworld-example-app

  • Provides a complete frontend solution with Angular, offering a robust and scalable architecture for single-page applications
  • Includes built-in features like routing, dependency injection, and reactive programming with RxJS
  • Offers a more opinionated structure, which can lead to consistent code organization across team members

Cons of angular-realworld-example-app

  • Steeper learning curve compared to the Node.js/Express backend, especially for developers new to Angular
  • Potentially heavier initial load time due to the Angular framework size
  • Less flexibility in choosing alternative frontend libraries or frameworks

Code Comparison

node-express-realworld-example-app (Backend):

router.post('/users', function(req, res, next){
  var user = new User();
  user.username = req.body.user.username;
  user.email = req.body.user.email;
  user.setPassword(req.body.user.password);
  user.save().then(function(){
    return res.json({user: user.toAuthJSON()});
  }).catch(next);
});

angular-realworld-example-app (Frontend):

@Component({
  selector: 'app-article-list',
  templateUrl: './article-list.component.html'
})
export class ArticleListComponent implements OnInit {
  constructor(private articlesService: ArticlesService) {}
  ngOnInit() {
    this.articlesService.getArticles().subscribe(articles => {
      // Handle articles
    });
  }
}

The code snippets demonstrate the difference between backend route handling in Node.js/Express and frontend component structure in Angular, highlighting the distinct responsibilities of each part of the application.

An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.

Pros of vue-realworld-example-app

  • Frontend-focused, providing a complete Vue.js implementation
  • Easier to understand for developers primarily working on client-side applications
  • Includes Vue-specific best practices and patterns

Cons of vue-realworld-example-app

  • Limited backend functionality compared to the Node.js counterpart
  • May require additional setup for a full-stack application
  • Less suitable for developers seeking to learn server-side implementation

Code Comparison

vue-realworld-example-app (Vue.js component):

<template>
  <div class="article-meta">
    <a href=""><img :src="article.author.image" /></a>
    <div class="info">
      <a href="" class="author">{{ article.author.username }}</a>
      <span class="date">{{ article.createdAt | date }}</span>
    </div>
    <button class="btn btn-sm btn-outline-secondary">
      <i class="ion-plus-round"></i>
      &nbsp; Follow {{ article.author.username }}
    </button>
  </div>
</template>

node-express-realworld-example-app (Express.js route):

router.get('/:slug', auth.optional, function(req, res, next) {
  Promise.all([
    req.payload ? User.findById(req.payload.id) : null,
    req.article.populate('author').execPopulate()
  ]).then(function(results){
    var user = results[0];
    return res.json({article: req.article.toJSONFor(user)});
  }).catch(next);
});

The vue-realworld-example-app focuses on frontend implementation with Vue.js components, while node-express-realworld-example-app demonstrates server-side routing and data handling using Express.js.

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

Node/Express/Prisma Example App

Build Status

Example Node (Express + Prisma) codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld API spec.

Getting Started

Prerequisites

Run the following command to install dependencies:

npm install

Environment variables

This project depends on some environment variables. If you are running this project locally, create a .env file at the root for these variables. Your host provider should included a feature to set them there directly to avoid exposing them.

Here are the required ones:

DATABASE_URL=
JWT_SECRET=
NODE_ENV=production

Generate your Prisma client

Run the following command to generate the Prisma Client which will include types based on your database schema:

npx prisma generate

Apply any SQL migration script

Run the following command to create/update your database based on existing sql migration scripts:

npx prisma migrate deploy

Run the project

Run the following command to run the project:

npx nx serve api

Seed the database

The project includes a seed script to populate the database:

npx prisma db seed

Deploy on a remote server

Run the following command to:

  • install dependencies
  • apply any new migration sql scripts
  • run the server
npm ci && npx prisma migrate deploy && node dist/api/main.js