Free Course Image Build a Full-Stack Web App

Free online courseBuild a Full-Stack Web App

Duration of the online course: 5 hours and 10 minutes

New

Free course to build a full-stack app with Django REST Framework and React: APIs, Axios, Material UI, routing, forms, validation, and CRUD.

In this free course, learn about

  • Project Setup: Django Backend and React Frontend
  • Frontend Routing and UI Framework
  • Data Modeling and REST API Development
  • Connecting Frontend to Backend and Building Forms
  • Create and Validate Records from React
  • Read and Display Data (Tables)
  • Update and Delete (Full CRUD)

Course Description

Build a full-stack web application from scratch using Django, Django REST Framework, and React in this free online course for backend development. You will set up a Python Django backend and connect it to a modern React frontend built with Vite, creating a clean foundation for real-world, data-driven apps.

Learn how to structure your project end to end, add page navigation with React Router, and create a polished interface with Material UI components. As you progress, you will model data in Django, work with a database, and expose your data through RESTful APIs using DRF.

On the frontend, you will fetch API data with Axios, build forms with Material UI, and implement create, read, update, and delete workflows that sync React with the Django backend. You will also add form validation with Yup, display backend data in a Material React Table, and complete the full CRUD cycle with editing and deletion from the UI.

Ideal for developers who want a practical Django REST and React integration path, this course focuses on the essential patterns needed to build maintainable full-stack applications, from routing and UI structure to API design and database-backed features.

Course content

  • Video class: Full-Stack Django React App Tutorial #1: Setting up the Python Django Backend 12m
  • Exercise: Which step completes the initial Django backend setup by creating the default database tables and the db.sqlite3 file?
  • Video class: Full-Stack Django React App Tutorial #2: Setting up the React JS Frontend with Vite 11m
  • Exercise: What configuration step enables a React frontend (e.g., http://localhost:5173) to make requests to a Django backend (e.g., http://localhost:8000)?
  • Video class: Full-Stack Django React App Tutorial #3: Page Navigation with React Router 15m
  • Exercise: Which set of steps best describes how page navigation is enabled in a React front end using React Router?
  • Video class: Full-Stack Django React App Tutorial #4: Creating a Navigation Menu with Material UI Components 44m
  • Exercise: Which set of packages is installed first to start using Material UI components in the React frontend?
  • Video class: Full-Stack Django React App Tutorial #5: Create Database Models and Adding Data 18m
  • Exercise: After defining new Django models, which command applies the model changes to the database tables?
  • Video class: Full-Stack Django React App Tutorial #6: Create Backend APIs with Django Rest Framework (DRF) 22m
  • Exercise: In Django REST Framework, what are the three core components needed to create an API endpoint that a React frontend can consume?
  • Video class: Full-Stack Django React App Tutorial #7: Get Django API Data in our React JS Frontend using Axios 14m
  • Exercise: What is the main purpose of creating an Axios instance file (e.g., axios.jsx) in a React front end when working with a Django REST API?
  • Video class: Full-Stack Django React App Tutorial #8: Apply Styling and Adding Material UI forms 41m
  • Exercise: Why does the reusable SelectForm set each option’s value to option.id instead of option.name?
  • Video class: Full-Stack Django React App Tutorial #9: Create Records in Django Backend from the React Frontend 31m
  • Exercise: What change is needed in the React create page so clicking the button triggers Formik’s submission logic and posts data to the backend?
  • Video class: Full-Stack Django React App Tutorial #10: Form Validation with Yup 28m
  • Exercise: Which library is installed to add form validation rules to the React forms?
  • Video class: Full-Stack Django React App Tutorial #11: Show Django Database Data in a Material React Table 23m
  • Exercise: What change is needed in the backend to let the frontend display a table of all football clubs?
  • Video class: Full-Stack Django React App Tutorial #12: Edit Records in Django Backend from the React Frontend 24m
  • Exercise: When submitting edited form data to update an existing record in a Django REST + React app, which HTTP method should be used from the React frontend?
  • Video class: Full-Stack Django React App Tutorial #13: Delete Records in Django Backend from the React Frontend 19m
  • Exercise: Which backend change enables deleting a specific record via the API?

This free course includes:

5 hours and 10 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

More free courses at Backend development

Free Ebook + Audiobooks! Learn by listening or reading!

Download the App now to have access to + 5000 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 60 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate