([]);
12 | const [hasMore, setHasMore] = useState(true);
13 |
14 | const handleLoadMore = () => {
15 | if (data?.documents) {
16 | const newPosts = data.documents.slice(posts.length, posts.length + LIMIT);
17 | if (newPosts.length > 0) {
18 | setPosts((prevPosts) => [...prevPosts, ...newPosts]);
19 | setHasMore(posts.length + newPosts.length < data.documents.length);
20 | } else {
21 | setHasMore(false);
22 | }
23 | }
24 | };
25 |
26 | useEffect(() => {
27 | if (data?.documents) {
28 | setPosts(data.documents.slice(0, LIMIT));
29 | setHasMore(data.documents.length > LIMIT);
30 | }
31 | }, [data]);
32 | if (isError)
33 | return (
34 |
35 | Something went wrong 💥
36 |
37 | );
38 | return (
39 | <>
40 |
41 |
42 |
Home
43 | {!isLoadingPosts ? (
44 | <>
45 |
46 | {posts &&
47 | posts?.map((post: Models.Document) => (
48 |
51 | {hasMore && (
52 |
53 | Load More
54 |
55 | )}
56 |
57 | ) : (
58 |
64 | )}
65 |
66 |
23 |
24 |
25 |
26 |
27 |
36 |
50 |
52 |
54 |
55 |
56 |
57 | );
58 | };
59 |
60 | export default App;
61 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 | SocialLinx
9 | One of my most prized projects is a social media application named 'SocialLinx', which enables users to share posts and engage with individuals globally. For the backend infrastructure, I leveraged the capabilities of the 'Appwrite' service the project is full responsive , live demo , (If you see an error message or run into an issue, please create bug report . thank you)
10 |
11 | ---
12 |
13 |
14 |
15 |
17 |
18 |
20 |
21 |
24 |
25 | ---
26 | ## Primary technologies employed
27 |
28 |
23 |
25 | );
26 |
27 | return (
28 |
29 |
34 |
39 |
40 | {currentUser.bio &&
}
41 | {currentUser.$id === user.id && (
42 |
47 | )}
48 | {currentIndex === 0 && (
49 | <>
50 |
{currentUser.name}'s Posts
51 |
52 | {currentUser.posts.map((post: any) => (
53 |
61 |
62 | )}
63 | {currentIndex === 1 && (
64 |
73 | )}
74 |
>({
37 | resolver: zodResolver(SigninValidation),
38 | defaultValues: {
39 | email: "",
40 | password: "",
41 | },
42 | });
43 |
44 | async function onSubmit(user: z.infer) {
45 | signOut();
46 | const session = await signInAccount(user);
47 |
48 | if (!session) {
49 | return toast({
50 | title: "Login in Failed",
51 | description:
52 | "Please make sure you enter the email and password correctly",
53 | });
54 | }
55 | const isLoggedIn = await checkAuthUser();
56 |
57 | if (isLoggedIn) {
58 | form.reset();
59 | navigate("/");
60 | } else {
61 | toast({
62 | title: "Login Failed. please try again.",
63 | });
64 | }
65 | }
66 |
67 | useEffect(() => {
68 | if (isAuth) {
69 | navigate("/");
70 | }
71 | }, [isAuth, navigate]);
72 | return (
73 |
133 | {!isLoading && !isLogging && (
134 |
135 | don't have an Account?
136 |
143 | )}
144 |
145 | );
146 | }
147 |
148 | export default LoginPage;
149 |
--------------------------------------------------------------------------------
/src/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | // Inspired by react-hot-toast library
4 | import * as React from "react"
5 |
6 | import type {
7 | ToastActionElement,
8 | ToastProps,
9 | } from "@/components/ui/toast"
10 |
11 | const TOAST_LIMIT = 1
12 | const TOAST_REMOVE_DELAY = 1000000
13 |
14 | type ToasterToast = ToastProps & {
15 | id: string
16 | title?: React.ReactNode
17 | description?: React.ReactNode
18 | action?: ToastActionElement
19 | }
20 |
21 | const actionTypes = {
22 | ADD_TOAST: "ADD_TOAST",
23 | UPDATE_TOAST: "UPDATE_TOAST",
24 | DISMISS_TOAST: "DISMISS_TOAST",
25 | REMOVE_TOAST: "REMOVE_TOAST",
26 | } as const
27 |
28 | let count = 0
29 |
30 | function genId() {
31 | count = (count + 1) % Number.MAX_SAFE_INTEGER
32 | return count.toString()
33 | }
34 |
35 | type ActionType = typeof actionTypes
36 |
37 | type Action =
38 | | {
39 | type: ActionType["ADD_TOAST"]
40 | toast: ToasterToast
41 | }
42 | | {
43 | type: ActionType["UPDATE_TOAST"]
44 | toast: Partial
45 | }
46 | | {
47 | type: ActionType["DISMISS_TOAST"]
48 | toastId?: ToasterToast["id"]
49 | }
50 | | {
51 | type: ActionType["REMOVE_TOAST"]
52 | toastId?: ToasterToast["id"]
53 | }
54 |
55 | interface State {
56 | toasts: ToasterToast[]
57 | }
58 |
59 | const toastTimeouts = new Map>()
60 |
61 | const addToRemoveQueue = (toastId: string) => {
62 | if (toastTimeouts.has(toastId)) {
63 | return
64 | }
65 |
66 | const timeout = setTimeout(() => {
67 | toastTimeouts.delete(toastId)
68 | dispatch({
69 | type: "REMOVE_TOAST",
70 | toastId: toastId,
71 | })
72 | }, TOAST_REMOVE_DELAY)
73 |
74 | toastTimeouts.set(toastId, timeout)
75 | }
76 |
77 | export const reducer = (state: State, action: Action): State => {
78 | switch (action.type) {
79 | case "ADD_TOAST":
80 | return {
81 | ...state,
82 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
83 | }
84 |
85 | case "UPDATE_TOAST":
86 | return {
87 | ...state,
88 | toasts: state.toasts.map((t) =>
89 | t.id === action.toast.id ? { ...t, ...action.toast } : t
90 | ),
91 | }
92 |
93 | case "DISMISS_TOAST": {
94 | const { toastId } = action
95 |
96 | // ! Side effects ! - This could be extracted into a dismissToast() action,
97 | // but I'll keep it here for simplicity
98 | if (toastId) {
99 | addToRemoveQueue(toastId)
100 | } else {
101 | state.toasts.forEach((toast) => {
102 | addToRemoveQueue(toast.id)
103 | })
104 | }
105 |
106 | return {
107 | ...state,
108 | toasts: state.toasts.map((t) =>
109 | t.id === toastId || toastId === undefined
110 | ? {
111 | ...t,
112 | open: false,
113 | }
114 | : t
115 | ),
116 | }
117 | }
118 | case "REMOVE_TOAST":
119 | if (action.toastId === undefined) {
120 | return {
121 | ...state,
122 | toasts: [],
123 | }
124 | }
125 | return {
126 | ...state,
127 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
128 | }
129 | }
130 | }
131 |
132 | const listeners: Array<(state: State) => void> = []
133 |
134 | let memoryState: State = { toasts: [] }
135 |
136 | function dispatch(action: Action) {
137 | memoryState = reducer(memoryState, action)
138 | listeners.forEach((listener) => {
139 | listener(memoryState)
140 | })
141 | }
142 |
143 | type Toast = Omit
144 |
145 | function toast({ ...props }: Toast) {
146 | const id = genId()
147 |
148 | const update = (props: ToasterToast) =>
149 | dispatch({
150 | type: "UPDATE_TOAST",
151 | toast: { ...props, id },
152 | })
153 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
154 |
155 | dispatch({
156 | type: "ADD_TOAST",
157 | toast: {
158 | ...props,
159 | id,
160 | open: true,
161 | onOpenChange: (open) => {
162 | if (!open) dismiss()
163 | },
164 | },
165 | })
166 |
167 | return {
168 | id: id,
169 | dismiss,
170 | update,
171 | }
172 | }
173 |
174 | function useToast() {
175 | const [state, setState] = React.useState(memoryState)
176 |
177 | React.useEffect(() => {
178 | listeners.push(setState)
179 | return () => {
180 | const index = listeners.indexOf(setState)
181 | if (index > -1) {
182 | listeners.splice(index, 1)
183 | }
184 | }
185 | }, [state])
186 |
187 | return {
188 | ...state,
189 | toast,
190 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
191 | }
192 | }
193 |
194 | export { useToast, toast }
195 |
--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as LabelPrimitive from "@radix-ui/react-label"
3 | import { Slot } from "@radix-ui/react-slot"
4 | import {
5 | Controller,
6 | ControllerProps,
7 | FieldPath,
8 | FieldValues,
9 | FormProvider,
10 | useFormContext,
11 | } from "react-hook-form"
12 |
13 | import { cn } from "@/lib/utils"
14 | import { Label } from "@/components/ui/label"
15 |
16 | const Form = FormProvider
17 |
18 | type FormFieldContextValue<
19 | TFieldValues extends FieldValues = FieldValues,
20 | TName extends FieldPath = FieldPath
21 | > = {
22 | name: TName
23 | }
24 |
25 | const FormFieldContext = React.createContext(
26 | {} as FormFieldContextValue
27 | )
28 |
29 | const FormField = <
30 | TFieldValues extends FieldValues = FieldValues,
31 | TName extends FieldPath = FieldPath
32 | >({
33 | ...props
34 | }: ControllerProps) => {
35 | return (
36 |
37 |
39 | )
40 | }
41 |
42 | const useFormField = () => {
43 | const fieldContext = React.useContext(FormFieldContext)
44 | const itemContext = React.useContext(FormItemContext)
45 | const { getFieldState, formState } = useFormContext()
46 |
47 | const fieldState = getFieldState(fieldContext.name, formState)
48 |
49 | if (!fieldContext) {
50 | throw new Error("useFormField should be used within ")
51 | }
52 |
53 | const { id } = itemContext
54 |
55 | return {
56 | id,
57 | name: fieldContext.name,
58 | formItemId: `${id}-form-item`,
59 | formDescriptionId: `${id}-form-item-description`,
60 | formMessageId: `${id}-form-item-message`,
61 | ...fieldState,
62 | }
63 | }
64 |
65 | type FormItemContextValue = {
66 | id: string
67 | }
68 |
69 | const FormItemContext = React.createContext(
70 | {} as FormItemContextValue
71 | )
72 |
73 | const FormItem = React.forwardRef<
74 | HTMLDivElement,
75 | React.HTMLAttributes
76 | >(({ className, ...props }, ref) => {
77 | const id = React.useId()
78 |
79 | return (
80 |
81 |
82 |
83 | )
84 | })
85 | FormItem.displayName = "FormItem"
86 |
87 | const FormLabel = React.forwardRef<
88 | React.ElementRef,
89 | React.ComponentPropsWithoutRef
90 | >(({ className, ...props }, ref) => {
91 | const { error, formItemId } = useFormField()
92 |
93 | return (
94 | ,
106 | React.ComponentPropsWithoutRef
107 | >(({ ...props }, ref) => {
108 | const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 |
110 | return (
111 |
129 | >(({ className, ...props }, ref) => {
130 | const { formDescriptionId } = useFormField()
131 |
132 | return (
133 |
139 | )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 |
143 | const FormMessage = React.forwardRef<
144 | HTMLParagraphElement,
145 | React.HTMLAttributes
146 | >(({ className, children, ...props }, ref) => {
147 | const { error, formMessageId } = useFormField()
148 | const body = error ? String(error?.message) : children
149 |
150 | if (!body) {
151 | return null
152 | }
153 |
154 | return (
155 |
161 | {body}
162 |
163 | )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 |
167 | export {
168 | useFormField,
169 | Form,
170 | FormItem,
171 | FormLabel,
172 | FormControl,
173 | FormDescription,
174 | FormMessage,
175 | FormField,
176 | }
177 |
--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ToastPrimitives from "@radix-ui/react-toast"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 | import { X } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const ToastProvider = ToastPrimitives.Provider
11 |
12 | const ToastViewport = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, ...props }, ref) => (
16 | ,
45 | React.ComponentPropsWithoutRef &
46 | VariantProps
47 | >(({ className, variant, ...props }, ref) => {
48 | return (
49 | ,
60 | React.ComponentPropsWithoutRef
61 | >(({ className, ...props }, ref) => (
62 | ,
75 | React.ComponentPropsWithoutRef
76 | >(({ className, ...props }, ref) => (
77 |
86 |
88 | ))
89 | ToastClose.displayName = ToastPrimitives.Close.displayName
90 |
91 | const ToastTitle = React.forwardRef<
92 | React.ElementRef,
93 | React.ComponentPropsWithoutRef
94 | >(({ className, ...props }, ref) => (
95 | ,
105 | React.ComponentPropsWithoutRef
106 | >(({ className, ...props }, ref) => (
107 |
116 |
117 | type ToastActionElement = React.ReactElement
118 |
119 | export {
120 | type ToastProps,
121 | type ToastActionElement,
122 | ToastProvider,
123 | ToastViewport,
124 | Toast,
125 | ToastTitle,
126 | ToastDescription,
127 | ToastClose,
128 | ToastAction,
129 | }
130 |
--------------------------------------------------------------------------------
/src/pages/auth/signup/Index.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { zodResolver } from "@hookform/resolvers/zod";
3 | import { useToast } from "@/components/ui/use-toast";
4 |
5 | import {
6 | Form,
7 | FormControl,
8 | FormField,
9 | FormItem,
10 | FormLabel,
11 | FormMessage,
12 | } from "@/components/ui/form";
13 | import { Input } from "@/components/ui/input";
14 | import { useForm } from "react-hook-form";
15 | import { SignupValidation } from "@/lib/validation";
16 | import { z } from "zod";
17 | import LoadingSpinner from "../../../ui/LoadingSpinner";
18 | import { Link, useNavigate } from "react-router-dom";
19 | import {
20 | useCreateUserAccount,
21 | useSignInAccount,
22 | } from "@/lib/react-query/QueriesAndMutations";
23 | import { useUserContext } from "@/context/AuthContext";
24 | import PasswordInput from "@/ui/PasswordInput";
25 | import SignupHeader from "./SignupHeader";
26 | import { useState } from "react";
27 | function SignUpPage() {
28 | const [isCreating, setIsCreating] = useState(false);
29 | const { mutateAsync: createNewUserAccount } = useCreateUserAccount();
30 | const { mutateAsync: signInAccount } = useSignInAccount();
31 | const { toast } = useToast();
32 | const { checkAuthUser } = useUserContext();
33 | const navigate = useNavigate();
34 |
35 | const form = useForm>({
36 | resolver: zodResolver(SignupValidation),
37 | defaultValues: {
38 | name: "",
39 | username: "",
40 | email: "",
41 | password: "",
42 | },
43 | });
44 |
45 | async function onSubmit(values: z.infer) {
46 | setIsCreating(true);
47 | const newUser = await createNewUserAccount(values);
48 | if (!newUser) {
49 | setIsCreating(false);
50 |
51 | return toast({
52 | title: "Sign up Failed. please try again.",
53 | });
54 | }
55 |
56 | const session = await signInAccount({
57 | email: values.email,
58 | password: values.password,
59 | });
60 |
61 | if (!session) {
62 | setIsCreating(false);
63 |
64 | return toast({
65 | title: "Sign in Failed. please try again.",
66 | });
67 | }
68 |
69 | const isLoggedIn = await checkAuthUser();
70 | if (isLoggedIn) {
71 | setIsCreating(false);
72 |
73 | form.reset();
74 | navigate("/");
75 | } else {
76 | setIsCreating(false);
77 |
78 | return toast({
79 | title: "Sign up Failed. please try again.",
80 | });
81 | }
82 | }
83 |
84 | return (
85 |
188 |
189 | );
190 | }
191 |
192 | export default SignUpPage;
193 |
--------------------------------------------------------------------------------
/src/utils/constants.ts:
--------------------------------------------------------------------------------
1 | export const sidebarLinks = [
2 | {
3 | route: "/",
4 | label: "Home",
5 | },
6 | {
7 | route: "/explore",
8 | label: "Explore",
9 | },
10 | {
11 | route: "/all-users",
12 | label: "People",
13 | },
14 | {
15 | route: "/saved",
16 | label: "Saved",
17 | },
18 | {
19 | route: "/create-post",
20 | label: "Create Post",
21 | },
22 | ];
23 |
24 | export const bottombarLinks = [
25 | {
26 | route: "/",
27 | label: "Home",
28 | },
29 | {
30 | route: "/explore",
31 | label: "Explore",
32 | },
33 | {
34 | route: "/saved",
35 | label: "Saved",
36 | },
37 | {
38 | route: "/create-post",
39 | label: "Create",
40 | },
41 | ];
42 |
43 | export const COUNTRIES = [
44 | "Afghanistan",
45 | "Albania",
46 | "Algeria",
47 | "Andorra",
48 | "Angola",
49 | "Antigua and Barbuda",
50 | "Argentina",
51 | "Armenia",
52 | "Australia",
53 | "Austria",
54 | "Azerbaijan",
55 | "Bahamas",
56 | "Bahrain",
57 | "Bangladesh",
58 | "Barbados",
59 | "Belarus",
60 | "Belgium",
61 | "Belize",
62 | "Benin",
63 | "Bhutan",
64 | "Bolivia",
65 | "Bosnia and Herzegovina",
66 | "Botswana",
67 | "Brazil",
68 | "Brunei",
69 | "Bulgaria",
70 | "Burkina Faso",
71 | "Burundi",
72 | "Cabo Verde",
73 | "Cambodia",
74 | "Cameroon",
75 | "Canada",
76 | "Central African Republic",
77 | "Chad",
78 | "Chile",
79 | "China",
80 | "Colombia",
81 | "Comoros",
82 | "Congo",
83 | "Costa Rica",
84 | "Côte d'Ivoire",
85 | "Croatia",
86 | "Cuba",
87 | "Cyprus",
88 | "Czech Republic",
89 | "Denmark",
90 | "Djibouti",
91 | "Dominica",
92 | "Dominican Republic",
93 | "Ecuador",
94 | "Egypt",
95 | "El Salvador",
96 | "Equatorial Guinea",
97 | "Eritrea",
98 | "Estonia",
99 | "Eswatini",
100 | "Ethiopia",
101 | "Fiji",
102 | "Finland",
103 | "France",
104 | "Gabon",
105 | "Gambia",
106 | "Georgia",
107 | "Germany",
108 | "Ghana",
109 | "Greece",
110 | "Grenada",
111 | "Guatemala",
112 | "Guinea",
113 | "Guinea-Bissau",
114 | "Guyana",
115 | "Haiti",
116 | "Honduras",
117 | "Hungary",
118 | "Iceland",
119 | "India",
120 | "Indonesia",
121 | "Iran",
122 | "Iraq",
123 | "Ireland",
124 | "Italy",
125 | "Jamaica",
126 | "Japan",
127 | "Jordan",
128 | "Kazakhstan",
129 | "Kenya",
130 | "Kiribati",
131 | "Kuwait",
132 | "Kyrgyzstan",
133 | "Laos",
134 | "Latvia",
135 | "Lebanon",
136 | "Lesotho",
137 | "Liberia",
138 | "Libya",
139 | "Liechtenstein",
140 | "Lithuania",
141 | "Luxembourg",
142 | "Madagascar",
143 | "Malawi",
144 | "Malaysia",
145 | "Maldives",
146 | "Mali",
147 | "Malta",
148 | "Marshall Islands",
149 | "Mauritania",
150 | "Mauritius",
151 | "Mexico",
152 | "Micronesia",
153 | "Moldova",
154 | "Monaco",
155 | "Mongolia",
156 | "Montenegro",
157 | "Morocco",
158 | "Mozambique",
159 | "Myanmar",
160 | "Namibia",
161 | "Nauru",
162 | "Nepal",
163 | "Netherlands",
164 | "New Zealand",
165 | "Nicaragua",
166 | "Niger",
167 | "Nigeria",
168 | "North Korea",
169 | "North Macedonia",
170 | "Norway",
171 | "Oman",
172 | "Pakistan",
173 | "Palau",
174 | "Palestine",
175 | "Panama",
176 | "Papua New Guinea",
177 | "Paraguay",
178 | "Peru",
179 | "Philippines",
180 | "Poland",
181 | "Portugal",
182 | "Qatar",
183 | "Romania",
184 | "Russia",
185 | "Rwanda",
186 | "Saint Kitts and Nevis",
187 | "Saint Lucia",
188 | "Saint Vincent and the Grenadines",
189 | "Samoa",
190 | "San Marino",
191 | "Sao Tome and Principe",
192 | "Saudi Arabia",
193 | "Senegal",
194 | "Serbia",
195 | "Seychelles",
196 | "Sierra Leone",
197 | "Singapore",
198 | "Slovakia",
199 | "Slovenia",
200 | "Solomon Islands",
201 | "Somalia",
202 | "South Africa",
203 | "South Korea",
204 | "South Sudan",
205 | "Spain",
206 | "Sri Lanka",
207 | "Sudan",
208 | "Suriname",
209 | "Sweden",
210 | "Switzerland",
211 | "Syria",
212 | "Taiwan",
213 | "Tajikistan",
214 | "Tanzania",
215 | "Thailand",
216 | "Timor-Leste",
217 | "Togo",
218 | "Tonga",
219 | "Trinidad and Tobago",
220 | "Tunisia",
221 | "Turkey",
222 | "Turkmenistan",
223 | "Tuvalu",
224 | "Uganda",
225 | "Ukraine",
226 | "United Arab Emirates",
227 | "United Kingdom",
228 | "United States",
229 | "Uruguay",
230 | "Uzbekistan",
231 | "Vanuatu",
232 | "Vatican City",
233 | "Venezuela",
234 | "Vietnam",
235 | "Yemen",
236 | "Zambia",
237 | "Zimbabwe",
238 | ];
239 |
240 | export const TAGS = [
241 | { tag: "love", emoji: "❤️" },
242 | { tag: "business", emoji: "💼" },
243 | { tag: "programming", emoji: "💻" },
244 | { tag: "music", emoji: "🎵" },
245 | { tag: "movie", emoji: "🎬" },
246 | { tag: "travel", emoji: "✈️" },
247 | { tag: "photography", emoji: "📷" },
248 | { tag: "art", emoji: "🎨" },
249 | { tag: "design", emoji: "✏️" },
250 | { tag: "fashion", emoji: "👗" },
251 | { tag: "lifestyle", emoji: "🌟" },
252 | { tag: "food", emoji: "🍔" },
253 | { tag: "fitness", emoji: "🏋️♂️" },
254 | { tag: "health", emoji: "❤️🩹" },
255 | { tag: "technology", emoji: "🔧" },
256 | { tag: "science", emoji: "🔬" },
257 | { tag: "education", emoji: "🎓" },
258 | { tag: "sports", emoji: "⚽️" },
259 | { tag: "gaming", emoji: "🎮" },
260 | { tag: "books", emoji: "📚" },
261 | { tag: "culture", emoji: "🗿" },
262 | { tag: "nature", emoji: "🌲" },
263 | { tag: "adventure", emoji: "🗺️" },
264 | { tag: "DIY", emoji: "🔨" },
265 | { tag: "craft", emoji: "✂️" },
266 | { tag: "beauty", emoji: "💄" },
267 | { tag: "cooking", emoji: "🍳" },
268 | { tag: "baking", emoji: "🍰" },
269 | { tag: "gardening", emoji: "🌸" },
270 | { tag: "pets", emoji: "🐶" },
271 | { tag: "parenting", emoji: "👶" },
272 | { tag: "relationships", emoji: "💑" },
273 | { tag: "motivation", emoji: "🔥" },
274 | { tag: "inspiration", emoji: "💡" },
275 | { tag: "personal growth", emoji: "🌱" },
276 | { tag: "mindfulness", emoji: "🧘" },
277 | { tag: "meditation", emoji: "🧘♂️" },
278 | { tag: "spirituality", emoji: "🕉️" },
279 | { tag: "finance", emoji: "💰" },
280 | { tag: "marketing", emoji: "📈" },
281 | { tag: "entrepreneurship", emoji: "🚀" },
282 | { tag: "productivity", emoji: "✅" },
283 | { tag: "organization", emoji: "📅" },
284 | { tag: "sustainability", emoji: "♻️" },
285 | { tag: "environment", emoji: "🌍" },
286 | { tag: "activism", emoji: "✊" },
287 | { tag: "politics", emoji: "🏛️" },
288 | { tag: "news", emoji: "📰" },
289 | { tag: "humor", emoji: "😆" },
290 | { tag: "comedy", emoji: "😂" },
291 | { tag: "celebrities", emoji: "🌟" },
292 | { tag: "entertainment", emoji: "🎉" },
293 | ];
294 |
--------------------------------------------------------------------------------
/src/ui/PostForm.tsx:
--------------------------------------------------------------------------------
1 | import { zodResolver } from "@hookform/resolvers/zod";
2 | import { useForm } from "react-hook-form";
3 | import { z } from "zod";
4 | import { Button } from "@/components/ui/button";
5 | import {
6 | Form,
7 | FormControl,
8 | FormField,
9 | FormItem,
10 | FormLabel,
11 | FormMessage,
12 | } from "@/components/ui/form";
13 | import { Textarea } from "@/components/ui/textarea";
14 | import FileUploader from "./FileUploader";
15 | import { PostValidation } from "@/lib/validation";
16 | import { Models } from "appwrite";
17 | import {
18 | useCreatePost,
19 | useUpdatePost,
20 | } from "@/lib/react-query/QueriesAndMutations";
21 | import { useUserContext } from "@/context/AuthContext";
22 | import { toast } from "@/components/ui/use-toast";
23 | import { Link, useNavigate } from "react-router-dom";
24 | import LoadingSpinner from "./LoadingSpinner";
25 | import { COUNTRIES, TAGS } from "@/utils/constants";
26 |
27 | type PostFormPorps = {
28 | post?: Models.Document;
29 | action: "create" | "update";
30 | };
31 |
32 | function PostForm({ post, action }: PostFormPorps) {
33 | const { user } = useUserContext();
34 | const { mutateAsync: createPost, isPending: isLoading } = useCreatePost();
35 | const { mutateAsync: updatePost, isPending: isUpdating } = useUpdatePost();
36 | const navigate = useNavigate();
37 | const form = useForm>({
38 | resolver: zodResolver(PostValidation),
39 | defaultValues: {
40 | caption: post ? post?.caption : "",
41 | file: [],
42 | location: post ? post?.location : "",
43 | tags: post ? post?.tags.join(",") : "",
44 | },
45 | });
46 |
47 | async function onSubmit(values: z.infer) {
48 | console.log(values);
49 |
50 | if (post && action === "update") {
51 | const updatedPost = await updatePost({
52 | ...values,
53 | postId: post.$id,
54 | imageId: post?.imageId,
55 | imageUrl: post?.imageUrl,
56 | });
57 |
58 | if (!updatedPost) {
59 | toast({ title: "Update failed, Please Try again!" });
60 | }
61 | return navigate(`/posts/${post.$id}`);
62 | }
63 |
64 | const newPost = await createPost({
65 | ...values,
66 | userId: user.id,
67 | });
68 | if (!newPost) {
69 | toast({
70 | title:
71 | "invalid Post , please try again and make sure you enter the correct values",
72 | });
73 | return;
74 | }
75 | navigate("/");
76 | }
77 |
78 | return (
79 |
196 |
197 | );
198 | }
199 |
200 | export default PostForm;
201 |
--------------------------------------------------------------------------------
/src/pages/home/updateProfile/UpdateProfile.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | FormControl,
4 | FormField,
5 | FormItem,
6 | FormLabel,
7 | FormMessage,
8 | Form,
9 | } from "@/components/ui/form";
10 | import { Input } from "@/components/ui/input";
11 | import { Textarea } from "@/components/ui/textarea";
12 | import { toast } from "@/components/ui/use-toast";
13 | import { useUserContext } from "@/context/AuthContext";
14 | import {
15 | useGetUserById,
16 | useUpdateUser,
17 | } from "@/lib/react-query/QueriesAndMutations";
18 | import { ProfileValidation } from "@/lib/validation";
19 | import LoadingSpinner from "@/ui/LoadingSpinner";
20 | import ProfileUploader from "@/ui/ProfileUploader";
21 | import { zodResolver } from "@hookform/resolvers/zod";
22 | import { useForm } from "react-hook-form";
23 | import { FaEdit } from "react-icons/fa";
24 | import { useNavigate, useParams } from "react-router-dom";
25 | import * as z from "zod";
26 |
27 | function UpdateProfile() {
28 | const navigate = useNavigate();
29 | const { id } = useParams();
30 | const { user, setUser } = useUserContext();
31 |
32 | const { data: currentUser, isLoading } = useGetUserById(id || "");
33 | const { mutateAsync: updateUser, isPending: isLoadingUpdate } =
34 | useUpdateUser();
35 |
36 | const form = useForm>({
37 | resolver: zodResolver(ProfileValidation),
38 | defaultValues: {
39 | file: [],
40 | name: user.name,
41 | username: user.username,
42 | email: user.email,
43 | bio: user.bio || "",
44 | },
45 | });
46 |
47 | const handleUpdate = async (value: z.infer) => {
48 | const updatedUser = await updateUser({
49 | userId: currentUser?.$id,
50 | name: value.name,
51 | bio: value.bio,
52 | file: value.file,
53 | imageUrl: currentUser?.imageUrl,
54 | imageId: currentUser?.imageId,
55 | });
56 |
57 | if (!updatedUser) {
58 | toast({
59 | title: `Update user failed. Please try again.`,
60 | });
61 | }
62 |
63 | setUser({
64 | ...user,
65 | name: updatedUser?.name,
66 | bio: updatedUser?.bio,
67 | imageUrl: updatedUser?.imageUrl,
68 | });
69 | return navigate(`/profile/${id}`);
70 | };
71 |
72 | if (isLoading)
73 | return (
74 |
75 |
77 | );
78 | return (
79 |
80 |
81 |
82 |
84 | Update Profile
85 |
86 |
87 |
195 |
196 |
197 |
![Logo]({"/logo.webp"}){kind=logo}
8 | SocialLinx
9 | 
15 | 
34 | 
29 |
30 | ## Building and running on localhost
31 |
32 | First install dependencies:
33 |
34 | ```sh
35 | npm install
36 | ```
37 |
38 | To run in hot module reloading mode:
39 |
40 | ```sh
41 | npm run dev
42 | ```
43 |
44 | To create a production build:
45 |
46 | ```sh
47 | npm run build
48 | ```
49 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | // eslint-disable-next-line
3 | const defaultTheme = require("tailwindcss/defaultTheme");
4 |
5 | module.exports = {
6 | darkMode: ["class"],
7 | content: [
8 | "./pages/**/*.{ts,tsx}",
9 | "./components/**/*.{ts,tsx}",
10 | "./app/**/*.{ts,tsx}",
11 | "./src/**/*.{ts,tsx}",
12 | ],
13 | theme: {
14 | container: {
15 | center: true,
16 | padding: "2rem",
17 | screens: {
18 | "2xl": "1400px",
19 | },
20 | },
21 | extend: {
22 | colors: {
23 | "primary-300": "#ad2f00",
24 | "primary-500": "#f93e00",
25 | "primary-700": "#e5795c",
26 | "secondary-500": "#FFB620",
27 | "off-white": "#D0DFFF",
28 | red: "#FF5A5A",
29 | "dark-1": "#0D1117",
30 | "dark-2": "#161B22",
31 | "dark-3": "#21262D",
32 | "dark-4": "#30363D",
33 | "light-1": "#cdcdcd",
34 | "light-2": "#EFEFEF",
35 | "light-3": "#EFEFEF",
36 | },
37 | screens: {
38 | xs: "480px",
39 | },
40 | width: {
41 | 420: "420px",
42 | 465: "465px",
43 | },
44 | fontFamily: {
45 | inter: ["Inter", "sans-serif"],
46 | },
47 | keyframes: {
48 | "accordion-down": {
49 | from: { height: 0 },
50 | to: { height: "var(--radix-accordion-content-height)" },
51 | },
52 | "accordion-up": {
53 | from: { height: "var(--radix-accordion-content-height)" },
54 | to: { height: 0 },
55 | },
56 | "fade-down": {
57 | from: { transform: "translateY(-20px)", opacity: "0" },
58 | to: { transform: "translateY(0px)", opacity: "1" },
59 | },
60 | "fade-up": {
61 | from: { transform: "translateY(20px)", opacity: "0" },
62 | to: { transform: "translateY(0px)", opacity: "1" },
63 | },
64 | "fade-left": {
65 | from: { transform: "translateX(-20px)", opacity: "0" },
66 | to: { transform: "translateX(0px)", opacity: "1" },
67 | },
68 | "fade-right": {
69 | from: { transform: "translateX(20px)", opacity: "0" },
70 | to: { transform: "translateX(0px)", opacity: "1" },
71 | },
72 | },
73 | animation: {
74 | "accordion-down": "accordion-down 0.2s ease-out",
75 | "accordion-up": "accordion-up 0.2s ease-out",
76 | "fade-down": "fade-down 0.8s ease-out",
77 | "fade-up": "fade-up 0.8s ease-out",
78 | "fade-left": "fade-left 0.8s ease-out",
79 | "fade-right": "fade-right 0.8s ease-out",
80 | },
81 | },
82 | },
83 | plugins: [require("tailwindcss-animate")],
84 | };
85 |
--------------------------------------------------------------------------------
/src/pages/home/profile/Profile.tsx:
--------------------------------------------------------------------------------
1 | import { useUserContext } from "@/context/AuthContext";
2 | import { useGetUserById } from "@/lib/react-query/QueriesAndMutations";
3 | import LoadingSpinner from "@/ui/LoadingSpinner";
4 | import { useParams } from "react-router-dom";
5 | import ProfileStatus from "./ProfileStatus";
6 | import ProfileBio from "./ProfileBio";
7 | import ProfileInfo from "./ProfileInfo";
8 | import { useState } from "react";
9 | import SavePostItem from "../saved/SavePostItem";
10 | import ProfileUserPosts from "./ProfileUserPosts";
11 | import ProfileButtonsAndAmounts from "./ProfileButtonsAndAmounts";
12 |
13 | function Profile() {
14 | const [currentIndex, setCurrentIndex] = useState(0);
15 | const { id } = useParams();
16 | const { user } = useUserContext();
17 |
18 | const { data: currentUser, isLoading } = useGetUserById(id || "");
19 |
20 | if (!currentUser || isLoading)
21 | return (
22 |