This is part two of the DataStax app development workshop series, where we guide you through fundamental technologies to kickstart your app development portfolio: Node.js, React, Netlify, and JavaScript. The full series is available on YouTube. In this post, we’ll guide you through the concepts and tools you need to build a TikTok clone backed with DataStax Astra DB.
In part one of our app development workshops, we walked you through the basics of building a web app and introduced you to the technologies you’ll be using throughout the series.
Now that you’re armed with the best tech stack for building web apps, in this second installment we’ll look at the building and deploying one of the most popular apps today: TikTok.
Back in the day, you’d have to hire an entire IT team to develop an app like TikTok. Now all you really need is a handful of technologies that can get you up and running within hours. For this workshop, we’ll be using the following:
- React to develop the user interface
- Node.js as our runtime environment
- Astra DB as our free, serverless database
- astrajs/collections, which is a library called to interact with a document-oriented database
- Netlify to deploy the app across a global content delivery network (CDN)
Here’s a quick breakdown of our TikTok app setup:
Figure 1: Diagram of TikTok clone app.
The clone has already been pre-built using React and JavaScript so you can easily modify and deploy your own TikTok app over a CDN, backed by a cloud-based database. Since we already covered React and Node.js in our previous workshop, let’s take a closer look at the technologies turning the gears and cogs in the backend.
Working with Astra DB and Document API
For our TikTok database, we’re using DataStax Astra DB: a cloud-based database that fully manages Apache Cassandra®, one of the most robust and scalable NoSQL databases around.
With Astra DB, you can leverage the availability and performance of Cassandra without the complexity of installing, operating, or scaling it. You can also use Astra DB entirely on the free tier. All you have to do is sign up for an Astra DB account, then spin up a fully-featured Cassandra cluster in minutes and start experimenting.
As a reminder, Astra DB comes bundled with Stargate, which is a collection of APIs that you can use to easily interact with your data over REST.
Figure 2: Diagram of Astra DB and Stargate.
One such API, which we’ll be using to interact with JSON documents in this workshop, is the Document API.
If you remember from part one of our workshop series, the Document API allows you to save and search schemaless JSON documents in Cassandra without the pain of defining a specific data schema. It essentially abstracts away the complexities of converting JSON documents into tabular form, making it quick to iterate and easy to scale because you can freely store your documents without the restrictions of a schema.
What’s more, as the Document API is built on Cassandra, you benefit from the inherent robustness and reliability of its distributed infrastructure. And, once your application has settled on a particular format for its data, you can easily migrate it into a defined schema.
Deploying to production with Netlify
To tie it all together, you’ll use Netlify to deploy your TikTok clone directly from the GitHub repository. Netlify is a serverless platform that enables developers to quickly build and deploy web apps across their global CDN. This means simpler deployments, built-in redundancy, and pages that load at warp speed.
To achieve this impressive level of performance, Netlify is based on JamStack: the new standard architecture for the web. Unlike traditional websites and apps, JamStack neatly separates the frontend pages from the backend apps and databases.
This frees the frontend from backend servers so pre-rendered content can be deployed directly to a global CDN. In turn, this spares you from creating or maintaining your own servers and dealing with DevOps. Plus, you can easily enhance and personalize your content through APIs and serverless functions.
To deploy our TikTok clone, here’s how it’ll all tie in.
Figure 3: TikTok clone architecture using GitHub, Netlify, and Astra DB.
Netlify will automatically clone the repository into your own, build your site, and deploy it across their CDN. One advantage of both Netlify and Astro DB is that you can deploy to any major cloud provider (AWS, GCP, and Microsoft Azure) without having to create an account with them.
Set up and deploy a TikTok clone in less than two hours
Now that you understand what’s going on under the hood, you’re ready to get your own TikTok clone up and running. During this second workshop, we’ll hand you a ready-coded sample and show you how to do the following:
- Connect your free Astra DB database
- Initialize the application using Node Package Execute (NPX)
- Define the objects needed and work through the backend
- Deploy your application to production with Netlify
Here’s the architecture we’ll be guiding you through:
Figure 4: TikTok clone app architecture for this DataStax workshop.
To start, make sure you’ve signed up for your free Astra DB account, then jump into the workshop video on YouTube.
For the source code, slides, exercises, and the step-by-step guide go to our DataStax Developers repo on GitHub. Lastly, if you get stuck or simply want to chat with our community, join the conversation on Discord.
Coming up next, for the grand finale of this workshop series, we’ll be piecing together everything you’ve learned so far and walking you through building a Netflix clone.
Explore more free tutorials on our DataStax Developers YouTube channel and subscribe to our event alert to get notified about new developer workshops. For exclusive posts on all things data: Cassandra, streaming, Kubernetes, and more; follow DataStax on Medium.
Resources
- Building a TikTok clone!
- DataStax GitHub: Run Your First Frontend Application
- Join our Discord: Fellowship of the (Cassandra) Rings
- Astra DB — Managed Apache Cassandra as a Service
- Stargate APIs | GraphQL, REST, Document
- Welcome to the Jamstack | What, Why, and How of Jamstack
- The Definitive Guide to Netlify Serverless Functions
- Tutorial: Build a TikTok app in React
- DataStax Academy
- DataStax Certifications
Top comments (0)