TikTok Clone with Django, HTMX and Alpine.js

In this tutorial we build an Index, Login and Signup page using Tailwind CSS.

• Visual Studio Code

• Tailwind CSS

• index.html

• Footer

• login.html

• signup.html

In this tutorial we will add interactivity to the static pages with Alpine JS.

• Password show and hide

• Button Active and Disabled

• Birthday Picker

• State Change for Signup Button

In this video we are coding the frontend for TikTok's homepage with html and Tailwind CSS.

• Layout

• Post Container

• Buttons

• Scrollbar

• Responsive

In this video we will add the sidebar to our homepage with a drawer with sliding animation using AlpineJS and TailwindCSS

• Navigation

• Drawer

• Search Field

• More Panel

In this video we will implement Dark Mode using Tailwind's dark variant, in combination with AlpineJS

• Tailwind CLI installation

• Dark mode variant

In this video we will code the Explore Page with a grid layout for the content.

• Grid Layout

• Content Loop

• Categories

In this video we will code the Post Page with a 2 column grid layout using TailwindCSS

• Post Image

• Close Button

• Scroll Buttons

• UI elements

In this video we will implement the Tabs on the Post Page with AlpineJS.

• Tabs

• Input field for comments

• Comment item

• Scrolling

• Post gallery tab

  
  

In this video we will build the Profile Page for our application with TailwindCSS and AlpineJS

• Tabs

• Filters

• Post Grid

• Responsive

In this video we will build the Upload Page with a Drag and Drop Component using AlpineJS and Vanilla Javascript

• Drag & Drop

• Upload Button

• Discard Button

• Responsive UI

In this video we will start building the backend with Django. We will set-up Django (beginner friendly) and display the homepage.

• VSC Extensions

• Python & Virtual Environment

• Django

• Static & Media FIles

• Static Template Tag

• Auto Browser Reload

In this tutorial, we’ll look at Django’s templating system and break the page into reusable components: base template, layout, main content section and sidebar component.

• Base Template

• Sidebar

• Layout Template

• Explore Page

• Button Highlight

• Upload Page

In this tutorial, we will add HTMX to our Django application using the django-htmx package.

• Htmx Installation

• Htmx Attributes

• Htmx Partial

• OOB Out-Of-Band

In this tutorial, we will have a look at Django's build-in database, how to define a Custom User model, how to create an Admin user and how to display data from the database on the website.

• Custom User Model

• Migration

• Admin Panel

• Fieldsets & List Display

• Post Model

• UUID

• Displaying Data

In this tutorial, we'll upload an image and create a post using a form object and save it to the database. We'll also see how we can attach a drag & drop file to an input field, and how to dynamically assign the author to the post in the backend.

• User Avatar Upload

• Forms

• Drag-and-Drop

• Save to Database with Author

• Order by Newest

In this tutorial, we will take a look at custom scroll behaviors on the homepage and implement the scroll up and down buttons, snap scrolling with the mouse as well as infinite scrolling for an endless stream of posts.

• Snap Scrolling

• Scroll Up & Down Button

• Infinite Scrolling

• Indexing

In this tutorial, we will integrate the Post page with its own layout, a copy page link, and buttons to navigate through all posts of the author.

• Template Tags

• Copy Page Link

• Homepage Link

• Creator Posts Gallery

• Previous and Next Buttons

In this tutorial, we will build a modal window and show the post page inside this overlay so that the user can access the post information on any page they are on, and at the same time making sure that the post page also works as a standalone page. We will use AlpineJS to open the modal window and Htmx to load the content.

• Modal Window

• Close Modal

In this tutorial, we will implement the Profile page, including displaying a default avatar image for users without an image and the ability to sort posts by newest or the oldest.

• Profile View

• Htmx Request

• Template Variables

• Profile Posts Sorting

• Default Avatar Image

In this tutorial, we will implement the Login Page and set up Django Allauth, a very popular and powerful package, which can handle user authentication, validation, social logins and many other functionalities.

• Login View

• Login Required Decorator

• Allauth Installation

• Allauth Templates

• Login Logic

• Logout Logic

• Forgot Password

In this tutorial, we will implement the Signup page. We will learn how to include custom fields, for example adding a user’s birthday, how to sign up with a verification code and how to send emails in a separate thread.

• SignUp Form

• Birthday Selector

• Verification Code

• Send Email Async as Thread

• Clean Method

In this tutorial, we will create the Edit Profile page, which will be displayed inside a Modal Box, allowing users to update their profile information and upload an Avatar image.

• Modal Box

• Htmx Request

• Profile Form

• Edit Profile Page

• Avatar Upload

• Avatar Preview

• Django-Resized

In this tutorial we are going to create an account settings page to be able to change the email address and the birthday, we will add a toggle to enable or disable notifications, and additionally also save the state of the darkmode in the database.

• Settings Page Setup

• Toggle

• Change Email

• Verify Email

• Change Birthday

• Notification Toggle

• Darkmode state

In this tutorial we are finishing the basic backend functionalities: deleting an Account, editing and deleting a Post, changing the Password, displaying messages from Django's Messages Framework and creating a link of the user's Profile page.

• Delete Account Logic

• Edit Post

• Delete Post

• Change Password

• Messages Framework

• Profile Copy Link

In this tutorial we will add likes to the posts, I will show you how to like and remove a like, how to display all the liked posts on the profile page and how to sort them by most likes. To interact with the backend and fetch the data in real time we will use Htmx.

• Model with ManyToMany Field

• Like Logic with Htmx

• Popular Sorting with annotate and Count

• Liked Tab with double underscore sorting

• User Likes with aggregate and Count

In this tutorial, we will add bookmarks to the posts and see how we can display them in the Favorites tab on the profile pages.

• Bookmark Logic with Htmx

• Show and Hide Favorites Tab

  
  

In this tutorial, we are going to look at the comments section on the post page, how to display comments and replies, how to add a comment and how to count all the comments and related replies for a post.

• Comment Model

• Comments Count

• Comment Loop

• Reply Loop

• Add Comment

• OOB for new form and comments count

In this tutorial, we will implement nested replies within the comment section, allowing each comment to contain a subsection of related replies. We will also add the functionality to delete replies and comments and to like them.

• Add Reply to Comment

• Add Reply to Reply

• Delete Reply and Comment

• Like Reply and Comment

In this tutorial, we will make a small improvement to the reply system we implemented in the last video - specifically, we will see how we can display the author of a reply we are replying to.

• parent_reply property

In this tutorial, we’ll implement the functionality to repost and share posts. Additionally we will also add buttons to share the post to Facebook and X and add Open Graph meta tags to the pages.

• Reposts Model

• Feed with Reposts

• Open Graph Meta Tags

  
  

In this tutorial, we’ll implement the logic to allow users to follow other users. We’ll create a reusable follow button using a custom template tag so it can be placed on any page, and we will show the follower count on each user’s profile page. Additionally, we will personalize the homepage feed to show content from followed users.

• Follow Model

• Follow count

• Custom Template Tag

• Personalized Homepage Feed

In this tutorial, we’ll build the Following and Friends pages. These features are essential for turning a standard website into a true social network, helping users to connect, to suggest other accounts to follow and to build meaningful relationships.

• Following Page

• Suggested accounts to follow

• Friends Page

• Following on Profile page

• Followers on Profile page

In this tutorial, we will implement the search feature to allow users to search for specific people in our social network. Additionally, we will display suggestions of the most popular users while typing in the search field.

• Search Logic

• Search Suggestions

In this tutorial, we’ll take a deep dive into Tagging. We’ll create a dedicated Tag table for this in the database to track how often each tag is used, so we can easily rank them by the most popular. We’ll enhance the search feature so users can search for posts by tags, implement filtering posts by tag on the Explore page, as well as show suggested tags as users type in the search field and when creating a new post.

• Tag Logic

• Search Posts by Tag

• Suggested Tags Search

In this tutorial, we will build the Activity section for our web application to display user notifications. These notifications will cover events such as when a user starts following someone, likes a post or comment, or adds a new repost, comment or reply. Additionally, we will implement HTMX polling to periodically check for new notifications and if found show that with a red dot.

• Notification Logic

• Notification Feed Styling

• Notification Tracker

• Htmx Polling

In this tutorial, we will build the foundation for a real-time chat, that allows users to chat with themselves and with each other. Users will be able to send text messages, emojis, and images. Additionally, we will add notifications to alert users when they have received new messages.

• Message Model

• Conversation Model

• Send Message

• Delete Message

• Chat with other users

• Notifications

• Emoji Picker

• Sending Images

In this tutorial, we will transform our chat into a real time chat applications so we can receive messages from others users without refreshing the page. For this we will use Django channels and also Htmx's websocket extension.

• Django Channels

• Websocket

• Broadcast Message

In this tutorial, we will implement the functionality to upload and share videos. We will create custom buttons to pause the video and mute the sound, as well as automatically pause the video when scrolling to the next post or when opening a modal window. To achieve this, we will use AlpineJS in combination with vanilla JavaScript.

• Video Upload

• Custom Video Buttons

In this tutorial we will prepare TailwindCSS for production and minify the CSS stylesheet.

• Input & Output File

• Scan templates for CSS classes

• Minify CSS

In this tutorial, we will prepare and configure a Django application for deployment. This includes setting up environment variables to securely store sensitive data, configuring a PostgreSQL database, and serving images in a production environment.

• Environment Variables

• Secret Key

• PostgreSQL and Redis Database

• Images and Static Files

• Email

• Dependencies

In this tutorial, we will push the code to GitHub and then deploy our Django application to a webserver, connected to a PostgreSQL and Redis database. As a webserver I will use Railway because it is easy to set up and also provides a storage to test media file uploads.

• Git & Github

• PostgreSQL Database

• Redis Database

• Railway Webserver

• Volume

In this tutorial, we’ll create a Dockerfile to streamline the deployment of our code so we don’t need to manually run commands like minify or collectstatic before deploying. A Dockerfile ensures that the application runs with the same specifications across different environments and makes it easy for others to install and run the project using Docker.

• Dockerfile

• .dockerignore

• CI/CD Workflow

In this tutorial, we add the option to log in to our web application using a Google or Facebook account. This is possible with OAuth, a protocol for secure authentication that allows users to sign in without creating or remembering a password.

• Extension Installation

• Google Sociallogin

• Facebook Sociallogin

Full Source Code of this project: https://www.patreon.com/posts/full-tiktok-to-153492353