DEV Community

loading...
Cover image for How to build a real-world application with React and Node (Foal)

How to build a real-world application with React and Node (Foal)

Loïc Poullain
Fullstack Developer JS/TS. Creator of FoalTS.
・2 min read

This tutorial shows how to build a real-world application with React and Foal. It assumes that you have already read the guide How to build a Simple To-Do List and that you have a basic knowledge of React and Node.

In this tutorial, you will learn to:

  • establish a connection with MySQL or Postgres,
  • provide credentials to the application in a secure way,
  • create models with many-to-one relations,
  • use a query builder,
  • generate an interface to test your API (Swagger UI),
  • fix same-origin policy errors,
  • allow users to log in and register with an email and a password,
  • authenticate users on the frontend and the backend,
  • manage access control,
  • protect against CSRF attacks,
  • upload and save files,
  • allow users to connect with a social provider (Google),
  • and build the application for production.

For the sake of simplicity, the front-end application will not use a state management library (such as redux). But you can of course add one if you wish. The logic to follow will remain mainly the same.

Application Overview

The application you will create is a social website where users can share interesting links to tutorials. All posts will be public, so no authentication will be required to view them. Publishing a post, on the other hand, will require the creation of an account.

Feed page
Feed page

Profile page
Profile page

Registration and login pages
Registration and login pages

Get Started

Let's get started. First of all, create a new directory.

mkdir foal-react-tuto
Enter fullscreen mode Exit fullscreen mode

Generate the backend appplication.

cd foal-react-tuto
npm install -g @foal/cli
foal createapp backend-app
Enter fullscreen mode Exit fullscreen mode

And then start the development server.

cd backend-app
npm run develop
Enter fullscreen mode Exit fullscreen mode

Go to http://localhost:3001 in your browser. You should see the Welcome on board message.

The rest of the tutorial is here.

Discussion (0)