SaaSitive logo
SaaS code with React and Django

Build your SaaS
with React & Django

Discover our step-by-step tutorial on how to build and deploy a real SaaS application from scratch with React and Django

Get the course!
Send me an example lesson

How does it work?

We build a real Software-as-a-Service product and make a step-by-step tutorial that shows how the SaaS application was created. The app we build is the monitor-uptime.com. It checks the uptime status for servers and notifies users when the server is down. Additionally, we use a Machine Learning algorithm to detect anomalies in server time responses, so we can warn users about potential problems before they occur.

It is a new way of creating tutorials. You will build a complete product, deploy it to the cloud, and make it publicly available.

Features & Topics

We cover many important aspects of web application development during the course

Frontend with React in TypeScript

Frontend with React and Redux in TypeScript

Backend with Django in Python

Backend with Django (Django Rest Framework) in Python

User login and registration

User login, logout, registration, email verification, account management

Purchase monthly subscription

Integrate payment vendor (Paddle) and accept monthly subscriptions

Data gathering with Celery

Use Celery backgound tasks for data gathering

Data visualization

Data visualization on private and public dashboards

Anomaly detection

Anomaly detection predicted with Machine Learning model

Email notifications

Email notifications with alarams and warnings

Deployment

Secure deployment to the cloud with HTTPS support

Tech stack

Technology stack

The tech stack that we are using consists of Typescript + React + Redux in the frontend. For backend we are using Python + Django + Django REST Framework + PostgreSQL + Celery.

We deploy with docker-compose on AWS with an Nginx server and certificate from Let's Encrypt.

The source code created during the course might be a great starter for your new project.

Format

The course is created as text posts. Each new piece of code that is added to the project has an explanation.

You get a membership to the course's private repository on GitHub with instant access to all updates.

Send me example lesson
Course format is text-based lessons

📒 Course outline

⚙️ means backend code 🎨 means frontend code 📅 coming soon

  1. Setup Django Project ⚙️
    Starting a Django project and running it locally
  2. Create Accounts app ⚙️
    Add a new Django app for controlling accounts (users) in the application
  3. Register with email verification ⚙️
    Backend code and unit tests for new user registration with email verification
  4. Create a user profile ⚙️
    Backend code and unit tests for user profile with additional user info
  5. Testing logout ⚙️
    Unit test for logout REST API
  6. Initialize frontend 🎨
    Initialize React application and set the project structure (add Store, RootReducer, and Routes)
  7. HomeView 🎨
    Create the main page for the application
  8. Pricing and Contact Us with Outlet 🎨
    Create more pages and use react-router-dom Outlet for sharing a common layout between pages
  9. Register form 🎨
    Create a registration form for new users and send requests to the server
  10. Verify email 🎨
    Verify email views with a POST request to the server
  11. Toasts and BlockUI 🎨
    Improve usability with React-toastify and BlockUI packages
  12. Login form 🎨
    Create a login form with a request to the server
  13. Application pages 🎨
    Add websites available only to logged users (RequireAuth component)
  14. Forgot password ⚙️ 🎨
    Add backend and frontend code for resetting passwords. Reset link is sent by email
  15. Public pages🎨
    Add more public pages, like Terms of Service, Privacy Policy, and About us
  16. User settings ⚙️ 🎨
    Add backend and frontend code for password changing and account removal
  17. Subscription ⚙️ 🎨
    Integrate the application with the payment vendor (Paddle)
  18. Deployment 📅
    Deploy an application with docker-compose. We use Nginx, Let's Encrypt, and PostgreSQL. Deployment on AWS EC2
  19. Monitor model (CRUD) 📅
    CRUD model for monitors in Django
  20. Background tasks 📅
    Run Celery with background tasks for monitoring
  21. UI for monitors management 📅
    Add frontend code for monitors CRUD
  22. Data visualization 📅
    Visualize data gathered by Celery's background tasks
  23. Alarms for server down 📅
    Send email notifications for server-down events
  24. Anomaly detection 📅
    Train Machine Learning model with Isolation Forest algorithm for detecting anomaly in server time responses
  25. Warn users about anomalies 📅
    Send an email with anomaly warnings
  26. Public status pages 📅
    Add option to display public page with monitoring status
Tech stack

You build a live SaaS app

  • App created during the course is live and can be used by real users (not all functions may be available yet)
  • Check https://monitor-uptime.com
  • The course's app boilerplate can be a great starter for your next project

You won't be alone

Don't be frustrated when you hit the blocker

  • You get community and personal support with course
  • Community support via GitHub issues and discussion
  • Dedicated personal support via email (for help with projects that you can't share with the community)

Get the course!
Send me an example lesson
hero

Join our newsletter

Subscribe to our newsletter to receive product updates and discounts

Subscribe