beccam / astra-tik-tok

Astra Tik-Tok

50 minutes, Advanced, Start Building

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

Objectives

• Work through a video tutorial to build a simple Tik-Tok clone
• Leverage Netlify and DataStax AstraDB

How this works

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.

Get Started

To build and play with this app, follow the build instructions that are located here: https://github.com/DataStax-Examples/astra-tik-tok/blob/master/README.md#running-astra-tik-tok.

Running Astra Tik-Tok

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

Prerequisites

Let's do some initial setup.

DataStax Astra

1. Create a DataStax Astra account if you don't already have one:

2. On the home page. Locate the button Add Database

3. Pick free plan and a region close to you, click configure.

4. Define a database name, keyspace name and credentials (Take note of the DB Password)

5. Your Astra DB will be ready when the status will change from Pending to Active 💥💥💥

6. After your database is provisioned, head to the Connect screen and copy your connection information (we'll need this later!):

Github

1. Click Use this template at the top of the GitHub Repository:

2. Enter a repository name and click 'Create repository from template':

3. Clone the repository:

🚀 Getting Started Paths:

Make sure you've completed the prerequisites before starting this step

• Running on your local machine

Running on your local machine

1. Create a .env file and fill it with values from the .env.sample file.

2. Make sure the package dependencies are installed

# install dependencies
npm install

3. Then, start the app in dev mode. Changes in the src or functions directories will trigger reloads.

# start in dev mode
npm run dev