Scribd
Upload
38 views

Subject: Tutorial Outline : Creating A Javascript Web Application With React - Js and Node - Js

This tutorial teaches how to build a full-stack web application using React.js for the front-end, Node.js and Express for the back-end API, and Postgres for the database. The reader will create a single page application that allows dragging and dropping items, with functionality similar to project management tools. They will develop the React front-end, create a RESTful API using Node and Express, set up models and routes to interact with a Postgres database, then connect the front-end to the back-end API. Upon completion, the reader will have deployed the full application to a server using Nginx.

Uploaded by

SeemsEthical
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Subject: Tutorial Outline : Creating A Javascript Web Application With React - Js and Node - Js

This tutorial teaches how to build a full-stack web application using React.js for the front-end, Node.js and Express for the back-end API, and Postgres for the database. The reader will create a single page application that allows dragging and dropping items, with functionality similar to project management tools. They will develop the React front-end, create a RESTful API using Node and Express, set up models and routes to interact with a Postgres database, then connect the front-end to the back-end API. Upon completion, the reader will have deployed the full application to a server using Nginx.

Uploaded by

SeemsEthical
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Tutorial Outline

Subject​: Creating a Javascript Web Application with React.js and Node.js

What is the tutorial about?


This tutorial is about leveraging JavaScript and some of it’s most popular and widely used
frameworks and libraries to build a user friendly interface and a RESTful API for storing and
retrieving data.

Why should the reader learn this topic?


In recent years more and more applications are structured in a manner where user interface
(front-end) and back-end layer are separate entities. This approach is more flexible and easier
to scale but also comes with certain challenges. They communicate differently, have to be
deployed differently and could potentially be out of sync while they are being developed.

What will the reader do or create in this tutorial?


Reader will create a SPA application backed by a RESTful API. Reader will develop a front-end
of this application with React.js, a very popular front-end library used to create rich and powerful
user interfaces. We will also use react-dnd a react library that makes Drag ‘n’ Drop in the
browser easy. Reader will also develop a RESTful API with Javascript(Node.js) and powered
by Express.js. Data will be stored and retrieved from Postgres, a popular and open source
RDBMS. Finally, the reader will use Nginx to serve front end and back end of his application to
the world.

What will the reader have accomplished when they’re done?


Reader will have built a web application similar in looks and functionality to project management
tools like Trello or Jira. Reader will deploy said application on an Ubuntu server and serve it with
Ngnix.

Prerequisites:
- Installing Node.js (Ubuntu) -
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-18-0
4
- Installing Postgres (Ubuntu) -
https://www.digitalocean.com/community/tutorials/how-to-install-and-use-postgresql-on-u
buntu-18-04
- Installing Ngnix (Ubuntu) -
https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04-
quickstart

Step 1: Introduction. Quick intro about what readers can expect from this tutorial. Initial setup
and project folder structure.
Step 2: Bootstrap React application with create-react-app. Go through the structure of an
application created this way. Install dependencies we’ll need in this project. We’ll also create
components this application will use like Lane and Ticket. Add CSS.
Step 3: Introduce functionality into React application. This will involve introducing drag and drop
functionality, mocking up data sources, updating state and writing business logic of the
application.
Step 4: Create a simple express application. Go through the structure of an application and
explain where each part of the functionality goes. Explain how to interact with our API (torn
between integration testing (mocha, chai-http) or Postman - probably later due to simplicity and
versatility ).
Step 5: Create DB models and relationships. We will assume the reader has gone through the
prerequisites and installed Postgres. We will use knex.js and Bookshelf.js to interact with our
database from Node.js REST API. Explain how it works and create migrations and models.
Step 6: Set up routes and handle db interactions. Validate requests that initiate data storage for
necessary requirements.
Step 7: Connect React.js application to our newly created REST API. We will implement
mocked up data sources introduced in step 3 and make the front-end interact (get, post put)
with our back-end.
Step 8: Deploying the application. We’ll leverage ngnix to serve our application. This will involve
writing ngnix config file and testing it all out together.

You might also like