How john-weeks-dev/tiktok-clone-nextjs works
This is a TikTok-style video-sharing app built with Next.js and Appwrite. The main viewer workflow is browsing the feed, opening a post or creator profile, and interacting through likes and comments; signed-in users can upload videos and manage their profiles. Search and authentication support discovery and participation. The graph preserves documented data domains and tree-visible product areas, but several route and component implementations were not sampled, so their wiring is shown only where source excerpts support it.
Main entry points: AppWriteClient.tsx Appwrite client · useGetCommentsByPostId.tsx Comment operations · useGetProfileByUserId.tsx Profile operations · EditProfileOverlay.tsx Edit profile
Components 22
Viewer experience
- Home feed
app/page.tsx - Post detail
app/post/[postId]/[userId]/page.tsx - Creator profile
app/profile/[id]/page.tsx - Navigation and search
app/layouts/includes/TopNav.tsx
Identity and profiles
- Login and register
app/components/auth/Login.tsx - Authentication overlay
app/components/AuthOverlay.tsx - User context
app/context/user.tsx - Edit profile
app/components/profile/EditProfileOverlay.tsx - Profile operations
app/hooks/useGetProfileByUserId.tsx - Profile search
app/hooks/useSearchProfilesByName.tsx - Profile image updates
app/hooks/useChangeUserImage.tsx
Video and interactions
- Post and comments UI
app/components/PostMain.tsx - Comment components
app/components/post/Comments.tsx - Video upload
app/upload/page.tsx - Post operations
app/hooks/useCreatePost.tsx - Feed retrieval
app/hooks/useGetAllPosts.tsx - Comment operations
app/hooks/useGetCommentsByPostId.tsx - Like operations
app/hooks/useGetLikesByPostId.tsx
Appwrite services
- Appwrite client
libs/AppWriteClient.tsx - Appwrite database
- Appwrite storage
Other components
- Viewer
Connections 24
- Viewer → Home feed: browses
- Viewer → Post detail: opens post
- Viewer → Creator profile: opens profile
- Viewer → Navigation and search: uses
- Viewer → Video upload: submits video
- Navigation and search → Profile search: searches profiles
- Video upload → Post operations: creates post
- Edit profile → Profile operations: updates profile
- Edit profile → Profile image updates: changes image
- Profile image updates → Appwrite client: uses
- Post operations → Appwrite client: uses
- Feed retrieval → Appwrite client: uses
- Feed retrieval → Profile operations: loads creator
- Comment operations → Appwrite client: uses
- Comment operations → Profile operations: loads commenter
- Profile search → Appwrite client: uses
- Appwrite client → Appwrite database: queries documents
- Appwrite client → Appwrite storage: manages files
- Authentication overlay → Login and register: shows forms
- Login and register → User context: uses identity
- User context → Appwrite client: uses
- Post and comments UI → Comment components: renders comments
- Post and comments UI → Like operations: uses likes
- Comment components → Comment operations: loads comments