Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query

constants.index.ts

export const sidebarLinks = [
  {
    imgURL: "/assets/icons/home.svg",
    route: "/",
    label: "Home",
  },
  {
    imgURL: "/assets/icons/wallpaper.svg",
    route: "/explore",
    label: "Explore",
  },
  {
    imgURL: "/assets/icons/people.svg",
    route: "/all-users",
    label: "People",
  },
  {
    imgURL: "/assets/icons/bookmark.svg",
    route: "/saved",
    label: "Saved",
  },
  {
    imgURL: "/assets/icons/gallery-add.svg",
    route: "/create-post",
    label: "Create Post",
  },
];

export const bottombarLinks = [
  {
    imgURL: "/assets/icons/home.svg",
    route: "/",
    label: "Home",
  },
  {
    imgURL: "/assets/icons/wallpaper.svg",
    route: "/explore",
    label: "Explore",
  },
  {
    imgURL: "/assets/icons/bookmark.svg",
    route: "/saved",
    label: "Saved",
  },
  {
    imgURL: "/assets/icons/gallery-add.svg",
    route: "/create-post",
    label: "Create",
  },
];

globals.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply box-border list-none p-0 m-0 scroll-smooth;
  }

  body {
    @apply bg-dark-1 text-white min-h-screen font-inter;
  }
}

@layer utilities {
  /* TYPOGRAPHY */
  .h1-bold {
    @apply text-[36px] font-bold leading-[140%] tracking-tighter;
  }

  .h1-semibold {
    @apply text-[36px] font-semibold leading-[140%] tracking-tighter;
  }

  .h2-bold {
    @apply text-[30px] font-bold leading-[140%] tracking-tighter;
  }

  .h3-bold {
    @apply text-[24px] font-bold leading-[140%] tracking-tighter;
  }

  .base-semibold {
    @apply text-[16px] font-semibold leading-[140%] tracking-tighter;
  }

  .base-medium {
    @apply text-[16px] font-medium leading-[140%];
  }

  .base-regular {
    @apply text-[16px] font-normal leading-[140%];
  }

  .body-bold {
    @apply text-[18px] font-bold leading-[140%];
  }

  .body-medium {
    @apply text-[18px] font-medium leading-[140%];
  }

  .small-semibold {
    @apply text-[14px] font-semibold leading-[140%] tracking-tighter;
  }

  .small-medium {
    @apply text-[14px] font-medium leading-[140%];
  }

  .small-regular {
    @apply text-[14px] font-normal leading-[140%];
  }

  .subtle-semibold {
    @apply text-[12px] font-semibold leading-[140%];
  }

  .tiny-medium {
    @apply text-[10px] font-medium leading-[140%];
  }

  /* UTILITIES */
  .invert-white {
    @apply invert brightness-0 transition;
  }

  .flex-center {
    @apply flex justify-center items-center;
  }

  .flex-between {
    @apply flex justify-between items-center;
  }

  .flex-start {
    @apply flex justify-start items-center;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    border-radius: 2px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #09090a;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #5c5c7b;
    border-radius: 50px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #7878a3;
  }

  .common-container {
    @apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar;
  }

  /* All Users */
  .user-container {
    @apply max-w-5xl flex flex-col items-start w-full gap-6 md:gap-9;
  }

  .user-grid {
    @apply w-full grid grid-cols-1 xs:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-7 max-w-5xl;
  }

  /* Explore */
  .explore-container {
    @apply flex flex-col flex-1 items-center overflow-scroll py-10 px-5 md:p-14 custom-scrollbar;
  }

  .explore-inner_container {
    @apply max-w-5xl flex flex-col items-center w-full gap-6 md:gap-9;
  }

  .explore-search {
    @apply h-12 bg-dark-4 border-none placeholder:text-light-4 focus-visible:ring-0 focus-visible:ring-offset-0 ring-offset-0 !important;
  }

  /* Home */
  .home-container {
    @apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar;
  }

  .home-posts {
    @apply max-w-screen-sm flex flex-col items-center w-full gap-6 md:gap-9;
  }

  .home-creators {
    @apply hidden xl:flex flex-col w-72 2xl:w-465 px-6 py-10 gap-10  overflow-scroll custom-scrollbar;
  }

  /* Post Details */
  .post_details-container {
    @apply flex flex-col flex-1 gap-10 overflow-scroll py-10 px-5 md:p-14 custom-scrollbar items-center;
  }

  .post_details-card {
    @apply bg-dark-2 w-full max-w-5xl rounded-[30px] flex-col flex xl:flex-row border border-dark-4 xl:rounded-l-[24px];
  }

  .post_details-img {
    @apply h-80 lg:h-[480px] xl:w-[48%] rounded-t-[30px] xl:rounded-l-[24px] xl:rounded-tr-none object-cover p-5 bg-dark-1;
  }

  .post_details-info {
    @apply bg-dark-2 flex flex-col gap-5 lg:gap-7 flex-1 items-start p-8 rounded-[30px];
  }

  .post_details-delete_btn {
    @apply p-0 flex gap-3 hover:bg-transparent hover:text-light-1  text-light-1 small-medium lg:base-medium;
  }

  /* Profile */
  .profile-container {
    @apply flex flex-col items-center flex-1 gap-10 overflow-scroll py-10 px-5 md:p-14 custom-scrollbar;
  }

  .profile-inner_container {
    @apply flex items-center md:mb-8 xl:items-start gap-8 flex-col xl:flex-row relative max-w-5xl w-full;
  }

  .profile-tab {
    @apply flex-center gap-3 py-4 w-48 bg-dark-2  transition flex-1 xl:flex-initial;
  }

  /* Saved */
  .saved-container {
    @apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5 md:p-14 custom-scrollbar;
  }

  /* Bottom bar */
  .bottom-bar {
    @apply z-50 flex-between w-full sticky bottom-0 rounded-t-[20px] bg-dark-2 px-5 py-4 md:hidden;
  }

  /* File uploader */
  .file_uploader-img {
    @apply h-80 lg:h-[480px] w-full rounded-[24px] object-cover object-top;
  }

  .file_uploader-label {
    @apply text-light-4 text-center small-regular w-full p-4 border-t border-t-dark-4;
  }

  .file_uploader-box {
    @apply flex-center flex-col p-7 h-80 lg:h-[612px];
  }

  /* Grid Post List */
  .grid-container {
    @apply w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-7 max-w-5xl;
  }

  .grid-post_link {
    @apply flex rounded-[24px] border border-dark-4 overflow-hidden cursor-pointer w-full h-full;
  }

  .grid-post_user {
    @apply absolute bottom-0 p-5 flex-between w-full bg-gradient-to-t from-dark-3 to-transparent rounded-b-[24px] gap-2;
  }

  /* Left sidebar */
  .leftsidebar {
    @apply hidden md:flex px-6 py-10 flex-col justify-between min-w-[270px] bg-dark-2;
  }

  .leftsidebar-link {
    @apply rounded-lg base-medium hover:bg-primary-500 transition;
  }

  /* Post Card */
  .post-card {
    @apply bg-dark-2 rounded-3xl border border-dark-4 p-5 lg:p-7 w-full max-w-screen-sm;
  }

  .post-card_img {
    @apply h-64 xs:h-[400px] lg:h-[450px] w-full rounded-[24px] object-cover mb-5;
  }

  /* Topbar */
  .topbar {
    @apply sticky top-0 z-50 md:hidden bg-dark-2 w-full;
  }

  /* User card */
  .user-card {
    @apply flex-center flex-col gap-4 border border-dark-4 rounded-[20px] px-5 py-8;
  }
}

@layer components {
  /* SHADCN COMPONENTS */
  /* Form */
  .shad-form_label {
    @apply text-white !important;
  }

  .shad-form_message {
    @apply text-red !important;
  }

  .shad-input {
    @apply h-12 bg-dark-4 border-none placeholder:text-light-4 focus-visible:ring-1 focus-visible:ring-offset-1 ring-offset-light-3 !important;
  }

  .shad-textarea {
    @apply h-36 bg-dark-3 rounded-xl border-none focus-visible:ring-1 focus-visible:ring-offset-1 ring-offset-light-3 !important;
  }

  /* Button */
  .shad-button_primary {
    @apply bg-primary-500 hover:bg-primary-500 text-light-1 flex gap-2 !important;
  }

  .shad-button_dark_4 {
    @apply h-12 bg-dark-4 px-5 text-light-1 flex gap-2 !important;
  }

  .shad-button_ghost {
    @apply flex gap-4 items-center justify-start hover:bg-transparent hover:text-white !important;
  }
}

public.assets.url

https://drive.google.com/file/d/13_7FofRAC3wARqPtAVPi53QNJJRd5RH_/view?usp=sharing

queryKeys.ts

export enum QUERY_KEYS {
  // AUTH KEYS
  CREATE_USER_ACCOUNT = "createUserAccount",

  // USER KEYS
  GET_CURRENT_USER = "getCurrentUser",
  GET_USERS = "getUsers",
  GET_USER_BY_ID = "getUserById",

  // POST KEYS
  GET_POSTS = "getPosts",
  GET_INFINITE_POSTS = "getInfinitePosts",
  GET_RECENT_POSTS = "getRecentPosts",
  GET_POST_BY_ID = "getPostById",
  GET_USER_POSTS = "getUserPosts",
  GET_FILE_PREVIEW = "getFilePreview",

  //  SEARCH KEYS
  SEARCH_POSTS = "getSearchPosts",
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      
      },
    },
    extend: {
      colors: {
        'primary-500': '#877EFF',
        'primary-600': '#5D5FEF',
        'secondary-500': '#FFB620',
        'off-white': '#D0DFFF',
        'red': '#FF5A5A',
        'dark-1': '#000000',
        'dark-2': '#09090A',
        'dark-3': '#101012',
        'dark-4': '#1F1F22',
        'light-1': '#FFFFFF',
        'light-2': '#EFEFEF',
        'light-3': '#7878A3',
        'light-4': '#5C5C7B',
      },
      screens: {
        'xs': '480px',
      
      },
      width: {
        '420': '420px',
        '465': '465px',
      },
      fontFamily: {
        inter: ['Inter', 'sans-serif'],

      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
};

types.index.ts

export type INavLink = {
  imgURL: string;
  route: string;
  label: string;
};

export type IUpdateUser = {
  userId: string;
  name: string;
  bio: string;
  imageId: string;
  imageUrl: URL | string;
  file: File[];
};

export type INewPost = {
  userId: string;
  caption: string;
  file: File[];
  location?: string;
  tags?: string;
};

export type IUpdatePost = {
  postId: string;
  caption: string;
  imageId: string;
  imageUrl: URL;
  file: File[];
  location?: string;
  tags?: string;
};

export type IUser = {
  id: string;
  name: string;
  username: string;
  email: string;
  imageUrl: string;
  bio: string;
};

export type INewUser = {
  name: string;
  email: string;
  username: string;
  password: string;
};

useDebounce.ts

import { useEffect, useState } from "react";

// https://codesandbox.io/s/react-query-debounce-ted8o?file=/src/useDebounce.js
export default function useDebounce<T>(value: T, delay: number): T {
  // State and setters for debounced value
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    // Update debounced value after delay
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cancel the timeout if value changes (also on delay change or unmount)
    // This is how we prevent debounced value from updating if value is changed ...
    // .. within the delay period. Timeout gets cleared and restarted.
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]); // Only re-call effect if value or delay changes

  return debouncedValue;
}

utils.ts

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export const convertFileToUrl = (file: File) => URL.createObjectURL(file);

export function formatDateString(dateString: string) {
  const options: Intl.DateTimeFormatOptions = {
    year: "numeric",
    month: "short",
    day: "numeric",
  };

  const date = new Date(dateString);
  const formattedDate = date.toLocaleDateString("en-US", options);

  const time = date.toLocaleTimeString([], {
    hour: "numeric",
    minute: "2-digit",
  });

  return `${formattedDate} at ${time}`;
}

// 
export const multiFormatDateString = (timestamp: string = ""): string => {
  const timestampNum = Math.round(new Date(timestamp).getTime() / 1000);
  const date: Date = new Date(timestampNum * 1000);
  const now: Date = new Date();

  const diff: number = now.getTime() - date.getTime();
  const diffInSeconds: number = diff / 1000;
  const diffInMinutes: number = diffInSeconds / 60;
  const diffInHours: number = diffInMinutes / 60;
  const diffInDays: number = diffInHours / 24;

  switch (true) {
    case Math.floor(diffInDays) >= 30:
      return formatDateString(timestamp);
    case Math.floor(diffInDays) === 1:
      return `${Math.floor(diffInDays)} day ago`;
    case Math.floor(diffInDays) > 1 && diffInDays < 30:
      return `${Math.floor(diffInDays)} days ago`;
    case Math.floor(diffInHours) >= 1:
      return `${Math.floor(diffInHours)} hours ago`;
    case Math.floor(diffInMinutes) >= 1:
      return `${Math.floor(diffInMinutes)} minutes ago`;
    default:
      return "Just now";
  }
};

export const checkIsLiked = (likeList: string[], userId: string) => {
  return likeList.includes(userId);
};

I'm just starting this project. For anyone getting vs code complaints from the tailwind.config.js file above, I made the following changes and everyone seems happy:

Add /*eslint-env node*/ (per eslint docs)

Hope this helps someone :)

pls help it says invalid param for email?

getting this error while signing up, but the user is getting saved in the db - AppwriteException: Invalid query: {"method":"equal","attribute":"accountId","values":["65fb71f1dc3efa549060"]}
I rechecked the function multiple times
I am using appwrite version 13.0 even tried clearing local storage to see if it is affecting but no use I seriously need help, stuck here for last couple of hours, not able to proceed :(

I am stuck at this too please help somebody!!

Downgrade your appwrite to 13.0.2. it gonna fix this issue, its appwrite's version problem.

how? i read appwrite doc but i dont find it please help

please help me with this issue in src/context/AuthContext.ts

getting this error while signing up, but the user is getting saved in the db - AppwriteException: Invalid query: {"method":"equal","attribute":"accountId","values":["65fb71f1dc3efa549060"]}
I rechecked the function multiple times
I am using appwrite version 13.0 even tried clearing local storage to see if it is affecting but no use I seriously need help, stuck here for last couple of hours, not able to proceed :(

I am stuck at this too please help somebody!!

Downgrade your appwrite to 13.0.2. it gonna fix this issue, its appwrite's version problem.

how? i read appwrite doc but i dont find it please help

hey, I found how to do this, go to package.json, change the appwrite version to 13.0.2 and run 'npm i' command.

please help me with this issue in src/context/AuthContext.ts

i don't thinks there's problem with this line. post you console logs errors.

@adrianhajdin can i please get some help here? i have attached the screenshot of localhost and console together.... the problem is not that nothing is appearing in the home page (thats because i havent started building the home page yet) but the problem is that even if i put the url as localhost:5173/sign-in or localhost:5173/sign-up, its getting redirected to localhost:5173...... i really dont have that much grip over development that i can figure out myself that where is the error among so many lines of code.... plz do consider helping out...

I think, You should change your permission to any if you have set any other option from the given

getting this error while signing up, but the user is getting saved in the db - AppwriteException: Invalid query: {"method":"equal","attribute":"accountId","values":["65fb71f1dc3efa549060"]}
I rechecked the function multiple times
I am using appwrite version 13.0 even tried clearing local storage to see if it is affecting but no use I seriously need help, stuck here for last couple of hours, not able to proceed :(

I am stuck at this too please help somebody!!

Downgrade your appwrite to 13.0.2. it gonna fix this issue, its appwrite's version problem.

how? i read appwrite doc but i dont find it please help

hey, I found how to do this, go to package.json, change the appwrite version to 13.0.2 and run 'npm i' command.

thanks mate.

Has anyone implemented ' comment' section for a post, so far?

somebody please tell me what is the error

getting this error while signing up, but the user is getting saved in the db - AppwriteException: Invalid query: {"method":"equal","attribute":"accountId","values":["65fb71f1dc3efa549060"]}
I rechecked the function multiple times
I am using appwrite version 13.0 even tried clearing local storage to see if it is affecting but no use I seriously need help, stuck here for last couple of hours, not able to proceed :(

I am stuck at this too please help somebody!!

Downgrade your appwrite to 13.0.2. it gonna fix this issue, its appwrite's version problem.

Thank you!

i am unable to save the user into database collection of appwrite after creating the user? i created the user with my signup form and it is successfully created the account in the appwrite authentication but the I want to save the user into database collection as well : api.ts

`import { ID } from 'appwrite'
import { INewUser } from '@/types';
import { account, appwriteConfig, avatars, 
databases } from './config';

export async function createUserAccount(user: 
INewUser) {
try {
    const newAccount = await account.create(
        ID.unique(),
        user.email,
        user.password,
        user.name
    );
    if (!newAccount) {
        throw new Error("Failed to create 
    account");
    }

    const avatarUrl = 
    avatars.getInitials(user.name);
    const newUser = await saveUserToDB({
        accountId: newAccount.$id,
        name: newAccount.name,
        email: newAccount.email,
        username: user.username,
        imageUrl: avatarUrl,
    });

    if (!newUser) {
        throw new Error("Failed to save user to 
    database");
    }
    return newUser;

    } catch (error) {
    console.log(error);
    return error;
}
}


export async function saveUserToDB(user: {
accountId: string;
email: string;
name: string;
imageUrl: URL;
username?: string;
}) {
try {
    const newUser = await databases.createDocument(
        appwriteConfig.databaseId,
        appwriteConfig.userCollectionId,
        ID.unique(),
        user,
    );
    console.log(`the new user ${newUser}`);
    return newUser;
} catch (error) {
    console.log(error);
}
}`

config.ts

`import { Client, Account, Databases, Storage, 
Avatars } from 'appwrite'

export const appwriteConfig = {
projected: 
import.meta.env.VITE_APPWRITE_PROJECT_ID,
url: import.meta.env.VITE_APPWRITE_URL,
databaseId: 
import.meta.env.VITE_APPWRITE_DATABASE_ID,
storageId: 
import.meta.env.VITE_APPWRITE_STORAGE_ID,
userCollectionId: 
import.meta.env.VITE_APPWRITE_USERS_COLLECTION_ID,
postCollectionId: 
import.meta.env.VITE_APPWRITE_POSTS_COLLECTION_ID,
savesCollectionId: 
import.meta.env.VITE_APPWRITE_SAVES_COLLECTION_ID
}

export const client = new Client()
client.setProject(appwriteConfig.projectId);
client.setEndpoint(appwriteConfig.url);

export const account = new Account(client)
export const databases = new Databases(client)
export const storage = new Storage(client)
export const avatars = new Avatars(client)`

I am able to save sign up user data into appwrite auth but the user details is not showing in database collection of appwrite

How did you solved this problem? I have the same

Anyone know if the "free trial" of updating pics is over? The app is asking me to upgrade my account to be able to upgrade the images.

@luisfilipe21
File uploads are disabled for the starter plan, but you can still create a new media file in Appwrite media to upload the image. Simply create a new document manually in Appwrite and paste the imgUrl and imgId from the media. You can then read the files through the API.

Thanks @Samson-Jeyanthan ! It worked just fine with your tip. But now my "useGetPost" query is broken. Anyone elses with the same issue?

Keep getting this error for some I can't navigate back to to the rootlayout after making a new account

Who is doing this for his final year project, please?

iam getting same trying to solve since 4days its not gettin solved please help!!!

401 error unauthorised checked alamost everything its no use

Value must be a valid URL

Yes, I'm facing this issue too.

Did you find any solution to the issue?

Update: found the solution. see quoted comment below for the solution.

@Areeb5146 Nevermind, I managed to resolved it.

@naijabuz and @Areeb5146

The problem might be coming from "src/lib/appwrite/api.ts", there you might have added "async" in front of your getFilePreview function. You just need to remove that.

My code:

JSM's code:

I was receiving the same error as you two, but after removing the "async" keyword, the code works fine and I also get post entry in my database after creating and clicking the submit button. Hence why I think it might be the same for you two.

Thanks bro.

anyone faced this issue? Please help i get this when creating post
api.ts:130 AppwriteException: Invalid document structure: Attribute "imageUrl" has invalid format. Value must be a valid URL

yes I also got this issue!! if you have solved this issue then please help me?

It was not string. The function was returning a promise and he forgot to put await in front of it that's all. Let me paste the line for ya const fileUrl = await getFilePreview(uploadedFile.$id)

but that await has no use in statement. please see my attached ss

You must have a typo while defining ImageUrl .

Thanks @Samson-Jeyanthan ! It worked just fine with your tip. But now my "useGetPost" query is broken. Anyone elses with the same issue?

Any resolution to this? Still having issues with getPostByID, it seems the useParams function in EditPost.tsx isnt passing a valid ID. Some log prints from the id being passed in each file attached.

Added Note: Yes I have tried to copy the related code from the git, removing the || '' in tsx, adding the error throws, and adding the ? to the function arguments did not work either, same issue.

Thanks @Samson-Jeyanthan ! It worked just fine with your tip. But now my "useGetPost" query is broken. Anyone elses with the same issue?

Any resolution to this? Still having issues with getPostByID, it seems the useParams function in EditPost.tsx isnt passing a valid ID. Some log prints from the id being passed in each file attached.

Added Note: Yes I have tried to copy the related code from the git, removing the || '' in tsx, adding the error throws, and adding the ? to the function arguments did not work either, same issue.

Update: I have managed to figure it out. For anyone else who has the issue (ive seen a few others on the forum), the solution made me feel stupid.

in PostCard.tsx, navigate down to where you link and add image to your edit button.

Ensure your link uses BACKTICKS:

i got this problem in the begning it worked fine but from nowwhere this appeard.. can anyone help me pleasE?

i see the information is logged on databases appwrite but i dont know what i did wrong...

i got this problem in the begning it worked fine but from nowwhere this appeard.. can anyone help me pleasE?

i see the information is logged on databases appwrite but i dont know what i did wrong...

having this same problem now except it occurs when i try to sign in. this happens even when i reset the website and the cookies. it seems to have a session active already, so when we try to create a new session to get the information it does not let us because we cannot have multiple open sessions. i hope someone knows how to fix this.

i got this problem in the begning it worked fine but from nowwhere this appeard.. can anyone help me pleasE?

i see the information is logged on databases appwrite but i dont know what i did wrong...

I was able to fix this by inspecting element of the page, go to application at the top, then clear the local storage and cookies. your session is stored in the cookies.

@adrianhajdin I am stuck with creating a new post I keep getting this error and dont understand why I followed all the steps in the video.

@adrianhajdin here is the code

export async function createPost(post: INewPost) {
try{
//upload image to storage
const uploadedFile = await uploadFile(post.file[0]);

  if(!uploadedFile) throw Error;


  // Get File url
  const fileUrl = getFilePreview(uploadedFile.$id);

  if(!fileUrl) { 
    deleteFile(uploadedFile.$id)
    throw Error;
     
} 

// Convert tags in an array
const tags= post.tags?.replace(/ /g,'').split(',') || [];

// Save post to database
const newPost = await databases.createDocument(
    appwriteConfig.databaseId,
    appwriteConfig.postCollectionId,
    ID.unique(),
    {
        creator: post.userId,
        caption: post.caption,
        imageUrl: fileUrl,
        imageId: uploadedFile.$id,
        location: post.location,
        tags: tags

    }

    
        
    
)
if(!newPost) { 
    await deleteFile(uploadedFile.$id)
    throw Error;
}

return newPost

} catch (error) {
  console.log(error);

}

Keep getting this error when trying to log in, I'm stuck around 2:05 hrs of video and I;m not getting what is wrong. Please help