All Projects → DataStax-Examples → astra-tik-tok

DataStax-Examples / astra-tik-tok

Licence: Apache-2.0 license
A simple Tik Tok clone running on AstraDB that leverages the Document API.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects
shell
77523 projects

Projects that are alternatives of or similar to astra-tik-tok

battlestax
BattleStax is a stateful JAMStack game that is wholesome fun for the entire crew.
Stars: ✭ 32 (+52.38%)
Mutual labels:  dev, netlify, datastax, astra, document-api, building-sample-apps
spring-data-starter
⚡️ A sample Spring Data Cassandra REST API
Stars: ✭ 36 (+71.43%)
Mutual labels:  dev, building-sample-apps
web
Hugo content for the openshift.tips blog
Stars: ✭ 48 (+128.57%)
Mutual labels:  netlify
react-production-deployment
Deploy your React app to production on Netlify, Vercel and Heroku
Stars: ✭ 51 (+142.86%)
Mutual labels:  netlify
preact-cli-plugin-netlify
Preact cli plugin for generating h2push headers and redirects rules for netlify
Stars: ✭ 25 (+19.05%)
Mutual labels:  netlify
lambdog-server
Write Netlify functions without pulling your hair out.
Stars: ✭ 15 (-28.57%)
Mutual labels:  netlify
wowchemy-hugo-themes
🔥 Hugo website builder, Hugo themes & Hugo CMS. No code, easily build with blocks! 创建在线课程,学术简历或初创网站。#OpenScience
Stars: ✭ 6,891 (+32714.29%)
Mutual labels:  netlify
axiom
Axiom - A Hugo Theme. GitTip: https://gitcoin.co/tip?username=jhauraw
Stars: ✭ 67 (+219.05%)
Mutual labels:  netlify
hacktoberfest2021-Excluded
You can submit any PR and have SWAGS. Happy Hacktoberfest !
Stars: ✭ 63 (+200%)
Mutual labels:  dev
netlify-build-github-actions
An example of triggering a Netlify build using Github Actions Scheduled Events
Stars: ✭ 31 (+47.62%)
Mutual labels:  netlify
platform
Community platform for dancers
Stars: ✭ 30 (+42.86%)
Mutual labels:  netlify
rustplatz
(Inoffizielle) Website für das Rust-Projekt von Dhalucard, Bonjwa und RocketBeans
Stars: ✭ 15 (-28.57%)
Mutual labels:  netlify
gatsby-minimal-portfolio
👔 JAMstack (Gatsby JS) content-focused portfolio blog starter. Features include dark-mode, installable PWA, SEO, code highlighting, form, CI/CD.
Stars: ✭ 36 (+71.43%)
Mutual labels:  netlify
api-jours-feries-france
Une API REST pour les jours fériés en France
Stars: ✭ 14 (-33.33%)
Mutual labels:  netlify
MikeRogersIO
The repo for my website
Stars: ✭ 16 (-23.81%)
Mutual labels:  netlify
testimonial
Jamstack app using Gatsby, Netlify, and FaunaDB.
Stars: ✭ 23 (+9.52%)
Mutual labels:  netlify
leetspeek
Open and collaborative content from leet hackers!
Stars: ✭ 11 (-47.62%)
Mutual labels:  dev
ArduinoMid
Opel MID display
Stars: ✭ 34 (+61.9%)
Mutual labels:  astra
nuxt-netlify-cms-starter
NuxtJS + Netlify CMS blog starter project
Stars: ✭ 35 (+66.67%)
Mutual labels:  netlify
netlify-cache-nextjs
Cache the Next.js build folder in your Netlify builds
Stars: ✭ 60 (+185.71%)
Mutual labels:  netlify

Social Media App using React, JAMStack and Astra DB

50 minutes, Advanced, Start Building

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

image

Quick Start

  • Create an Astra DB Keyspace called sag_tiktok in your database.
  • Generate an Application Token with the role of Database Administrator for the Organization that your Astra DB is in.
  • Click the 'Open in Gitpod' link: Open in IDE
  • Once the app is finished launching in the Gitpod IDE, copy the env.example file to a file named .env and fill the required values in from your Application Token and Astra DB connection settings.
  • Start the example by running npm run dev in the Gitpod console.

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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].