Full Stack TikTok Clone: NestJS, GraphQL, Prisma, Postgres, React, Apollo Client, Zustand & Tailwind

#graphql #reactjs #graphql
*Full-Stack TikTok Clone using NestJS, GraphQL, ReactJS, Apollo Client, Zustand & TailwindCSS*

Hey, coders,

Here I am again with another beautiful build, where we will build a full-stack TikTok clone.
We will be using TypeScript along with NestJS for the backend and ReactJS for the frontend. For the generation of types on the front end, we will make use of GraphQL Codegen, which allows us to automatically generate types from our backend. For styling, we will use TailwindCSS.
For syncing our front end with the data coming from the GraphQL API, we will use Apollo Client. For state management regarding the UI, we will use ZUSTAND.

What kind of functionality will our Tiktok clone have?
We will be able to register, log in, make posts containing a video, like and comment posts. Also, we will be able to update your user profile.
We will also have infinite loading, meaning whenever we reach the bottom, more posts will be loaded into our feed.

What will we be learning?
We will be learning how to create A GraphQL API and connect it to a separate frontend, and how to work with files, such as images and Videos on the front and backend.

Timestamps:
00:00 Intro
00:02: Setting up NestJS with GraphQL and Prisma, implementation of backend logic for registering, logging in, logging out, and issuing access tokens.
00:40: Setup for ReactJS to work with Apollo Client and GraphQL CodeGen; implementation of React Router with protected routes, only logged-in users will be able to perform actions, such as liking, commenting, or creating posts. Implementation of log-in, and register functionality.
2:06: Top Navigation with logout functionality and Sidebar
2:50 Building the Upload page and the backend logic for dealing with video files
3:50: Building the Feed Page for displaying the posts
4:10: Implementation of the comment and like feature on the backend, and building the Post page, where users can like and comment.
5:14: Implementation of the user profile feature on the backend as well as on the front end; working with image files and React Cropper.
6:12: A few big fixes and Big Thanks for watching :)

[alemaodesenvolvedor]

Finally um project without nextjs, thanks

[MetaverseCrypto-zg]

awesome bro. Thanks for this tutorial. Will be awesome if you make IG clone as well.

[codeaperture]

Great vid, pls provide video splits for section jumps

[snoudev]

Amazing, just the best video on youtube

[irfansaeedkhan]

bro this is something practical thank you for that

[iccon]

hi bro please post more videos on nestjs graphql nextjs, you are osm!

[Timekeeper]

but is this tutorial going to work on a mobile device? Not just responsive?

[muky_albany]

good afternoon sir, i recomend you for your hardwork my codegen is not like yours hope no problem with that

[mss]

Do you have code for android and iOS app?

[asksk]

I have problem with graphql -upload package.. it just doesn't work for me.. always throwing type errors.. module not supported etc.. I ll try the way you imported.. thanks for video

[muky_albany]

Please sir help me I have stuck in this code gen it's keep showing me duplicate identify I have the gpl folder several times and generate again am still having same issue and I have check my schema and resolver nothing like duplicate please help sir😒😒

[JurgenVANCUTSEM]

But this is nice but let's say you want to run this in production it's a money slurping app, because all the parts where a app earns money with it is not even in the development, but further is a nice tutorial app

[alemaodesenvolvedor]

I'm trying to follow the video but your methodology is not good, you create a lot of files, paste a lot of code and don't run the application to test, you don't see what's really happening while developing your code, in case something happens error in the future I will have to make an effort to locate the error, which developer works in their daily life this way? The project seems good, but this methodology discourages me from watching the video until the end

[EmmaLovesCoding]

very bad teacher it is almost like you are just coping and pasting no legit explanation.

[mahendranath]

Nice thank you so much 👍👋👏🤝🫡🫰🏻🙏🏻, subscribed and liked 👍