TechSim+

The Symbol of Expertise

React & Django – Full Stack Development with

React Js, Django REST API and AWS Cloud
Lean Full Stack Development with Django – React Js

We Work for Students like you: If you want to become a full stack web developer,
Python Django & React Js will be the best Choice.

Complete full-stack web development course with Python - Django as backend
and ReactJS in the frontend. Along with this, we will use a Payment Gateway and SMS
Gateway in our E-Commerce Web and Other Applications.

Eligibility: This Online Training Program on React Js - Django is for all students and
professionals who want to learn new skills and want to achieve something big in their
career.

Program Duration: 50 - 60 days
Per Day Session: 3 hours on daily basis (Mon-Sat)
Certification:
1. Internship Certificate from E-Cell IIT Kharagpur
2. Project Completion Certificate from TechSim+
Projects: 4 Different Projects
Mode of Training: Online Live Instructor (Mr. Prateek Mishra ) based Training with
Projects (It's NOT recorded session)

Full-Stack web development is really high in demand and in this course, we are going to
work on two most popular programming languages together, Python-Django and React
Js. We will start by Learning Basic of Front-End technologies (HTML, CSS, Js). After that,
We will start Our Core Python and also Learn Basic Fundamental of ReactJs. Further, we
Learn about API's and Create API with the help of the Django and REST framework. And
Finally, we Connect Our ReactJs frontend with Django - API.
Finally, we will also learn to integrate payment gateway both at the backend and
frontend of the application. We will study the documentation of the payment gateway
and the flow of payments. After that, we will use the SMS Gateway and some other
Tools.

Content:
Core Python
This is your first part of this course. Here you will learn Python. Python is most
demanding Programming language in the world. With the help of Python we can
built basic to advanced web applications. In this part we will cover all basic topic
of python like Data Types, Data Structure, Conditional Statement, loop, functions
and others. After this we cover some advanced part of Python like Oops, File
Handling, Error Handling and Database.

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com
 TechSim+
The Symbol of Expertise

Python Basic
• History Of Python
• Python Features
• Areas Of Application of Python
• Understanding More About Python
• Writing your First Python Program

Python Syntax
• Reserved Words
• Multi-Line Statements
• Python Input/Output: Using the Print Function
• Getting Input from User
• Python Basic Data Types And Variables
• Working With different types of Data
• String types and formatting
• Program to find duplicate characters in a String.
• Program to reverse a string

Python Data Types: List
• Accessing Values
• Basic Operations
• Indexing
• Built-in Functions & Methods
• Exercises on List
• Remove Duplicate from Lists
• Program to find the index of an item of a tuple
• Python program to convert a list to a tuple
• program to convert a tuple to a dictionary

Making Decisions If Statements
• The Logical Operators
• Simple if Statement
• if-elif Statement
• More Advanced If

Loop Control
• Count-Controlled while Loops
• Event-Controlled while Loops
• Using continue
• Introduction To for Loops
• For loops with files

Iterators
• Using iter and next
• Iterators And Dictionaries
• Introduction To Functions Why

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com
 TechSim+
The Symbol of Expertise

• Defining and Calling Functions

• Functions With Multiple Arguments
• Function Objects
• Anonymous Functions
• Scope
• Using Built-In Modules
• User-Defined Modules

File I/O
• Reading Keyboard Input
• Opening and Closing Files
• open Function
• Rename, Mkdir
Classes and Objects
• Constructor and destructor
• Creating Instance Objects
• Built-In Class Attributes
• Class Inheritance
• Base Overloading Methods
• Overloading Operators

Error Handling
• What is Exception
• The except Clause with No Exceptions
• Argument of an Exception
• User-Defined Exceptions

Date & Time module
• How to use Time Delta object
• Formatting Date and Time
• Calendar module
• Text calendar
• HTML calendar

SQLITE 3 - Database (DBMS)
• Create Connection
• SQLite3 Cursor
• Create Database
• SQLite3 Exceptions
• Close connection
• Sqlite3 datetime

Project:
In This Section, you will make one Project.
1. Complete Login and Signup System with SqLite3 Integration.

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com
 TechSim+
The Symbol of Expertise

Front End Technologies:
This part is very important part for web development- we will starts from the
basics of web development like HTML elements, styling the HTML elements with
CSS, using newly introduced features in HTML5 and CSS3. We also work on
JavaScript.

Creating web pages with HTML5
• Writing HTML code using Header Tags
• Paragraphs, Ordered and Unordered Lists
• Forms , Links, Tables, Iframes, Images,
• Text Formatting, Image Maps.
• Encoding URL
• HTML5 form validate/no validate,
• Embedding audio and video in a webpage, drag and drop

Styling web pages using CSS
• Styling of HTML elements-text, links, lists and tables
• Creating Navigation Bars
• Writing Media Rules, hide visibility of an element
• Different ways to write CSS.
• Css text Effects.
• Applying animations

Handling events with JavaScript
• Java Script datatypes, variables, arrays
• Creating loops and writing if-else decision making statements
• Creating JavaScript Functions
• Calling functions on event.
• Manipulating DOM elements

Project:
Calculator - In Basic Front-End Development Section you will make a Complete
Calculator with the help of HTML - CSS - JS.

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com
 TechSim+
The Symbol of Expertise

Complete React Js - Advanced Frontend

• In this section, you will learn about React Js from basic to Advanced. We will start
from basic of ReactJs and cover all the major topics of ReactJs. This Section is
major part of this training Program. And here you will learn about the advanced
concept of JS for Single page Web Application.

Introduction to React JS
• An Overview of ReactJS
• Understanding Single Page Apps and Multi-Page Applications
• Installing NodeJs & ReactJS
• Just React - Hello World
• Create React App Using create-react-app
• The Folder Structure of React Application
• Running the app Server
•
Templating using JSX and Components
• Working with React.createElement
• Using logical operators
• Component architecture
• Types of components
• Functional
• Class based
• Nested Components
•
Working with state, props and Rendering List
• What is a state and its significance
• Read state and set state
• Passing data to component using props
• Validating props using propTypes
• Supplying default values to props using defaultProps
• Using react key prop
• Using map function to iterate on arrays to generate elements

Event handling in React
• React event System
• Basic Event Handling
• Binding Event Handlers
• Passing arguments to event handlers
• methods as props

Styling the Application Layout
• Styling in React
• Inline Styling
• CSS Stylesheet

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com
 TechSim+
The Symbol of Expertise

Working with forms and Context

• What are React Forms?
• What is the context?
• Different Form Concepts
• Controlled components
• Uncontrolled components
• Using react ref prop to get access to DOM element
• When to use context
• Create Context
• Context.Provider
• Context.Consumer
• Reading context in class

Routing and *API Integration*
• Setting up react-router
• Understand routing in single page applications
• Configuring route with Route component
• Using Switch component to define routing rules
• Making routes dynamic using route params
• Redirect routes using Redirect Component
• Introduction of API
• Introduction of SMS Gateway API
• API consumption in React application using Fetch method

Project:
• 1. Complete Weather App using React and OpenWeatherMap API
• 2. Integration of SMS Gateway with ReactJs

Backend Technology : Django
To refresh your memory, back end is the logic that runs on servers to retrieve
and process data for the front end to display. This data could be stored in and
retrieved from databases, or could be fetched through 3rd party APIs. The
communication is through a server-side language like Python and Django. This
section will touch upon the basics of each of these components.

Introduction to Django Web Framework
• Why Web Framework and Why Django?
• Features of Django
• Django Architecture
• Django Installation

Creating A Project
• Create a Project
• The Project Structure
• Setting Up Your Project

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com
 TechSim+
The Symbol of Expertise

Admin Interface
• Starting the Admin Interface
• initiate the database
• connect to the server

Simple Views
• Use HttpResponse object
• Use render
• Use URLConf

URL Mapping
• Organizing Your URLs
• Connect your URLs to views functions.
• Make Dynamic Urls
• Sending Parameters to Views

Template System
• The Render Function
• Django Template Language
• Displaying Variables
• Filters
• Tags

Models – Database Integration
• Creating a Model
• Define Database Models
• Use Model Fields
• Populate a Database
• Model Inheritance
• Primary keys and the Model
• Linking Models
• Dynamic Webpages

Form Processing
• Create HTML Forms
• Form Display
• Process Form Data
• Form handling
• Using Form In a View

Sessions and authentication
• Users and Authentication
• Logging In and Out
• Managing Users
• Setting up sessions

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com
 TechSim+
The Symbol of Expertise

Sending Email
• send_mail()
• Sending a Simple E-mail
• Sending Multiple Mails with send_mass_mail
• Sending HTML E-mail
• Sending E-mail with Attachment

Project - Minor
During Learning All Topic you Will make one Minor Project.
Complete Music Player - With Play Songs, Add New Songs, Add New Album,
and Lot of New Features.

Integration of ReactJs and Django with REST API
• This is the point where you will learn about the Integration of ReactJs (Frontend)
with Django (Backend). You will learn about the Calling of API from. React. Fetch
data from backend with the help of API. And you will learn to Control of Backend
and Database from Frontend. So its really a very Important and Interesting
Section.

React & Django - Combine 2 Servers
• Understand the Working Structure of React Project
• Understand the Working Structure of Django Project
• Configure Django project and connect with ReactJs
• Provide Permission to access React Project
• Stop the React Server and Config the react Project
• Get running Complete Project on Django Server

Fetching data from backend on ReactJs
• Convert your models in API Accessible.
• Create API Urls for Serializers and Models
• Fetch List of Albums
• Fetch list of Songs based on Dynamic Album
• Create Attractive UI for List of Albums and Songs
• Play the Songs

More on Music Player Project
• Create ReactJs form
• Add New Album from React Frontend
• Add New Songs in Album from ReactJs frontend
• Edit or Delete Album from React
• Edit or Delete Songs from React

Project
In this section, we will update our Previous Project:
1. Music Player - Integrate our previous Music Player with ReactJs to control from frontend.
2. Spotify Music Player - Play Songs from Web by API

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com
 TechSim+
The Symbol of Expertise

Payment Gateway -And More Advanced Topic (Final Project )

This is the Second Last Section of the training program. Here you will learn Some
Advanced topics like Payment Gateways, SMS Gateway, Backend Servers, and All.
And After Completing advanced Topic we will work on the Final Project.

Celery + Redis + Django:
• Getting started with celery
• Download Redis
• Open & Test Redis:
• Install Celery + Redis in your virtualenv
• Configuration in Django project
• Running the celery worker server
• Calling the task
• Keeping Results
• Application

Background Tasks in Python with RQ
• Configuration
• Create a worker
• Queuing jobs
• Deployment
• Troubleshooting

VERSION CONTROL (GIT)
• About Version Control
• What is Git?
• The Command Line
• Installing Git
• First-Time Git Setup.
• Getting a Git Repository
• Recording Changes to the Repository
• Viewing the Commit History
• Undoing Things
• Working with Remotes
• Git on the Server
• Distributed Git

Payment and SMS Gateway
• Understand different types of gateways.
• Integrate SMS Gateway with Django and React
• Introduction of Instamojo and PayUMoney payment gateways.
• Integration of Instamojo payment Gateway
• Integration of PayUMoney payment Gateway

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com
 TechSim+
The Symbol of Expertise

Project
• After Completing all advanced Topic you will make Any One Major Project based
on your Choice:
1. E-Commerce Website.
2. Social Media Platform.
3. Blogging Site.
4. Advanced Management Platform.
5. Dating Website.
6. Food Ordering Web.
7. .......... And New Ideas will be Preferred.....

AWS and DigitalOcean Cloud - Deployment of Web App
This is the final section of our Training Program. Here You will learn about AWS
Cloud and DigitalOcean Cloud. Learn about the basic of Domains and DNS
servers. And Finally, connect your domain with AWS Cloud or your website.

Deploy Web app on AWS Cloud
• Create AWS free trial account
• Basic Introduction of AWS Services
• Configure EC2 Machine
• Install all requirements in EC2 Cloud Machine
• Upload Our Web Project on AWS Cloud.
• Test our project on Dynamic IP
• Purchase Domain from godaddy
• Connect Domain with AWS Cloud
• And Go Live....@

Deploy Web app on DigitalOcean Cloud
• Create a DigitalOcean Account
• Introduction of DigitalOcean Services
• Create New Droplet and Configure
• Get One Click Installed Django App
• Install requirements for React Project
• Upload Our Project on DigitalOcean Cloud
• Register our Domain on DigitalOcean Account
• Connect Domain with our Uploaded Project
• Go Live .......@

-----------*--------------*--------------

TechSim+ | The Symbol of Expertise

Add. 3rd Floor, Kalpataru Tower, Z-2 MP Nagar Bhopal – 462011
Con – 9893762256 E-Mail – [email protected] Visit www.techsimplus.com