Astra TikTok Clone Workshop

50 minutes, Intermediate, Start Building

A simple Tik-Tok clone running on AstraDB that leverages the Document API.

Objectives

• Deploy a TikTok clone "locally" and to production
• Learn how to use the @astrajs document API to quickly and easily interact with JSON documents
• Leverage Netlify and DataStax AstraDB

ℹ️ Frequently asked questions ℹ️

• Can I run the workshop on my computer?

There is nothing preventing you from running the workshop on your own machine. If you do so, you will need

• git installed on your local system
• node 15 and npm 7 or later

You will have to adapt commands and paths based on your environment and install the dependencies by yourself. We won't provide support to keep on track with schedule. However, we will do our best to give you the info you need to be successful.

• What other prerequisites are there?

• You will need a github account
• You will also need Netlify and Astra accounts, but we'll work through that in the exercises
• Use Chrome or Firefox for the best experience. Other browsers are great, but don't work well with the GitPod integration we use a bit later.

• Do I need to pay for anything for this workshop?

• No. All tools and services we provide here are FREE.

Materials for the Session

It doesn't matter if you join our workshop live or you prefer to do at your own pace, we have you covered. In this repository, you'll find everything you need for this workshop:

• Slide deck
• Discord chat
• Questions and Answers

Homework

Don't forget to complete your upgrade and get your verified skill badge! Finish and submit your homework!

1. Complete the practice steps from this repository as described below. Make screenshots alongside the steps
2. Learn more about UI components in this course, complete scenario Build a TikTok clone, and make a screenshot of the "congratulations" page.
3. Submit your homework here

That's it, you are done! Expect an email next week!

Let's start

Table of contents

1. Create Astra Instance
2. Deploy to Netlify
3. Clone your GitHub repository
4. Launch GitPod
5. Install the Netlify CLI
6. Generate application token to securely connect to the database
7. Configure and connect database
8. Launch your app
9. Connect Netlify to your site
10. Deploy to production

Video tutorial with Ania Kubow

1. Login/Register to Astra and create database

Click the button to login or register with Datastax

• Show me!

  

Use the following values when creating the database

Field	Value
database name	tiktok_workshop_db
keypace	tiktok_keyspace
Cloud Provider	Use the one you like, click a cloud provider logo, pick an Area in the list and finally pick a region.

2. Deploy to Netlify

• What does the netlify deploy button do?

  The Netlify deploy button will:

  • Create a new repository for you on Github
  • Create a site on Netlify
  • Link the two together.

• Click the button to deploy

  

• Show me!

  

This will take a few minutes.

• Click on Site deploy in progress,

  Show me!

  

• Click the top deploy link to see the build process.

  Show me!

  

• Wait until the build complete Netlify Build Complete, When you see Pushing to repository you're ready to move on.

  Show me!

  

• Scroll up to the top and click on the site name (it'll be after {yourlogin}'s Team next to the Netlify button).

  Show me!

  

3. Clone your GitHub repository

• Click on the GitHub in Deploys from GitHub to get back to your new repository. Scroll to where you were in the README.
  Show me!

  

4. Launch GitPod IDE

• Click the button to launch the GitPod IDE from YOUR repository.

• Supported by Chrome and Firefox

5. Install the Netlify CLI (Command Line Interface)

• In the workshop-astra-tik-tok directory run the following command to install the netlify-cli

npm install -g netlify-cli

• Show me!

  

6. Generate application token to securely connect to the database

Following the Documentation create a token with Database Admnistrator roles.

• Go the Organization Settings

• Go to Token Management

• Pick the role Database Admnistrator on the select box

• Click Generate token

• Show me!

  

This is what the token page looks like.

• Click the Download CSV button. You are going to need these values here in a moment.

Notice the clipboard icon at the end of each value.

• Client ID: We will use it as a username to contact Cassandra

• Client Secret: We will use it as a password to contact Cassandra

• Token: We will use it as a api Key to interact with APIS

To know more about roles of each token you can have a look to this video.

7. Configure and connect database

• In the repository directory run the following command to set up your Astra environment. This will verify the database you created earlier or create a new one for you if it can't find your database.

npm exec astra-setup tiktok_workshop_db tiktok_keyspace

What does astra-setup do?

To setup your ASTRA instance, you want to run `npm exec astra-setup`

This will do the following:
* Have you go to your [Astra Database](https://datastx.io/workshops) to register or login. There is no credit card required to sign up. The 'Pay as you go' option gives you a huge amount of transactions for free:
    * 30 million reads
    * 5 million writes
    * 40 gigabytes of storage
* Give steps to grab a Database Administrator Token and paste it into the input field
* Ask you what database you want to use (default, existing, create)
* Create or access the database
* Create/update an .env file in the project root
* Create/update an .astrarc file in your home directory
    * This can be used by httpie-astra `pip3 install httpie-astra`
    * It can also be used by the @astra/collections and @astra/rest node modules

## Specify the database and keyspace
You can run the script and tell it which database/keyspace to use by using:
`npm exec astra-setup databasename keyspacename`

8. Launch your app

• Run the application

netlify dev

• The application should automatically launch in the GitPod preview pane

9. Connect Netlify to your site

Execute each of the commands below to link your code to your Netlify deployment.

• This will pop up a browser to authenticate with netlify

netlify login

Note, when using GitPod the preview pane will not display this properly. You must click the "open in a new window" button in the very top right of the preview pane.

• This will link your workspace to the associated site

netlify link

• This will take the .env file created by astra-setup and upload it to netlify

netlify env:import .env

• Will be used to allow you to execute netlify open

netlify sites:list

10. Deploy to production

Now that you've hooked everything up, time to deplpoy to production.

• Run

netlify build

• Then run

netlify deploy --prod

• Then finally run

netlify open:site

You've deployed your app to Netlify!

Video tutorial with Ania Kubow

Thank you to our wonderful friend Ania Kubow for producing the TikTok clone. If you are not aware of Ania and love learning about coding you should absolutely check out her YouTube channel listed below.

While we focused on getting you up and running to production with Astra and Netlify, Ania's video will dig into more details on the app itself. Check it out to dig in more.

Running Astra Tik-Tok

We're using Create-React-App and the AstraDB Document API to create a simple Tik-Tok clone. Follow along in this video tutorial: https://youtu.be/IATOicvih5A.

Follow the instructions below to get started.

Video Content:

• https://youtu.be/IATOicvih5A
• (00:00) Introduction
• (03:05) Creating our Database on DataStax
• (06:52) Setting up our App
• (12:37) Routing Pages
• (18:02) Creating Components
• (28:32) Introduction to Data with Netlify and Stargate
• (30:10) Introduction to using the astrajs/collections
• (34:01) Posting data to our Database (creating dummy Tik Tok posts)
• (34:01) Adding authorization to access our Database
• (43:10) Getting data from our Database (getting all our Tik Tok posts)
• (50: 32) Viewing all our Data
• (51:56) Rendering components based on our Data
• (01:17:01) Editing our Data (following/unfollowing a user)
• (01:32:57) Adding new Data to our Database (creating a Tik Tok post)

If you did like this video, please hit the Like and Subscribe button so I know to make more!

• Twitter: https://twitter.com/ania_kubow
• YouTube: https://youtube.com/aniakubow
• Instagram: https://instagram.com/aniakubow