Book Image

Full-Stack React Projects - Second Edition

By : Shama Hoque
2 (1)
Book Image

Full-Stack React Projects - Second Edition

2 (1)
By: Shama Hoque

Overview of this book

Facebook's React combined with industry-tested, server-side technologies, such as Node, Express, and MongoDB, enables you to develop and deploy robust real-world full-stack web apps. This updated second edition focuses on the latest versions and conventions of the technologies in this stack, along with their new features such as Hooks in React and async/await in JavaScript. The book also explores advanced topics such as implementing real-time bidding, a web-based classroom app, and data visualization in an expense tracking app. Full-Stack React Projects will take you through the process of preparing the development environment for MERN stack-based web development, creating a basic skeleton app, and extending it to build six different web apps. You’ll build apps for social media, classrooms, media streaming, online marketplaces with real-time bidding, and web-based games with virtual reality features. Throughout the book, you’ll learn how MERN stack web development works, extend its capabilities for complex features, and gain actionable insights into creating MERN-based apps, along with exploring industry best practices to meet the ever-increasing demands of the real world. By the end of this React book, you’ll be able to build production-ready MERN full-stack apps using advanced tools and techniques in modern web development.
Table of Contents (22 chapters)
1
Getting Started with MERN
4
Building MERN from the Ground Up
8
Developing Web Applications with MERN
13
Advancing to Complex MERN Applications
19
Going Forward with MERN

Range of MERN applications

Given the unique features attributed to each technology, along with the ease of extending functionalities of this stack by integrating other technologies, the range of applications that can be built with this stack is actually quite vast.

These days, web applications are, by default, expected to be rich client apps that are immersive, interactive, and don't fall short on performance or availability. The grouping of MERN strengths makes it perfect for developing web applications that meet these very aspects and demands.

Moreover, novel and upcoming attributes of some of these technologies, such as low-level operation manipulation with Node, large file streaming capabilities with MongoDB GridFS, and VR features on the web using React 360, make it possible to build even more complex and unique applications with MERN.

It may seem reasonable to pick specific features in the MERN technologies and argue why they don't work for certain applications. However, given the versatile nature of how a MERN stack can come together and be extended, these concerns can be addressed in MERN on a case-by-case basis. In this book, we will demonstrate how to make such considerations when faced with specific requirements and demands in the application being built.

MERN applications developed in this book

To demonstrate the breadth of possibilities with MERN and how you can easily start building a web application with varying features, this book will showcase everyday-use web applications alongside complex and rare web experiences.

Social media platform

For the first MERN application, we will build a basic social media application inspired by Twitter and Facebook, as follows:

This social media platform will implement simple features such as post sharing, liking and commenting, following friends, and an aggregated news feed.

Web-based classroom application

Remote or online learning is a common practice these days, with both instructors and students utilizing internet connectivity to teach and learn over online platforms. We will implement a simple web-based classroom application using MERN, which will look like the following screenshot:

This classroom will have features that allow instructors to add courses with lessons, while students can enroll in these courses and track their progress.

Online marketplace

All sorts of e-commerce web applications are abundant on the internet, and they will not go out of style anytime soon. Using MERN, we will build a comprehensive online marketplace application with basic-to-advanced e-commerce features. The following screenshot shows the completed home page of the marketplace with product listings:

The features of this marketplace application will cover aspects such as support for seller accounts, product listings, a shopping cart for customers, payment processing, order management, and real-time bidding capabilities.

Expense tracking application

Adding data visualization to any data-intensive application can boost its value considerably. We will extend MERN with an expense-tracking application to demonstrate how you can incorporate data visualization features, including graphs and charts, in a full-stack MERN application. The following screenshot shows the completed home page of the expense tracker application with an overview of the user's current expenses:

With this application, users will be able to keep track of their day-to-day expenses. The application will add the expenses incurred over time. Then, the application will extract data patterns to give the users a visual representation of how their expense habits fare as time progresses.

Media streaming application

To test out some advanced MERN capabilities, a more immersive application, such as a media streaming application, is the next pick. The following screenshot shows the home page view containing a list of popular videos added to this platform, which is inspired by features from Netflix and YouTube:

In this media streaming application, we will implement content uploading and viewing capabilities with a media content upload feature for content providers, and real-time content streaming for viewers.

VR game for the web

With frameworks such as React 360, which is built on top of React, it is possible to apply web VR and 3D capabilities to React's user interfaces. We will explore how to create rare web experiences with React 360 in MERN by putting together a basic VR game application for the web, as shown in the following screenshot:

Users will be able to play the VR games and also make their own games with this web-based application. Each game will have animated VR objects placed across a 360 world, and players will have to find and collect these objects to complete the game.

Following along with the implementations for these diverse applications in the book will teach you how to combine, extend, and use MERN stack technologies to build full-stack web applications, and also reveal a diverse range of options for your own full-stack projects.