Backend Xpert
Published in

Backend Xpert

Building Practical Web Applications with React & Django

Photo by Kevin Ku on Unsplash

ReactJS and Python-Django are one of the most popular web frameworks used for developing scalable and maintainable web applications. This tutorial series comprises a variety of individual posts covering in great detail starting from framework choices, architecture & design, implementation & performance optimizations to final deployment over cloud services. Unlike other tutorial series, all the common bugs, caveats, design choices and their implications are discussed in great detail with the hope that the reader gathers complete knowledge of all the necessary parts and pitfalls that appear in developing large-scale web applications.

Chapter 01: Environment Setup

This chapter will give you detailed environment setup insight with proxy configuration for each technology that we will use in this tutorial series. We will be setting up Python and it’s different packages like Django, Rest-Framework for API Design, Swagger for API Documentation, Django-Extensions and Graphviz for Automated ER Diagram generation for Object Relational Models defined for the Application. We will be configuring the Postgres Database with Django Projects.
A seamless walkthrough of getting the client-side up and running will be provided. All the packages are installed from scratch eliminating any unnecessary boilerplate. The significance of all the important npm packages and directory structure will be explained. Webpack-configurations for development and production builds are also discussed.

Chapter 02: Decoding Backend Architecture using Django-Rest-Framework and Postgres

Backend engineering basically involves CRUD operations. For the applications that requires database for storing records and logs we need to first design the database. Django uses ORM (Object Relational Mapping) for generating database models. This eliminates the requirement of having knowledge of specific database and query languages (i.e. no need to learn Oracle, Postgres specifically) by using simple classes.
After that we be creating API Endpoints for HTTP Requests. For Each API call from the client side we will be writing the Class based Responses using Django Rest Framework.

Chapter 03: Presenting the application using React and Material-UI

Through this tutorial series, we’ll work our way through setting up of an environment for running React code (cause it would be just too mainstream to run them directly in the browser).We will build our own custom components to be used as building blocks of our app, and another one storing views of our app. We will also come across scenarios where inter-component communication becomes quite challenging, and then explore different solutions to it. Material-UI provides an extensive set of components adhering to the Google’s Material Design guidelines. It exposes an easy-to-use theming system, allowing you to customize each and every part of the provided components.

Chapter 04: Decoding Front-End Architecture & UI Performance

We use Redux for global state-management. It is based on a trending design pattern called Flux developed by Facebook. It provides a great way in managing application data at client side. Using Redux yields a lot of advantages, some of which are having single source of truth, data store persistence, on-demand data fetching, firing global events (notifications, snackbars etc.), easier debugging and logging (using redux-dev-tools). Code-Splitting (on-demand loading of components), and Data-Store Persistance is used to greatly boosts performance of the UI.

Chapter 05: Deploy your Web-App on Amazon Web Services

We will be deploying our Django Applications on Awazon Web Services EC2 instances , where we will be creating remote Linux instances on AWS and configuring the instance for Web Application.
We will be mapping the GoDaddy domain to AWS instance where our application is actually running using Route 53 Amazon Web Service.
We will configuring Nginx Server for directly handling the HTTP Requests and serving static files , however Nginx Server can not directly communicate with Django application , We will use Supervisorctl Service for interprocess communication between Nginx Server and Django Application.
We will be using Gunicorn Package for running Django server persistently in Daemon Mode even if you reboot or switch off you Linux instance on AWS.

Stay tuned for weekly posts covering the tutorial series.

Our series of tutorials are currently organized at —

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >




Backend Development Explanations

Recommended from Medium

Get on the Event Bus: Vue.js

Dead Simple Infinite Scroll with Kaminari and React Waypoint

Integrating Gitlab in Django project with gitlab api for gitlab authentication and access

Clone Graph

8 Fun Programming Facts Even Many Programmers Don’t Know

Javascript part 6

Friend help believe view shake.

The Down-Low on Javascript Prototype Chain

Bling bling

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Backend Folks

Backend Folks

Backend Development Explained

More from Medium

Integrating Auth0 with DRF & React

How to Scrape Glassdoor Data with Node.js