[Ongoing]
This is a fullstack social media app based on other social media apps such as "Instagram" and "SnapChat" built on React + TypeScript + Vite for the front-end, Appwrite as the backend, and Tailwindcss CSS for styling.
React-Query - For data mutation | React Router & React Router Dom V6 - For routing
- How to set-up a vite package.
- How to use Shadcn package and Zod schema.
- How to setup Appwrite for authentication and backend services.
- How to setup database, realtions and storage in appwrite
- How to use Toast from Shadcn
- How to setup and use Tanstack query (FKA React query) for auto caching, data fetching, data mutating, and infinite scrolling
- The use of the finally clause after the trycatch clause.
- How to use constants to declare links/LIs as static code in react.
- How to use React Dropzone.
- How to use chatGPT to configure javascript functions for faster code execution.
- The Tanstack query optimistic update for instantaneous update
- Automatic boolean assignment of replacing " ? true : false " with "!!" when making a function
- A better way to consume APIs
- How to debugg vite build errors
-
"Uncaught TypeError: Cannot read properties of undefined (reading 'replace') at Client.setEndpoint (client.ts:120:93) at config.ts:13:8" - This error was caused by the way I imported my env variables and not naming my ENV file properly
-
"Access to XMLHttpRequest at 'https://cloud.appwrite.io/v1/account' from origin 'http://127.0.0.1:5173' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:5173' that is not equal to the supplied origin." - This error was caused by not using the appropriate url and also an error in the attribute naming from appwrite
-
"Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["getRecentPosts"]" - This error was caused cause I did not return posts in the getRecentPosts async function
-
"Uncaught TypeError: newLikes.includes is not a function - in the PostStats component" - This error was as a result of me passing the "...likes" prop as an object instead of an array
-
"Failed to load resource: the server responded with a status of 400 () - in the appwrite api file" - This was a result of passing "user" as a parameter in the savePost function instead of "users"
-
"Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["getPostById","undefined"]" and "api.ts:260 GET https://cloud.appwrite.io/v1/databases/6545fa049b47bad92847/collections/6545fa6e8bb145808a51/documents/undefined 404 (Not Found) AppwriteException: Document with the requested ID could not be found." - This error was caused due to the "id" rendered in the postCard component for the edit button function missing the "$" sign
-
"Type 'DocumentList | undefined' is not assignable to type 'Document[] | undefined'. Type 'DocumentList' is missing the following properties from type 'Document[]': length, pop, push, concat, and 29 more.searchedPosts = {searchedPosts}" - This was a build error fixed by intoducing a convert function
-
"[{ "resource": "/Users/yasirl/Desktop/Build/gramsnap/src/_root/pages/PostDetails.tsx", "owner": "typescript", "code": "2345", "severity": 8, "message": "Argument of type 'string | undefined' is not assignable to parameter of type 'string'.\n Type 'undefined' is not assignable to type 'string'.", "source": "ts", "startLineNumber": 46, "startColumn": 41, "endLineNumber": 46, "endColumn": 57 }]" - This is a build error in the postDetails page, easily solved by setting "id as a string" in the useGetPostById declaration and issued a condition for the unavailability of a post
-
"[{ "resource": "/Users/yasirl/Desktop/Build/gramsnap/src/components/shared/SearchResults.tsx", "owner": "typescript", "code": "2339", "severity": 8, "message": "Property 'documents' does not exist on type 'Document[]'.", "source": "ts", "startLineNumber": 15, "startColumn": 37, "endLineNumber": 15, "endColumn": 46 }]" - This is a build error from the search results shared component was easily solved by changing the 'undefined' to 'any' in the searchedPosts type declaration.
- 1 Build Errors