Tutorial on Building a Django and React Web App – Including Authentication, Database Management, Deployment, and More

In this tutorial, we will be building a full-stack web application using Django and React. We will cover topics such as authentication, databases, deployment, and more. By the end of this tutorial, you will have a basic understanding of how to create a web application with Django and React.

Before we get started, make sure you have the following tools installed on your computer:

• Python
• Node.js
• npm
• Django
• Django REST framework
• React

Let’s begin by setting up our Django backend.

Step 1: Create a new Django project

Open your terminal and run the following command to create a new Django project:

django-admin startproject myproject

Navigate to the project directory:

cd myproject

Step 2: Create a new Django app

Next, create a new Django app by running the following command:

python manage.py startapp myapp

Add the app to the list of installed apps in your settings.py file:

INSTALLED_APPS = [
    ...
    'myapp',
]

Step 3: Set up a PostgreSQL database

Install the psycopg2 package by running:

pip install psycopg2

Update your database settings in settings.py:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'mydatabase',
        'USER': 'myuser',
        'PASSWORD': 'mypassword',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

Step 4: Create models and migrations

Define your models in the models.py file of your app:

from django.db import models

class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField(unique=True)
    password = models.CharField(max_length=100)

Run the following commands to create and apply migrations:

python manage.py makemigrations
python manage.py migrate

Step 5: Set up Django REST framework

Install the Django REST framework by running:

pip install djangorestframework

Add the REST framework to your installed apps in settings.py:

INSTALLED_APPS = [
    ...
    'rest_framework',
]

Create a serializer for your model in a serializers.py file:

from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = '__all__'

Create views for your API endpoints in a views.py file:

from rest_framework import viewsets
from .models import User
from .serializers import UserSerializer

class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all()
    serializer_class = UserSerializer

Set up your URLs in your urls.py file:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import UserViewSet

router = DefaultRouter()
router.register(r'users', UserViewSet)

urlpatterns = [
    path('', include(router.urls)),
]

Step 6: Create a login and registration endpoint

Add the following code to your views.py file:

from rest_framework import generics
from rest_framework.response import Response
from rest_framework.authtoken.models import Token
from django.contrib.auth.models import User
from rest_framework.decorators import api_view

@api_view(['POST'])
def register(request):
    data = request.data
    user = User.objects.create_user(username=data['username'], password=data['password'])
    token, _ = Token.objects.get_or_create(user=user)
    return Response({'token': token.key})

@api_view(['POST'])
def login(request):
    data = request.data
    user = User.objects.filter(username=data['username']).first()
    if user is None:
        return Response({'error': 'User not found'}, status=400)
    if not user.check_password(data['password']):
        return Response({'error': 'Invalid password'}, status=400)
    token, _ = Token.objects.get_or_create(user=user)
    return Response({'token': token.key})

Update your urls.py file:

from .views import register, login

urlpatterns = [
    ...
    path('register/', register),
    path('login/', login),
]

That’s it for the Django backend! Now let’s move on to setting up our React frontend.

Step 7: Set up a React project

Create a new React project by running the following command:

npx create-react-app myapp

Navigate to the project directory:

cd myapp

Step 8: Install axios

Install Axios for making API requests:

npm install axios

Step 9: Create a login and register form

Create a login form in your App.js file:

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const response = await axios.post('http://localhost:8000/login/', { username, password });
    console.log(response.data);
  }

  return (
    <div className="App">
      <input type="text" placeholder="Username" onChange={(e) => setUsername(e.target.value)} />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

export default App;

Create a register form in your App.js file:

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = async () => {
    const response = await axios.post('http://localhost:8000/register/', { username, password });
    console.log(response.data);
  }

  return (
    <div className="App">
      <input type="text" placeholder="Username" onChange={(e) => setUsername(e.target.value)} />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleRegister}>Register</button>
    </div>
  );
}

export default App;

Step 10: Run the Django backend and React frontend

Start your Django server by running:

python manage.py runserver

Start your React app by running:

npm start

Navigate to http://localhost:3000 in your browser to see your React app in action.

That’s it! You have now created a full-stack web application using Django and React. Feel free to explore more features and functionalities to enhance your application. Happy coding!