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);
};

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

If you got the error that you're email is invalid when trying to create a new user:
With the latest version(or maybe any version) of appwrite v14.0.1. make sure you send the correct informations in the correct orders.

On /src/lib/appwrite/api.ts make sure you're respecting this order:
ID.unique(), user.email, user.password, user.name
if for any reason you added a phone number it's between email and password.

type IContextType = {
user: IUser;
isLoading: boolean;
setUser: React.Dispatch<React.SetStateAction>;
isAuthenticated: boolean;
setIsAuthenticated: React.Dispatch<React.SetStateAction>;
checkAuthUser: () => Promise;
};

For anyone who was missing this in the types/index.ts file, it was in the context/AuthContext file.

type IContextType = { user: IUser; isLoading: boolean; setUser: React.Dispatch<React.SetStateAction>; isAuthenticated: boolean; setIsAuthenticated: React.Dispatch<React.SetStateAction>; checkAuthUser: () => Promise; };

For anyone who was missing this in the types/index.ts file, it was in the context/AuthContext file.

Thank you for posting this. I am running into this right now. Is there more that would need to be added to the Index file? Getting "Requires 1 type argument(s)" for both 'React.SetStateAction' and Promise

EDIT:
Answered my own question, heres the full function- (From 1:43:07)

export type IContextType = {
  user: IUser;
  isLoading: boolean;
  setUser: React.Dispatch<React.SetStateAction<IUser>>;
  isAuthenticated: boolean;
  setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
  checkAuthUser: () => Promise<boolean>;
};

Ah great glad you caught it! seems a lot of the code in the post disappeared when i post it as text instead of markdown

In api.ts, createEmailSession is showing as error.

maybe your password is not longer than 8 characters, check in the database because there is a validation before that

I am getting this error everytime I try to sign in or sign up. i even tried clearing the session in application tab of inspect but nothing happened. please help

In api.ts, createEmailSession is showing as error.

maybe your password is not longer than 8 characters, check in the database because there is a validation before that

the call in the api for sign in has since been changed by appwrite. it should be createEmailPasswordSession instead of createEmailSession https://appwrite.io/docs/references/cloud/client-web/account (under Create email password session)

I am getting this error everytime I try to sign in or sign up. i even tried clearing the session in application tab of inspect but nothing happened. please help

I got this as well. after completing the sign in page, i tested the app and got this error. I saw that i was getting a bunch of new accounts in appwrite console but the app wasn't able to sign in properly. So i ended up deleting all the users in the users database and all the auth entries as well, did a hard reset on the browser and cleared the cache, then it worked.

In api.ts, createEmailSession is showing as error.

maybe your password is not longer than 8 characters, check in the database because there is a validation before that

the call in the api for sign in has since been changed by appwrite. it should be createEmailPasswordSession instead of createEmailSession https://appwrite.io/docs/references/cloud/client-web/account (under Create email password session)

thankyou this was helpfull

when I try to login with email and password it show error in response how can I solve it.
i.e.
{
"message": "Creation of a session is prohibited when a session is active.",
"code": 401,
"type": "user_session_already_exists",
"version": "0.13.23"
}

can someone please help me install the thing

hi how can I fix this

@ceeskrrt did you install node.js on your system?

@ceeskrrt did you install node.js on your system?

I did but maybe i did it wrong

i still face the 404 error pl help

i still face the 404 error pl help

If you're not sure that you installed node correctly, I suggest that you get some knowledge before atempting this, this is advanced web development. I'm not trying to be a ***** but being realistic. There's no way you would be able to modify this code of whatever you need to do with it.
There's great beginner tutorial. I don't know well this guy, he maybe have one, if he has, he seems to be a really good teacher, so go for it. If he doesn't, Colt Steele is great and easy to follow and have a course called "The web developer bootcamp" witch is awesome, I did it 8 years ago and this course just unblock everything that I was struggling with (it's been updated lol).

Hello guys, every time I try to show a photo, I get this error, would anyone know how to solve it?