Top Related Projects
"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
- 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);
});
- 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);
}
}
- 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
-
Clone the repository:
git clone https://github.com/gothinkster/node-express-realworld-example-app.git
-
Install dependencies:
cd node-express-realworld-example-app npm install
-
Set up environment variables:
cp .env.example .env
-
Start the server:
npm start
The API will be available at http://localhost:3000/api
.
Competitor Comparisons
"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>
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 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
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
Top Related Projects
"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.
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