[100-Day AI bootcamp] Day 7: Short Text social media App

Posted by xkuang on January 7, 2025

Building a social media application can be an enriching experience that enhances your programming skills and understanding of web development frameworks. This guide will walk you through creating a mobile-friendly Twitter-like app using Django and PostgreSQL and demonstrate how AI tools can streamline development.

Understanding the Project and Its Origins

We aim to develop a simplified version of Twitter that focuses on core functionalities like user registration, messaging, friend management, and user profiles. An open-source initiative inspires this project and offers a practical way to explore Django's capabilities and the intricacies of social media app development.

Setting Up the Development Environment

Before diving into coding, ensure your development environment is properly configured.

Install PostgreSQL: PostgreSQL is a powerful, open-source object-relational database system. It will serve as the backbone of our application's data storage.

sudo apt-get update sudo apt-get install postgresql postgresql-contrib
Set Up the Database: Log into the PostgreSQL shell and create a new database for your application.
Create a Python Virtual Environment: Isolate your project dependencies using a virtual environment.

python3 -m venv venv source venv/bin/activate
Install Required Python Packages: Install Django, psycopg2 (to connect Django with PostgreSQL), and other necessary packages.

pip install Django psycopg2 Pillow

Leveraging AI Tools in Development

Incorporating AI tools can significantly enhance productivity and code quality.

Code Completion and Suggestions: Utilize AI-powered code editors like Visual Studio Code with IntelliCode or PyCharm with AI Assistant plugins. These tools provide intelligent code completions and suggestions based on context.
Automated Testing: Use AI to generate test cases for your Django models and views, ensuring robustness and reliability.
Debugging Assistance: AI debuggers can help identify and explain errors in your code more efficiently.

Designing the Application Structure

Structure your Django project to keep the code organized and maintainable.

Project Root: Contains configuration files like settings.py, urls.py, and manage.py.
Apps: Create a Django app, e.g., social, to encapsulate the core functionalities.

Implementing User Registration and Authentication

Begin by setting up user authentication to allow users to register and log in.

Models (models.py):

from django.contrib.auth.models import AbstractUser
from django.db import models

class CustomUser(AbstractUser):
    real_name = models.CharField(max_length=50)
    email = models.EmailField(unique=True)
    friends = models.ManyToManyField('self', symmetrical=False)

    def __str__(self):
        return self.username

Forms (forms.py):

from django import forms
from django.contrib.auth.forms import UserCreationForm
from .models import CustomUser

class SignUpForm(UserCreationForm):
    real_name = forms.CharField(max_length=50)
    email = forms.EmailField(required=True)

    class Meta:
        model = CustomUser
        fields = ('username', 'real_name', 'email', 'password1', 'password2')

Views (views.py):

from django.shortcuts import render, redirect
from .forms import SignUpForm

def signup(request):
    if request.method == 'POST':
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('login')
    else:
        form = SignUpForm()
    return render(request, 'signup.html', {'form': form})

Templates (signup.html):

Sign Up

<h2>Sign Up</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Register</button>
</form>

Integrating AI for Enhanced User Experience

AI can improve user interactions:

Smart Suggestions: Implement AI algorithms to suggest friends based on mutual connections or interests.
Content Moderation: Use AI to monitor messages for inappropriate content, enhancing community safety.

Consider using platforms like Educative.io to learn more about integrating AI into your applications. Educative offers interactive courses that can help you master these advanced topics.

Developing Messaging Functionality

Allow users to post messages and view messages from friends.

Models (models.py):

class Post(models.Model):
    user = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
    content = models.TextField(max_length=280)
    timestamp = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return f'{self.user.username}: {self.content[:20]}'

Views (views.py):

from django.contrib.auth.decorators import login_required
from .models import Post

@login_required
def home(request):
    posts = Post.objects.filter(user__in=request.user.friends.all()).order_by('-timestamp')
    return render(request, 'home.html', {'posts': posts})

<h2>Home</h2>
<form method="post">
    {% csrf_token %}
    <textarea name="content" placeholder="What's on your mind?" maxlength="280"></textarea>
    <button type="submit">Post</button>
</form>
<hr>
{% for post in posts %}
    <p><strong>{{ post.user.username }}</strong>: {{ post.content }}</p>
    <small>{{ post.timestamp }}</small>
    <hr>
{% endfor %}

Friend Management

Implement features to add or remove friends.

Views (views.py):

@login_required
def add_friend(request, username):
    user_to_add = CustomUser.objects.get(username=username)
    request.user.friends.add(user_to_add)
    return redirect('profile', username=username)

@login_required
def remove_friend(request, username):
    user_to_remove = CustomUser.objects.get(username=username)
    request.user.friends.remove(user_to_remove)
    return redirect('profile', username=username)

Profile and Settings

Allow users to update their profiles and personal information.

Forms (forms.py):

class ProfileForm(forms.ModelForm):
    class Meta:
        model = CustomUser
        fields = ('real_name', 'email', 'profile_picture')

Views (views.py):

@login_required
def edit_profile(request):
    if request.method == 'POST':
        form = ProfileForm(request.POST, request.FILES, instance=request.user)
        if form.is_valid():
            form.save()
            return redirect('profile', username=request.user.username)
    else:
        form = ProfileForm(instance=request.user)
    return render(request, 'edit_profile.html', {'form': form})

Enhancing with Hosting Solutions

When deploying your application, consider using reliable hosting services. Companies like InterServer offer VPS hosting solutions that are optimized for Django applications. They provide affordable plans with robust performance, which can be an excellent choice for developers looking to scale their projects.

Internationalization (i18n)

Make your app accessible to a global audience by implementing internationalization.

Settings Configuration (settings.py):

LANGUAGE_CODE = 'en-us'
USE_I18N = True
LOCALE_PATHS = [os.path.join(BASE_DIR, 'locale')]

Translating Strings in Templates:

{% load i18n %}
<h1>{% trans "Welcome" %}</h1>

Key Takeaways

Practical Application: Building a Twitter-like app enhances understanding of Django's models, views, and templates.
AI Integration: Leveraging AI tools can improve development efficiency and user experience.
Affiliate Marketing: Incorporating affiliate links can monetize your application, provided it aligns with user interests.
Internationalization: Making your app multilingual widens your user base and improves accessibility.

References