{"id":16140073,"url":"https://github.com/ladunjexa/nextjs14-snapshot","last_synced_at":"2025-10-13T00:11:08.343Z","repository":{"id":207237549,"uuid":"714623211","full_name":"ladunjexa/nextjs14-snapshot","owner":"ladunjexa","description":" a modern social app with a stunning UI with a native mobile feel, a special tech stack, an infinite scroll feature, and amazing performance using Next,js, Appwrite, TypeScript, and more. 🤳","archived":false,"fork":false,"pushed_at":"2024-12-08T12:21:24.000Z","size":2874,"stargazers_count":16,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-22T10:43:26.750Z","etag":null,"topics":["appwrite","instagram-clone","react-query","shadcn-ui","typescripted-nextjs14"],"latest_commit_sha":null,"homepage":"https://nextjs14-snapshot.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ladunjexa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-11-05T12:25:13.000Z","updated_at":"2025-04-01T08:43:13.000Z","dependencies_parsed_at":"2024-03-08T23:24:53.147Z","dependency_job_id":"0b47d016-273c-4361-bc48-4cd6cc68202e","html_url":"https://github.com/ladunjexa/nextjs14-snapshot","commit_stats":null,"previous_names":["ladunjexa/nextjs14-snapshot"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ladunjexa/nextjs14-snapshot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-snapshot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-snapshot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-snapshot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-snapshot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ladunjexa","download_url":"https://codeload.github.com/ladunjexa/nextjs14-snapshot/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ladunjexa%2Fnextjs14-snapshot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279013617,"owners_count":26085298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appwrite","instagram-clone","react-query","shadcn-ui","typescripted-nextjs14"],"created_at":"2024-10-09T23:50:35.862Z","updated_at":"2025-10-13T00:11:08.307Z","avatar_url":"https://github.com/ladunjexa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js 14 SnapShot\n\n\u003c!-- GitHub badges --\u003e\n\n[![Latest release](https://img.shields.io/github/v/release/ladunjexa/nextjs14-snapshot?label=Latest%20release\u0026style=social)](https://github.com/ladunjexa/nextjs14-snapshot/releases/tag/v0.1.0)\n[![Stars](https://img.shields.io/github/stars/ladunjexa/nextjs14-snapshot?style=social)](https://github.com/ladunjexa/nextjs14-snapshot/stargazers)\n[![Fork](https://img.shields.io/github/forks/ladunjexa/nextjs14-snapshot?style=social)](https://github.com/ladunjexa/nextjs14-snapshot/forks)\n[![GitHub commits](https://img.shields.io/github/commit-activity/t/ladunjexa/nextjs14-snapshot?style=social\u0026logo=github)](https://github.com/ladunjexa/nextjs14-snapshot/commits)\n[![Pull requests](https://img.shields.io/github/issues-pr/ladunjexa/nextjs14-snapshot?style=social\u0026logo=github)](https://github.com/ladunjexa/nextjs14-snapshot/pulls)\n\n![demo](https://i.ibb.co/k4BQtdP/Thumbnail.png)\n\n[![ladunjexa](https://custom-icon-badges.demolab.com/badge/made%20by%20-ladunjexa-556bf2?logo=github\u0026logoColor=white\u0026labelColor=101827)](https://github.com/luadnjexa)\n[![License](https://img.shields.io/github/license/ladunjexa/nextjs14-snapshot?color=dddddd\u0026labelColor=000000)](https://github.com/ladunjexa/nextjs14-snapshot/blob/main/LICENSE)\n[![Top Language](https://img.shields.io/github/languages/top/ladunjexa/nextjs14-snapshot?logo=github\u0026logoColor=%23007ACC\u0026label=TypeScript)](https://www.typescriptlang.org/)\n[![Contributors](https://img.shields.io/github/contributors/ladunjexa/nextjs14-snapshot?style=flat\u0026color=orange\u0026label=Contributors)](https://github.com/ladunjexa/nextjs14-snapshot/graphs/contributors)\n![Release](https://img.shields.io/github/release/ladunjexa/nextjs14-snapshot.svg)\n![PRs](https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=shields)\n![deployment](https://img.shields.io/github/deployments/ladunjexa/nextjs14-snapshot/Production?logo=vercel\u0026label=Website)\n[![Known Vulnerabilities](https://snyk.io/test/github/ladunjexa/nextjs14-snapshot/badge.svg)](https://snyk.io/test/github/ladunjexa/nextjs14-snapshot)\n\n## 🌐 Live Demo\n\nExplore the live demonstration of the project: [nextjs14-snapshot](https://nextjs14-snapshot.vercel.app/)\n\n## 📝 Description\n\n**SnapShot** is a modern social app with a stunning UI with a native mobile feel, a special tech stack, an infinite scroll feature, and amazing performance using Next.js, Appwrite, TypeScript, and more.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eFolder Structure\u003c/b\u003e\u003c/summary\u003e\n\n```bash\nnextjs14-snapshot/\n├── app/\n├   ├── (auth)/\n├   ├   ├── sign-in/[[...sign-in]]/\n├   ├   ├   └── page.tsx\n├   ├   ├── sign-up/[[...sign-up]]/\n├   ├   ├   └── page.tsx\n├   ├   └── layout.tsx\n├   ├── (root)/\n├   ├   ├── layout.tsx\n├   ├   ├── (home)/\n├   ├   ├   └── page.tsx\n├   ├   ├── collection/\n├   ├   ├   └── page.tsx\n├   ├   ├── community/\n├   ├   ├   └── page.tsx\n├   ├   ├── explore/\n├   ├   ├   └── page.tsx\n├   ├   ├── create-post/\n├   ├   ├   └── page.tsx\n├   ├   ├── edit-post/\n├   ├   ├   └── [id]/\n├   ├   ├       └── page.tsx\n├   ├   ├── edit-profile/\n├   ├   ├   └── [id]/\n├   ├   ├       └── page.tsx\n├   ├   ├── posts/\n├   ├   ├   └── [id]/\n├   ├   ├       └── page.tsx\n├   ├   └── profile/\n├   ├       └── [id]/\n├   ├           ├── followers/\n├   ├           ├   └── page.tsx\n├   ├           ├── following/\n├   ├           ├   └── page.tsx\n├   ├           └── page.tsx\n├   ├── favicon.ico\n├   ├── globals.css\n├   ├── layout.tsx\n├── components/\n├   ├── cards/\n├   ├   ├── FollowCard.tsx\n├   ├   ├── PostCard.tsx\n├   ├   └── UserCard.tsx\n├   ├── forms/\n├   ├   ├── Auth.tsx\n├   ├   ├── Post.tsx\n├   ├   └── Profile.tsx\n├   ├── scenes/\n├   ├   ├── AllStories.tsx\n├   ├   ├── AllUsers.tsx\n├   ├   ├── Follows.tsx\n├   ├   ├── Post.tsx\n├   ├   ├── Profile.tsx\n├   ├   ├── RecentPosts.tsx\n├   ├   └── SavedPosts.tsx\n├   ├── shared/\n├   ├   ├── FileUploader.tsx\n├   ├   ├── GridPostList.tsx\n├   ├   ├── PostStats.tsx\n├   ├   ├── Story.tsx\n├   ├   ├── atoms/\n├   ├   ├   ├── Alert.tsx\n├   ├   ├   └── Loader.tsx\n├   ├   ├── layout/\n├   ├   ├   ├── Bottombar.tsx\n├   ├   ├   ├── LeftSidebar.tsx\n├   ├   ├   ├── RightSidebar.tsx\n├   ├   ├   └── Topbar.tsx\n├   ├   └── search/\n├   ├       ├── LocalResult.tsx\n├   ├       └── LocalSearchbar.tsx\n├   └── ui/ (generated by shadcn-ui)\n├       ├── button.tsx\n├       ├── dialog.tsx\n├       ├── form.tsx\n├       ├── input.tsx\n├       ├── label.tsx\n├       ├── tabs.tsx\n├       ├── textarea.tsx\n├       ├── toast.tsx\n├       ├── toaster.tsx\n├       └── use-toast.ts\n├── appwrite/\n├   ├── env.ts\n├   ├── client.ts\n├   ├── actions/\n├   ├   ├── post.action.ts\n├   ├   ├── save.action.ts\n├   ├   └── user.action.ts\n├   └── conf/\n├       └── index.ts\n├── constants/\n├   └── index.ts\n├── context/\n├   └── AuthContext.tsx\n├── hooks/\n├   └── useDebounce.ts\n├── lib/\n├   ├── utils.ts\n├   ├── react-query/\n├   ├   ├── Provider.tsx\n├   ├   ├── QueryKeys.ts\n├   ├   ├── mutations/\n├   ├   ├   ├── post.mutation.ts\n├   ├   ├   ├── save.mutation.ts\n├   ├   ├   └── user.mutation.ts\n├   ├   └── queries/\n├   ├       ├── post.mutation.ts\n├   ├       └── user.mutation.ts\n├   └── validations/\n├       └── index.ts\n├── public/\n├   ├── next.svg\n├   ├── vercel.svg\n├   └── assets/\n├       ├── icons/[[...]].svg\n├       └── images/[[...]].{svg,png}\n├── styles/\n├   ├── prism.css\n├   └── theme.css\n├── types/\n├   └── index.d.ts\n├── .eslintrc.json\n├── .prettierrc\n├── .gitignore\n├── README.md\n├── components.json\n├── next.config.js\n├── package.json\n├── postcss.config.js\n├── tailwind.config.ts\n└── tsconfig.ts\n```\n\n\u003c/details\u003e\n\n## 📖 Table of Contents\n\n\u003cdetails\u003e\u003csummary\u003eTable of Contents\u003c/summary\u003e\n\n- [Live Demo](#-live-demo)\n- [Description](#-description)\n- [Technologies Used](#-technologies-used)\n- [Get Started](#-get-started)\n  - [Prerequisites](#-prerequisites)\n  - [Installation and Run Locally](#-installation-and-run-locally)\n  - [Scripts](#-scripts)\n- [Environment Variables](#-environment-variables)\n- [Deployment](#-deployment)\n  - [Deploy to production (manual)](#-deploy-to-production-manual)\n  - [Deploy on Vercel (recommended)](#-deploy-on-vercel-recommended)\n  - [Deploy on Netlify](#-deploy-on-netlify)\n- [Contributing](#-contributing)\n  - [Bug / Feature Request](#-bug--feature-request)\n- [Acknowledgements](#-acknowledgements)\n- [References](#-references)\n- [Contact Us](#-contact-us)\n- [License](#-license)\n\n\u003c/details\u003e\n\n## ✨ Technologies Used\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eSnapShot\u003c/b\u003e is built using the following technologies:\u003c/summary\u003e\n\n- [TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.\n- [Next.js](https://nextjs.org/): Next.js is a React framework for building server-side rendered and statically generated web applications.\n- [Tailwind CSS](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.\n- [ESLint](https://eslint.org/): ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.\n- [Prettier](https://prettier.io/): Prettier is an opinionated code formatter.\n- [Shadcn-UI](https://ui.shadcn.com/): Shadcn UI is a React UI library that helps developers rapidly build modern web applications.\n- [Appwrite](https://appwrite.io/): Appwrite is a secure end-to-end backend server for Web, Mobile, and Flutter developers that is packaged as a set of Docker containers for easy deployment.\n- [React Query](https://react-query.tanstack.com/): React Query is a data-fetching library for React.\n- [Query String](https://www.npmjs.com/package/query-string): Parse and stringify URL query strings.\n- [Zod](https://zod.dev/): Zod is a TypeScript-first schema declaration and validation library.\n- [Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.\n\n\u003c/details\u003e\u003cbr/\u003e\n\n[![Technologies Used](https://skillicons.dev/icons?i=ts,nextjs,tailwind,appwrite,vercel)](https://skillicons.dev)\n\n## 🧰 Get Started\n\nTo get this project up and running in your development environment, follow these step-by-step instructions.\n\n### 📋 Prerequisites\n\nIn order to install and run this project locally, you would need to have the following installed on your local machine.\n\n- [Node.js](https://nodejs.org/en/)\n- [NPM](https://www.npmjs.com/get-npm)\n- [Git](https://git-scm.com/downloads)\n\n### ⚙️ Installation and Run Locally\n\n**Step 0:**\n\nNote :bangbang: the application uses Appwrite for Authentication and User Management, therefore, you need to create Appwrite account [here](https://appwrite.io/) and sets the `NEXT_PUBLIC_APPWRITE_PROJECT_ID` and `NEXT_PUBLIC_APPWRITE_URL` environment variables in `.env` file.\n\nAlso,\n\n- you need to create a new storage in Appwrite called `media` and set the `NEXT_PUBLIC_APPWRITE_STORAGE_ID` environment variable in `.env` file.\n- you need to create a new database in Appwrite and set the `NEXT_PUBLIC_APPWRITE_DATABASE_ID` environment variable in `.env` file.\n- within the database, you need to create those collections: `posts`, `users`, and `saves` and set the `NEXT_PUBLIC_APPWRITE_{NAME}_COLLECTION_ID` environment variable in `.env` file.\n\n_(the storage and database design can be found in [Reference](#-reference))_\n\n**Step 1:**\n\nDownload or clone this repo by using the link below:\n\n```bash\ngit clone https://github.com/ladunjexa/nextjs14-snapshot.git\n```\n\n**Step 2:**\n\nExecute the following command in the root directory of the downloaded repo in order to install dependencies:\n\n```bash\nnpm install\n```\n\n**Step 3:**\n\nExecute the following command in order to run the development server locally:\n\n```bash\nnpm run dev\n```\n\n**Step 4:**\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### 📜 Scripts\n\nAll scripts are defined in the `package.json` file. Here is a list of all scripts:\n\n| Script          | Action                                      |\n| :-------------- | :------------------------------------------ |\n| `npm install`   | Installs dependencies                       |\n| `npm run dev`   | Starts local dev server at `localhost:3000` |\n| `npm run build` | Build your production site to `./dist/`     |\n| `npm run start` | Start your production site locally          |\n| `npm run lint`  | Run ESLint                                  |\n\n## 🔒 Environment Variables\n\nEnvironment variables[^7] can be used for configuration. They must be set before running the app.\n\n\u003e [Environment variables](https://en.wikipedia.org/wiki/Environment_variable) are variables that are set in the operating system or shell, typically used to configure programs.\n\n**SnapShot** uses [Appwrite](https://appwrite.io) as external service. You need to create an account on Appwrite and get the required credentials to run the app.\n\nCreate a `.env` file in the root directory of the project and add the following environment variables:\n\n```env\nNEXT_PUBLIC_APPWRITE_PROJECT_ID=\u003cNEXT_PUBLIC_APPWRITE_PROJECT_ID\u003e\nNEXT_PUBLIC_APPWRITE_URL=\u003cNEXT_PUBLIC_APPWRITE_URL\u003e\n\nNEXT_PUBLIC_APPWRITE_STORAGE_ID=\u003cNEXT_PUBLIC_APPWRITE_STORAGE_ID\u003e\nNEXT_PUBLIC_APPWRITE_DATABASE_ID=\u003cNEXT_PUBLIC_APPWRITE_DATABASE_ID\u003e\n\nNEXT_PUBLIC_APPWRITE_USER_COLLECTION_ID=\u003cNEXT_PUBLIC_APPWRITE_USER_COLLECTION_ID\u003e\nNEXT_PUBLIC_APPWRITE_POST_COLLECTION_ID=\u003cNEXT_PUBLIC_APPWRITE_POST_COLLECTION_ID\u003e\nNEXT_PUBLIC_APPWRITE_SAVES_COLLECTION_ID=\u003cNEXT_PUBLIC_APPWRITE_SAVES_COLLECTION_ID\u003e\n```\n\n## 🚀 Deployment\n\n#### Deploy to production (manual)\n\nYou can create an optimized production build with the following command:\n\n```bash\nnpm run build\n```\n\n#### Deploy on Vercel (recommended)\n\nThe easiest way to deploy this Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme).\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fladunjexa%2Fnextjs14-snapshot)\n\n#### Deploy on Netlify\n\nYou can also deploy this Next.js app with [Netlify](https://www.netlify.com/).\n\n[![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ladunjexa/nextjs14-snapshot)\n\nCheck out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n## 🔧 Contributing\n\n[![contributors](https://contrib.rocks/image?repo=ladunjexa/nextjs14-snapshot)](https://github.com/ladunjexa/nextjs14-snapshot/graphs/contributors)\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nTo fix a bug or enhance an existing module, follow these steps:\n\n1. Fork the repo\n2. Create a new branch (`git checkout -b improve-feature`)\n3. Make the appropriate changes in the files\n4. Commit your changes (`git commit -am 'Improve feature'`)\n5. Push to the branch (`git push origin improve-feature`)\n6. Create a Pull Request 🎉\n\n### 📩 Bug / Feature Request\n\nIf you find a bug (failure of a module to execute its intended function), kindly open an issue [here](https://github.com/ladunjexa/nextjs14-snapshot/issues/new) by including the issue with a title and clear description.\n\nIf you'd like to request a new function, feel free to do so by opening an issue [here](https://github.com/ladunjexa/nextjs14-snapshot/issues/new). Please include sample queries and their corresponding results.\n\n## 💎 Acknowledgements\n\nI'd like to express my gratitude to the following people who helped me with this project and made it possible:\n\n- [React Query](https://react-query.tanstack.com/)\n- [Appwrite](https://appwrite.io/)\n- [Zod](https://zod.dev/)\n- [Shadcn](https://shadcn.com/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Vercel](https://vercel.com/)\n- [JavaScript Mastery](https://www.jsmastery.pro/)\n\n## 📚 References\n\nJSMastery. (2023). [Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query](https://www.youtube.com/watch?v=_W3R2VwRyF4\u0026t=10273s). YouTube.\n\n## 📞 Contact Us\n\n[![Telegram](https://img.shields.io/badge/Telegram-@ladunjexa-2CA5E0?style=social\u0026logo=telegram\u0026logoColor=000000)](https://t.me/ladunjexa)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-ladunjexa-blue?style=flat\u0026logo=linkedin\u0026logoColor=b0c0c0\u0026labelColor=363D44)](https://www.linkedin.com/in/lironabutbul)\n[![Instagram](https://img.shields.io/badge/Instagram-ladunjexa-grey?style=flat\u0026logo=instagram\u0026logoColor=b0c0c0\u0026labelColor=8134af)](https://www.instagram.com/ladunjexa)\n[![Discord](https://img.shields.io/badge/Discord-ladunjexa-7289da?style=flat\u0026logo=discord\u0026logoColor=b0c0c0\u0026labelColor=2c2f33)](https://discord.com/users/827996364331810816)\n\n\u003c!-- [![Twitter](https://img.shields.io/twitter/follow/ladunjexa.svg?style=social)](https://twitter.com/intent/follow?screen_name=ladunjexa) --\u003e\n\n## 📋 License\n\n**SnapShot** is open source software [licensed as MIT](https://opensource.org/license/mit/) and is free to use — See [LICENSE](https://github.com/ladunjexa/nextjs14-snapshot/blob/main/LICENSE) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladunjexa%2Fnextjs14-snapshot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fladunjexa%2Fnextjs14-snapshot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladunjexa%2Fnextjs14-snapshot/lists"}