-
-
Save adrianhajdin/4d2500bf5af601bbd9f4f596298d33ac to your computer and use it in GitHub Desktop.
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", | |
}, | |
]; |
@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; | |
} | |
} |
https://drive.google.com/file/d/13_7FofRAC3wARqPtAVPi53QNJJRd5RH_/view?usp=sharing |
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", | |
} |
/** @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')], | |
}; |
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; | |
}; |
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; | |
} |
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); | |
}; |
Follow Button isnt Working?
Hello guys, every time I try to show a photo, I get this error, would anyone know how to solve it?
you need to go to Appwrite and there you need to make these changes in your collections Like he's doing in this video at 1:05:30 https://www.youtube.com/watch?v=_W3R2VwRyF4
I allowed the all CRUD operations in the Appwrite Post,Save and user unable to resolve this issue kinldy some one help me out
Bro i want to know that what you have given here
because the issue you are facing is related to CORS Policy and for this you need to edit this if you have given *.netlify or .vercel then obviously it won't work for localhost so i would prefer you to just give 👉👈 (asterik) in that option so that your server can accept request from all ends and you can edit this by going to (Your Project)>Overview(in sidebar) and then scroll to bottom you'll see "Integrations" under this you'll see a tab "Platforms" there you will see your project and click on it and then a page will open from where you can change the hostname and i hope this will solve your issue
AppwriteException: The current user is not authorized to perform the requested action.(api.ts:100)
This happens when I try to sign in, even though I enable permissions properly as indicated in the video, it still won't work.
I have been having a problem with GET https://cloud.appwrite.io/v1/account 401 (Unauthorized). Immediately erroring out on page load. I have checked my env links and names that are all correct, database attributes on Appwrite as well as checking over pretty much all of the code at this point. The console has been pointing to the api ts file's getCurrentUser(). However, the code all seems to replicate what Adrian had written at the time.
When I sign up a user, the data is sent to the database, but I am not redirected, and I get a failed to sign up toast notification.
export async function getCurrentUser() { try { const currentAccount = await account.get();if (!currentAccount) throw Error; const currentUser = await databases.listDocuments( appwriteConfig.databaseId, appwriteConfig.userCollectionId, [Query.equal("accountId", currentAccount.$id)] ); if (!currentUser) throw Error; return currentUser.documents[0];
} catch (error) { console.log(error); return null; } }
Hey, did you ever get this fixed ? I have the same problem. I have my permissions set to anyone for creating, reading, and updating on appwrite.
Did you solve this ? Please let me know, this is my college project
I cloned the repo,,. and did everything he did on the appwrite,. but i couldnt create a post.. what to do???? Please somebody help me please
Hey did you properly create the post collection within appwrite?
Hey did you properly create the post collection within appwrite?
Thank You!!
Yep, I did, the issue is that Apprwrite provides 50Mb of storage only, so updated the permission once again. Everything works fine now☺
Awesome :)
Does anyway know of a way to use appwrite in a nextjs app with a middleware?
can somebody help me with this error , i cannot seem to navigate to the homepage after signing up , It says database not found . ANy help will be appreciated
ppwriteException: Database not found
at Client. (http://localhost:5173/node_modules/.vite/deps/appwrite.js?v=ec80e568:419:17)
at Generator.next ()
at fulfilled (http://localhost:5173/node_modules/.vite/deps/appwrite.js?v=ec80e56
Finally, lets try for your reference, the chat feature has just been created ( https://whistly.vercel.app ), i thinkthe most complicated one is this
Can you please guide me to its source code??, whistly is made very nicely.
Hello , Please can i reach out to you concerning an error i have with creating the database in appwrite , it dosent seem to work
check your appwrite make sure you actually have exsisting database if yoou do, make sure you have included the right value for your databaseId
Yes i have an existing database and the database value is also correct in the .env.local file for appwrite. I have doublechecked and even created a new database but it's still the same.
Alongside the database error , i am also getting this error :
AppwriteException: User (role: guests) missing scope (account)
at Client. (http://localhost:5174/node_modules/.vite/deps/appwrite.js?v=8f725b5c:850:17)
at Generator.next ()
at fulfilled (http://localhost:5174/node_modules/.vite/deps/appwrite.js?v=8f725b5c:488:24)
It seems the error is coming from the apprwrite endpoint but i don't know how to rectify it. Thank you
check your appwrite make sure you actually have exsisting database if yoou do, make sure you have included the right value for your databaseId
``
change your vite.config.js to this
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@src': path.resolve(__dirname, "src"),
'@components': path.resolve(__dirname, 'src/components'),
'@contexts': path.resolve(__dirname, 'src/contexts'),
'@utils': path.resolve(__dirname, 'src/utils'),
// Add other aliases as needed
},
},
});
you can change the aliases as well
I am also getting an error:
AppwriteException: User (role: guests) missing scope (account) at Client.<anonymous>
. - Which means that the user session was not detected by Appwrite. appwrite/appwrite#1203
- Does anyone run into this issue as well? How did you fix it?
Thank you
bro how to solve this error
so which file controls that
I'm getting this unauthorized 401 error as soon as the page loads and I cannot sign up any users because the api is not communicating with the webpage. I need help.