# john-weeks-dev/tiktok-clone-nextjs architecture

> Architecture diagram of the GitHub repository john-weeks-dev/tiktok-clone-nextjs, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-24). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/john-weeks-dev/tiktok-clone-nextjs
- Repository: https://github.com/john-weeks-dev/tiktok-clone-nextjs

## Overview

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: [`libs/AppWriteClient.tsx`](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/libs/AppWriteClient.tsx) (Appwrite client), [`app/hooks/useGetCommentsByPostId.tsx`](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetCommentsByPostId.tsx) (Comment operations), [`app/hooks/useGetProfileByUserId.tsx`](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetProfileByUserId.tsx) (Profile operations), [`app/components/profile/EditProfileOverlay.tsx`](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/profile/EditProfileOverlay.tsx) (Edit profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Viewer experience"]
  node_feed["Home feed<br/>[page.tsx]"]
  node_post_route["Post detail<br/>[page.tsx]"]
  node_profile_route["Creator profile<br/>[page.tsx]"]
  node_navigation["Navigation and search<br/>[TopNav.tsx]"]
end

subgraph group_identity["Identity and profiles"]
  node_auth_ui["Login and register<br/>[Login.tsx]"]
  node_auth_overlay["Authentication overlay<br/>[AuthOverlay.tsx]"]
  node_user_context["User context<br/>[user.tsx]"]
  node_profile_edit["Edit profile"]
  node_profile_api["Profile operations"]
  node_search_api["Profile search"]
  node_profile_image["Profile image updates"]
end

subgraph group_content["Video and interactions"]
  node_post_ui["Post and comments UI<br/>[PostMain.tsx]"]
  node_comment_ui["Comment components<br/>[Comments.tsx]"]
  node_upload["Video upload<br/>[page.tsx]"]
  node_post_api["Post operations<br/>[useCreatePost.tsx]"]
  node_feed_api["Feed retrieval<br/>[useGetAllPosts.tsx]"]
  node_comment_api["Comment operations"]
  node_like_api["Like operations"]
end

subgraph group_services["Appwrite services"]
  node_appwrite_client["Appwrite client<br/>[AppWriteClient.tsx]"]
  node_appwrite_db[("Appwrite database")]
  node_appwrite_storage[("Appwrite storage")]
end

node_viewer(("Viewer"))

node_viewer -->|"browses"| node_feed
node_viewer -->|"opens post"| node_post_route
node_viewer -->|"opens profile"| node_profile_route
node_viewer -->|"uses"| node_navigation
node_viewer -->|"submits video"| node_upload
node_navigation -->|"searches profiles"| node_search_api
node_upload -->|"creates post"| node_post_api
node_profile_edit -->|"updates profile"| node_profile_api
node_profile_edit -->|"changes image"| node_profile_image
node_profile_image -->|"uses"| node_appwrite_client
node_post_api -->|"uses"| node_appwrite_client
node_feed_api -->|"uses"| node_appwrite_client
node_feed_api -->|"loads creator"| node_profile_api
node_comment_api -->|"uses"| node_appwrite_client
node_comment_api -->|"loads commenter"| node_profile_api
node_search_api -->|"uses"| node_appwrite_client
node_appwrite_client -->|"queries documents"| node_appwrite_db
node_appwrite_client -->|"manages files"| node_appwrite_storage
node_auth_overlay -->|"shows forms"| node_auth_ui
node_auth_ui -->|"uses identity"| node_user_context
node_user_context -->|"uses"| node_appwrite_client
node_post_ui -->|"renders comments"| node_comment_ui
node_post_ui -->|"uses likes"| node_like_api
node_comment_ui -->|"loads comments"| node_comment_api

click node_feed "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/page.tsx"
click node_post_route "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/post/%5BpostId%5D/%5BuserId%5D/page.tsx"
click node_profile_route "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/profile/%5Bid%5D/page.tsx"
click node_navigation "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/layouts/includes/TopNav.tsx"
click node_post_ui "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/PostMain.tsx"
click node_comment_ui "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/post/Comments.tsx"
click node_auth_ui "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/auth/Login.tsx"
click node_auth_overlay "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/AuthOverlay.tsx"
click node_user_context "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/context/user.tsx"
click node_profile_edit "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/profile/EditProfileOverlay.tsx"
click node_upload "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/upload/page.tsx"
click node_post_api "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useCreatePost.tsx"
click node_feed_api "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetAllPosts.tsx"
click node_comment_api "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetCommentsByPostId.tsx"
click node_like_api "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetLikesByPostId.tsx"
click node_profile_api "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetProfileByUserId.tsx"
click node_search_api "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useSearchProfilesByName.tsx"
click node_profile_image "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useChangeUserImage.tsx"
click node_appwrite_client "https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/libs/AppWriteClient.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_feed,node_post_route,node_profile_route,node_navigation,node_viewer toneBlue
class node_auth_ui,node_auth_overlay,node_user_context,node_profile_edit,node_profile_api,node_search_api,node_profile_image toneAmber
class node_post_ui,node_comment_ui,node_upload,node_post_api,node_feed_api,node_comment_api,node_like_api toneMint
class node_appwrite_client,node_appwrite_db,node_appwrite_storage toneRose
```

## Components

### Viewer experience

- [Home feed](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/page.tsx): `app/page.tsx`
- [Post detail](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/post/%5BpostId%5D/%5BuserId%5D/page.tsx): `app/post/[postId]/[userId]/page.tsx`
- [Creator profile](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/profile/%5Bid%5D/page.tsx): `app/profile/[id]/page.tsx`
- [Navigation and search](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/layouts/includes/TopNav.tsx): `app/layouts/includes/TopNav.tsx`

### Identity and profiles

- [Login and register](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/auth/Login.tsx): `app/components/auth/Login.tsx`
- [Authentication overlay](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/AuthOverlay.tsx): `app/components/AuthOverlay.tsx`
- [User context](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/context/user.tsx): `app/context/user.tsx`
- [Edit profile](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/profile/EditProfileOverlay.tsx): `app/components/profile/EditProfileOverlay.tsx`
- [Profile operations](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetProfileByUserId.tsx): `app/hooks/useGetProfileByUserId.tsx`
- [Profile search](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useSearchProfilesByName.tsx): `app/hooks/useSearchProfilesByName.tsx`
- [Profile image updates](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useChangeUserImage.tsx): `app/hooks/useChangeUserImage.tsx`

### Video and interactions

- [Post and comments UI](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/PostMain.tsx): `app/components/PostMain.tsx`
- [Comment components](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/components/post/Comments.tsx): `app/components/post/Comments.tsx`
- [Video upload](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/upload/page.tsx): `app/upload/page.tsx`
- [Post operations](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useCreatePost.tsx): `app/hooks/useCreatePost.tsx`
- [Feed retrieval](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetAllPosts.tsx): `app/hooks/useGetAllPosts.tsx`
- [Comment operations](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetCommentsByPostId.tsx): `app/hooks/useGetCommentsByPostId.tsx`
- [Like operations](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/app/hooks/useGetLikesByPostId.tsx): `app/hooks/useGetLikesByPostId.tsx`

### Appwrite services

- [Appwrite client](https://github.com/john-weeks-dev/tiktok-clone-nextjs/blob/main/libs/AppWriteClient.tsx): `libs/AppWriteClient.tsx`
- **Appwrite database**
- **Appwrite storage**

### Other components

- **Viewer**

## Connections

- 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