7 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | pakage-lock.json
26 | yarn-debug.log*
27 | yarn-error.log*
28 |
29 | # local env files
30 | .env*.local
31 |
32 | # vercel
33 | .vercel
34 |
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 |
39 | .env
40 | package-lock.json
--------------------------------------------------------------------------------
/appwrite-gen/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "appwrite-gen",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "scripts": {
7 | "schema:generate": "yarn ts-node ./src/generateSchema.ts",
8 | "schema:prepare": "yarn ts-node ./src/prepareSchema.ts"
9 | },
10 | "dependencies": {
11 | "@types/react": "^18.3.2",
12 | "dotenv": "^16.3.1",
13 | "node-appwrite": "^11.1.0",
14 | "ts-node": "^10.9.2",
15 | "typescript": "^5.3.3"
16 | },
17 | "devDependencies": {
18 | "@types/node": "^20.12.12",
19 | "typescript": "^5.4.5"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/redux/store.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { configureStore } from "@reduxjs/toolkit";
3 | import postsReducer from "@/redux/reducers/postsReducer";
4 | import authReducer from "@/redux/reducers/authReducer";
5 | import bookmarkReducer from "@/redux/reducers/bookmarkReducer";
6 | import cursorReducer from "@/redux/reducers/cursorReducer";
7 |
8 | export const store = configureStore({
9 | reducer: {
10 | posts: postsReducer,
11 | auth: authReducer,
12 | bookmarks: bookmarkReducer,
13 | cursor: cursorReducer,
14 | },
15 | });
16 |
17 | export type RootState = ReturnTypeYou have received an Email for support
8 |Sender Email Address: {email}
9 |User Query:-
10 |{message}
11 |{children}
;
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/(support)/terms/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { Metadata } from "next";
4 |
5 | export const metadata: Metadata = {
6 | title: "Terms Of Use Agreement - Palettegram",
7 | description:
8 | "Palletegrm is a social media application dedicated to professionals like graphic designers, UI designers, UX designers, Developers, etc. to post and their color palletes as well as use other's color palletes.",
9 |
10 | keywords:
11 | "Palettegram, Appwrite, Color Designer, Palettegram social media, behance, dribbble, made for designers",
12 |
13 | alternates: {
14 | canonical: "https://palettegram.vercel.app/privacy",
15 | },
16 | };
17 |
18 | export default function PrivacyLayout({ children }: { children: React.ReactNode }) {
19 | return {children}
;
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/(auth)/updatepassword/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Metadata } from "next";
2 |
3 | export const metadata: Metadata = {
4 | title: "UpdatePassword | Palettegram - from professionals by professionals",
5 | description:
6 | "Palletegrm is a social media application dedicated to professionals like graphic designers, UI designers, UX designers, Developers, etc. to post and their color palletes as well as use other's color palletes.",
7 |
8 | keywords:
9 | "Palettegram, Appwrite, Color Designer, Palettegram social media, behance, dribbble, made for designers",
10 |
11 | alternates: {
12 | canonical: "https://palettegram.vercel.app/updatepassword",
13 | },
14 | };
15 |
16 | export default function UpdatePasswordLayout({ children }: { children: React.ReactNode }) {
17 | return
13 |
21 | Go Home
22 |
23 |
24 |
5 |
21 | );
22 | });
23 | }
24 |
--------------------------------------------------------------------------------
/src/redux/reducers/bookmarkReducer.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { createSlice } from "@reduxjs/toolkit";
3 | import type { PayloadAction } from "@reduxjs/toolkit";
4 |
5 | import { BookmarkInitType, Bookmark } from "@/types/index.d";
6 |
7 | const initialState: any = {
8 | postId: [],
9 | userId: "",
10 | error: false,
11 | loading: false,
12 | };
13 |
14 | const bookmarkSlice = createSlice({
15 | name: "bookmarks",
16 | initialState,
17 | reducers: {
18 | saveBookmarkToStore: (state, action) => {
19 | state.loading = true;
20 | state.userId = action.payload.userId;
21 | state.postId = action.payload.postId;
22 | state.error = false;
23 | state.loading = false;
24 | },
25 | getBookmarks: (state, action) => {
26 | state.loading = true;
27 | state.data = action.payload;
28 | state.error = false;
29 | state.loading = false;
30 | },
31 | },
32 | });
33 |
34 | export const { saveBookmarkToStore, getBookmarks } = bookmarkSlice.actions;
35 |
36 | export default bookmarkSlice.reducer;
37 |
--------------------------------------------------------------------------------
/src/helper/postDisplayTimeFormatter.ts:
--------------------------------------------------------------------------------
1 | import { FormatOnType } from "@/types/index";
2 |
3 | export function postDisplayTimeFormatter(postCreationTime: string) {
4 | const timeObj = {
5 | seconds: 1000,
6 | minutes: 1000 * 60,
7 | hours: 1000 * 60 * 60,
8 | days: 1000 * 60 * 60 * 24,
9 | postCreatedTime: new Date(postCreationTime),
10 | currentTime: new Date(),
11 | calcTimeDiff(formatOn: FormatOnType) {
12 | const timeDiff = this.currentTime.valueOf() - this.postCreatedTime.valueOf();
13 | return Math.round(timeDiff / this[formatOn]);
14 | },
15 | };
16 |
17 | if (timeObj.calcTimeDiff("seconds") < 60) {
18 | return `${timeObj.calcTimeDiff("seconds")}s`;
19 | } else if (timeObj.calcTimeDiff("minutes") < 60) {
20 | return `${timeObj.calcTimeDiff("minutes")}m`;
21 | } else if (timeObj.calcTimeDiff("hours") <= 24) {
22 | return `${timeObj.calcTimeDiff("hours")}h`;
23 | } else if (timeObj.calcTimeDiff("days") < 365) {
24 | return `${timeObj.calcTimeDiff("days")}d`;
25 | } else {
26 | return `${timeObj.calcTimeDiff("days") / 365}y`;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Palettegram
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/app/(auth)/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import BlobBackground from "@/components/core/blob";
3 |
4 | export default function AuthLayout({ children }: { children: React.ReactNode }) {
5 | return (
6 | <>
7 |
6 |
20 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
19 | -
14 |
15 |
16 |
17 |
8 |
27 | {children}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/core/supportHeader/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface SupportHeaderType {
4 | title: string;
5 | updatedDate: string;
6 | effectiveDate: string;
7 | }
8 |
9 | export default function SupportHeader({ title, updatedDate, effectiveDate }: SupportHeaderType) {
10 | const options: any = {
11 | year: "numeric",
12 | month: "long",
13 | day: "2-digit",
14 | };
15 | return (
16 |
9 |
11 |
12 |
14 |
15 |
17 |
18 |
20 |
21 |
23 |
24 |
26 | 18 | Palettegram 19 |
20 |21 | {title} 22 |
23 |
24 |
28 | Updated on {new Date(updatedDate).toLocaleDateString("en-US", options)}
25 |·
26 |Effective from {new Date(effectiveDate).toLocaleDateString("en-US", options)}
27 |
32 | {isVisible && (
33 |
40 | )}
41 |
42 | );
43 | };
44 |
45 | export default ScrollToTop;
46 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 |
3 | export function middleware(request: NextRequest) {
4 | const { pathname } = request.nextUrl;
5 |
6 | const isPublicRoutes =
7 | pathname === "/login" || pathname === "/register" || pathname === "/verify/:path*";
8 | const isPrivateRoutes =
9 | pathname === "/feed" ||
10 | pathname === "/post" ||
11 | pathname === "/post/:path*" ||
12 | pathname === "/user/:path*";
13 |
14 | let isTokenAvailable: string = request.cookies.get("accountId")?.value || "";
15 | let isUserVerified: string = request.cookies.get("isVerified")?.value || "";
16 | // commenting these both console as coderabbitai didnt allow
17 |
18 | if (isPublicRoutes && isTokenAvailable) {
19 | return NextResponse.redirect(new URL("/", request.nextUrl));
20 | }
21 |
22 | if (isPrivateRoutes && isUserVerified.toLowerCase() === "false") {
23 | return NextResponse.redirect(new URL("/login", request.nextUrl));
24 | }
25 |
26 | return NextResponse.next();
27 | }
28 |
29 | // See "Matching Paths" below to learn more
30 | export const config = {
31 | matcher: [
32 | "/",
33 | "/login",
34 | "/register",
35 | "/verify/:path*",
36 | "/feed",
37 | "/post",
38 | "/post/:path*",
39 | "/user/:path*",
40 | ],
41 | };
42 |
--------------------------------------------------------------------------------
/src/styles/shepherdStyles.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 | @import "tailwindcss/components";
3 | @import "tailwindcss/utilities";
4 |
5 | .shepherd-element {
6 | @apply bg-white rounded-xl border-4 border-primary shadow-lg p-1 transform transition-transform duration-300 scale-100 z-custom;
7 | }
8 |
9 | .shepherd-element:hover {
10 | @apply scale-105;
11 | }
12 |
13 | .shepherd-header {
14 | @apply flex justify-between items-center;
15 | }
16 |
17 | .shepherd-title {
18 | @apply text-2xl font-bold text-gray-800 m-0;
19 | }
20 |
21 | .shepherd-close {
22 | @apply bg-transparent border-none text-gray-800 text-xl cursor-pointer transition-colors duration-200;
23 | }
24 |
25 | .shepherd-close:hover {
26 | @apply text-primary;
27 | }
28 |
29 | .shepherd-text {
30 | @apply text-base text-gray-600 mt-2 leading-relaxed;
31 | }
32 |
33 | .shepherd-footer {
34 | @apply flex justify-end mt-4;
35 | }
36 |
37 | .shepherd-button {
38 | @apply bg-primary text-white rounded-full px-4 py-2 text-base font-bold cursor-pointer transition-all duration-300 ml-2;
39 | }
40 |
41 |
42 | .shepherd-button:hover {
43 | @apply bg-primary transform -translate-y-1 !important;
44 | }
45 |
46 | .shepherd-button:active {
47 | @apply transform translate-y-0;
48 | }
49 |
50 | .shepherd-modal-overlay-container {
51 | @apply z-50
52 | }
--------------------------------------------------------------------------------
/src/components/core/buttons/index.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import Link from "next/link";
3 |
4 | interface Button {
5 | href?: string; // ? means optional
6 | newTab?: boolean;
7 | children: ReactNode;
8 | size: "small" | "normal" | "big";
9 | type?: "button" | "submit" | "reset";
10 | }
11 |
12 | function ButtonLong({ href = "#", newTab = false, children, size ,type }: Button) {
13 | const buttonSizes = {
14 | small: "px-6 py-2 text-sm",
15 | normal: "px-10 py-2 text-base",
16 | big: "px-14 py-3 text-md",
17 | };
18 |
19 | if (type) {
20 | // If a type prop is provided, render a button element
21 | return (
22 |
25 | );
26 | }
27 |
28 | // else render a link element
29 | return (
30 | <>
31 |
37 | {children}
38 |
39 |
40 | );
41 | }
42 |
43 | function ButtonCircle() {
44 | return <>;
45 | }
46 |
47 | export { ButtonLong, ButtonCircle };
48 |
--------------------------------------------------------------------------------
/src/backend/appwrite.config.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Account, Client, Databases, Storage, ID, Query } from "appwrite";
3 | const appwriteClient = new Client();
4 | appwriteClient
5 | .setEndpoint("https://cloud.appwrite.io/v1")
6 | .setProject(String(process.env.NEXT_PUBLIC_PROJECT_ID));
7 |
8 | const account = new Account(appwriteClient);
9 | const db = new Databases(appwriteClient);
10 | const storage = new Storage(appwriteClient);
11 |
12 | // appwrite keys
13 | const palettegramDB = String(process.env.NEXT_PUBLIC_DATABASE_ID);
14 | const usersCollection = String(process.env.NEXT_PUBLIC_USERS_COLLECTION);
15 | const postsCollection = String(process.env.NEXT_PUBLIC_POSTS_COLLECTION);
16 | const bookmarksCollection = String(process.env.NEXT_PUBLIC_BOOKMARKS_COLLECTION);
17 | const contactsCollection = String(process.env.NEXT_PUBLIC_CONTACTS_COLLECTION);
18 | const likesCollection = String(process.env.NEXT_PUBLIC_LIKES_COLLECTION);
19 | const commentsCollection = String(process.env.NEXT_PUBLIC_COMMENTS_COLLECTION);
20 |
21 | const postBucketStorage = String(process.env.NEXT_PUBLIC_POST_BUCKET_ID);
22 | const userBucketStorage = String(process.env.NEXT_PUBLIC_USER_BUCKET_ID);
23 |
24 | export { appwriteClient, account, db, storage, ID, Query };
25 |
26 | export {
27 | palettegramDB,
28 | usersCollection,
29 | postsCollection,
30 | bookmarksCollection,
31 | contactsCollection,
32 | likesCollection,
33 | commentsCollection,
34 | postBucketStorage,
35 | userBucketStorage,
36 | };
37 |
--------------------------------------------------------------------------------
/src/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import { userCollectionDB } from "./auth";
2 |
3 | export type PostInstanceType = {
4 | userId: userCollectionDB | string;
5 | postTitle: string;
6 | postImages: string[];
7 | colors?: string | null;
8 | commentsCount?: number;
9 | likesCount: number;
10 | isActive: boolean;
11 | $id?: string;
12 | $collectionId?: string;
13 | $createdAt?: string;
14 | };
15 |
16 | export type PostInitStateType = {
17 | posts: PostInstanceType[];
18 | error: boolean;
19 | loading: boolean;
20 | };
21 |
22 | export type Bookmark = {
23 | accountId: string;
24 | bookmark: string[];
25 | };
26 |
27 | export type BookmarkInitType = {
28 | data: Bookmark[];
29 | error: boolean;
30 | loading: boolean;
31 | };
32 |
33 | export type UserFromDB = {
34 | accountId: string;
35 | username: string;
36 | fullName: string;
37 | email: string;
38 | isVerified: boolean;
39 | about: string | null;
40 | userLink: string | null;
41 | avatarURL: string | null;
42 | bannerURL: string | null;
43 | createdAt: Date;
44 | updatedAt: Date;
45 | profession: string | null;
46 | location: string | null;
47 | };
48 |
49 | export type FormatOnType = "seconds" | "minutes" | "hours" | "days";
50 | export type UserBookMarkType = {
51 | userId: string;
52 | postId: string[] | undefined;
53 | error: boolean;
54 | loading: boolean;
55 | };
56 |
57 | export type userImageUploadSizeTypes = {
58 | isbannerImage: boolean;
59 | intialImageUrl: string;
60 | title: string;
61 | };
62 |
--------------------------------------------------------------------------------
/src/app/loading.tsx:
--------------------------------------------------------------------------------
1 | export default function Loader() {
2 | return (
3 |
4 |
20 | Loading...
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/(auth)/verify/loading.tsx:
--------------------------------------------------------------------------------
1 | export default function Loader() {
2 | return (
3 |
4 |
20 | Loading...
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/docs/appwrite.md:
--------------------------------------------------------------------------------
1 | # Appwrite setup
2 |
3 | ## Initial setup 🛠️
4 |
5 | 1. Creating an account on [Appwrite Cloud](https://cloud.appwrite.io/).
6 |
7 | 2. Create a new project with any name you want and choose **web** as a platform.
8 |
9 | - Name the web project anything you like and Set Hostname to `localhost`.
10 |
11 | 3. Copy `.env.example` file to `.env.local` and `appwrite-gen/.env.example` file to `appwrite-gen/.env` manually or using:
12 |
13 | ```sh
14 | cp .env.example .env.local
15 | cp appwrite-gen/.env.example appwrite-gen/.env
16 | ```
17 |
18 | 4. Go to settings and copy your project id and paste it in `.env.local` file as well as in `appwrite-gen/.env` files.
19 |
20 | 5. While on the settings page click on **View API Keys** button.
21 |
22 | 6. Create an API key with any name you like, set the scopes to all and copy it's value and paste it in `appwrite-gen/.env` file as `PROJECT_API_KEY` variable.
23 |
24 | 7. Setup your database with the command:
25 |
26 | ```sh
27 | yarn schema:prepare
28 | ```
29 |
30 | this should create a database with users, posts, etc. collections.
31 |
32 | 8. Fill in the rest of `.env.local` file with the appropriate ids if not already set.
33 |
34 | ## How do I make changes to the structure of the database? 🤔
35 |
36 | 1. Make changes through the appwrite console.
37 |
38 | 2. Generate the schema with the command:
39 |
40 | ```sh
41 | yarn schema:generate
42 | ```
43 |
44 | this should update `appwrite-gen/schema.json` with your changes.
45 |
46 | 3. Simply push this file through the git workflow mentioned [here](git.md).
47 |
48 | ## Still got issues? 😟
49 |
50 | Feel free to open issues if you face any. 😀
51 |
--------------------------------------------------------------------------------
/src/app/(auth)/verify/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Suspense } from "react";
3 | import Loader from "./loading";
4 | import VerificationComponent from "@/components/pages/auth/verification";
5 | import Footer from "@/components/core/footer";
6 | import Image from "next/image";
7 | import { ButtonLong } from "@/components/core/buttons";
8 |
9 | type VerifyProps = {
10 | searchParams: { [key: string]: string | string[] | undefined };
11 | };
12 |
13 | export default function VerifyPage({ searchParams }: VerifyProps) {
14 | const { userId, secret } = searchParams;
15 |
16 | if (userId === undefined && secret === undefined) {
17 | return (
18 | <>
19 |
21 |
32 |
22 |
28 | Open your email
29 |
30 |
31 | 24 | Please check your inbox/spam and{" "} 25 | verify your account. 26 |
27 |
39 |
41 | );
42 | }
43 |
44 | if (postState.error) {
45 | return Error...
; 46 | } 47 | 48 | return ( 49 | <> 50 | {postState.posts.length < 0 &&
55 | {post.isActive &&
57 | ))}
58 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/core/themeButton/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Sun, Moon, Loader2 } from "lucide-react";
3 | import { useTheme } from "next-themes";
4 | import { useState, useEffect } from "react";
5 |
6 | export default function ThemeButton({ iconSize }: { iconSize: number }) {
7 | const { theme, setTheme } = useTheme();
8 | const [mounted, setMounted] = useState(false);
9 |
10 | // Required this effect for state mounting
11 | useEffect(() => {
12 | setMounted(true);
13 | }, []);
14 |
15 | if (!mounted) {
16 | // return Loading...;
17 | return (
18 | <>
19 |
25 |
26 | );
27 | }
28 |
29 | return (
30 | <>
31 | {theme === "dark" ? (
32 |
39 | ) : (
40 |
47 | )}
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | * {
6 | margin: 0;
7 | padding: 0;
8 | box-sizing: border-box;
9 | scroll-behavior: smooth;
10 | }
11 |
12 | /* :root {
13 | --foreground-rgb: 0, 0, 0;
14 | --background-rgb: 255, 255, 255;
15 | }
16 |
17 | @media (prefers-color-scheme: dark) {
18 | :root {
19 | --foreground-rgb: 255, 255, 255;
20 | --background-rgb: 28, 34, 58;
21 | }
22 | }
23 |
24 | body {
25 | color: rgb(var(--foreground-rgb));
26 | background: rgb(var(--background-rgb));
27 | #b6005596
28 | } */
29 |
30 | /* .shape1 {
31 | position: absolute;
32 | width: 700px;
33 | height: 400px;
34 | right: 0%;
35 | top: 25%;
36 | background: linear-gradient(100deg, rgba(182, 0, 85, 0.588) 10.98%, rgba(110, 93, 248, 0) 100%);
37 | filter: blur(100px);
38 | } */
39 |
40 | @layer utilities {
41 | .custom-shadow {
42 | filter: drop-shadow(0 5px 150px rgba(182, 0, 85, 0.75));
43 | }
44 | }
45 |
46 | @layer components {
47 | .card {
48 | @apply p-4 mx-2 md:m-0 md:p-8 rounded-xl;
49 | @apply bg-gray-200/50 dark:bg-gray-700/50;
50 | width: 100%;
51 | box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
52 | }
53 | }
54 |
55 | /* floating animated image */
56 | @keyframes floating {
57 | 0% {
58 | transform: translate(0, 0);
59 | }
60 |
61 | 50% {
62 | transform: translate(0, 8px);
63 | }
64 |
65 | 100% {
66 | transform: translate(0, 0);
67 | }
68 | }
69 |
70 | .floating-image {
71 | animation-name: floating;
72 | animation-duration: 3s;
73 | animation-timing-function: ease-in-out;
74 | animation-iteration-count: infinite;
75 | }
76 |
77 | .tiptap.ProseMirror {
78 | outline: none;
79 | }
80 |
81 | .is-active {
82 | background: black;
83 | color: #fff;
84 | }
85 |
86 | p:empty::before {
87 | content: "";
88 | display: inline-block;
89 | }
90 |
--------------------------------------------------------------------------------
/docs/setup.md:
--------------------------------------------------------------------------------
1 | # 🤏 Pre-requisites
2 |
3 | Before installation, please make sure you have already installed the following tools:
4 |
5 | - [Git](https://git-scm.com/downloads)
6 |
7 | - [NodeJs (18 or above)](https://nodejs.org/en/download/)
8 |
9 | - [Yarn](https://yarnpkg.com/)
10 |
11 | - [Appwrite Account](appwrite.md)
12 |
13 | ## 🛠️ Installation Steps
14 |
15 | - [Fork](https://github.com/Sanchitbajaj02/palettegram/fork) the project. Click on the `Fork` button in the top right to get started.
16 |
17 | - Use these commands in your git bash/terminal to make a clone of the project in your local machine.
18 |
19 | - Clone your forked repo by replacing the URL in this command:
20 |
21 | ```bash
22 | git clone https://github.com/Sanchitbajaj02/palettegram.git
23 | ```
24 |
25 | ## 🏃♂️ Steps for running the development server
26 |
27 | - Navigate to the project directory:
28 |
29 | ```bash
30 | cd palettegram
31 | ```
32 |
33 | - Install the dependencies for the project.
34 |
35 | **Note:** make sure to install yarn as the project will not work properly with npm or pnpm.
36 |
37 | ```bash
38 | yarn install --frozen-lockfile
39 | ```
40 |
41 | - Setup the environment variables by referring `.env.example` file.
42 |
43 | - Start the development server using the below command:
44 |
45 | ```bash
46 | yarn dev
47 | ```
48 |
49 | ## 🏃♂️ Set up using docker
50 |
51 | - Navigate to the project directory:
52 |
53 | ```bash
54 | cd palettegram
55 | ```
56 |
57 | - Create a file `.env.local` and fill it with the environment variables.
58 |
59 | ```bash
60 | cp .env.example .env.local
61 | ```
62 |
63 | - Start the development server using the below command:
64 |
65 | ```bash
66 | docker compose -f docker-compose.dev.yml up
67 | ```
68 |
69 | - For the production server, run the following command:
70 |
71 | ```bash
72 | docker compose -f docker-compose.yml up
73 | # or
74 | docker compose up
75 | ```
--------------------------------------------------------------------------------
/src/app/post/[id]/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState, Suspense } from "react";
4 | import { getSinglePost } from "@/backend/posts.api";
5 | import { PostInstanceType } from "@/types";
6 | import Navbar from "@/components/core/navbar";
7 | import Loader from "@/app/loading";
8 | import Footer from "@/components/core/footer";
9 | import PostById from "@/components/pages/post";
10 |
11 | type Prop = {
12 | params: {
13 | id: string;
14 | };
15 | };
16 |
17 | const PostDisplay = ({ params: { id } }: Prop) => {
18 | const [post, setPost] = useState
11 |
12 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/docs/git.md:
--------------------------------------------------------------------------------
1 | # Git workflow best practices 🛠️
2 |
3 | ## Initial setup
4 |
5 | - Fork the repository
6 | - Clone this repository on your local machine
7 |
8 | ```bash
9 | git clone https://github.com/
13 |
21 |
22 |
25 |
26 |
27 | Anonymous User
23 |3d ago
24 |{props.comment}
28 | 29 |
30 |
31 |
33 |
34 |
35 |
37 |
38 |
39 |
41 |
42 | 27 | 28 | 2. Create a new branch starting from that newly updated main branch, and link it to your GitHub fork. (For example your branch name is MyNewIssue) 29 | 30 | - `git checkout -b MyNewIssue` 31 | - `git push --set-upstream origin MyNewIssue` 32 | 33 |
34 | 35 | 3. Make your changes, commit them, and push them to your fork 36 | 37 | - _make changes_ 38 | - `git add
Error...
; 23 | } 24 | 25 | if (userBookmarks.loading) { 26 | returnLoading...
; 27 | } 28 | 29 | return ( 30 | <> 31 |
33 | {
36 | router.back();
37 | }}
38 | className="hover:cursor-pointer hover:text-primary-light transition-all duration-300"
39 | />
40 |
42 |
43 | My saved items
41 |
48 |
50 | );
51 | })
52 | ) : (
53 | No bookmarks saved
54 | )} 55 |Trending Posts
9 |
10 | {trendingPosts.length &&
11 | trendingPosts.map((element: any, index: number) => {
12 | return (
13 |
18 |
32 |
19 |
24 |
25 | 21 | {element.username} 22 |
23 |{element.caption}
26 | 27 |Read more...
28 | 29 | ); 30 | })} 31 |
33 |
34 | About
35 |
36 |
37 | Accessibility
38 |
39 |
40 | Help Center
41 |
42 |
43 | Privacy
44 |
45 |
46 | Terms
47 |
48 |
49 |
38 |
64 | );
65 | };
66 |
67 | export default Newsletter;
68 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "palettegram",
3 | "description": "Palettegram is a social media application dedicated to professionals like graphic designers, UI/UX designers, Developers, etc. to leverage UI designs, design ideas, UX approaches and color palettes.",
4 | "version": "1.0.5",
5 | "private": true,
6 | "homepage": ".",
7 | "engines": {
8 | "node": ">=18.0.x"
9 | },
10 | "workspaces": [
11 | "appwrite-gen"
12 | ],
13 | "scripts": {
14 | "format": "prettier --write src/",
15 | "dev": "next dev",
16 | "build": "next build",
17 | "start": "next start",
18 | "lint": "next lint",
19 | "preinstall": "npx only-allow yarn",
20 | "prepare": "husky install",
21 | "schema:generate": "yarn workspace appwrite-gen schema:generate",
22 | "schema:prepare": "yarn workspace appwrite-gen schema:prepare"
23 | },
24 | "repository": {
25 | "type": "git",
26 | "url": "git+https://github.com/Sanchitbajaj02/palettegram.git"
27 | },
28 | "bugs": {
29 | "url": "https://github.com/Sanchitbajaj02/palettegram/issues"
30 | },
31 | "keywords": [
32 | "palettegram",
33 | "open-source",
34 | "nextjs",
35 | "appwrite"
36 | ],
37 | "dependencies": {
38 | "@reduxjs/toolkit": "1.9.7",
39 | "@tiptap/pm": "2.1.16",
40 | "@tiptap/react": "2.1.16",
41 | "@tiptap/starter-kit": "2.1.16",
42 | "@types/node": "20.4.10",
43 | "@types/react": "18.2.20",
44 | "@types/react-dom": "18.2.7",
45 | "appwrite": "15.0.0",
46 | "autoprefixer": "10.4.14",
47 | "emailjs-com": "^3.2.0",
48 | "eslint": "8.47.0",
49 | "eslint-config-next": "13.4.13",
50 | "framer-motion": "10.18.0",
51 | "gsap": "^3.12.5",
52 | "html-react-parser": "5.1.1",
53 | "lenis": "^1.1.6",
54 | "lucide-react": "0.316.0",
55 | "next": "13.5.4",
56 | "next-themes": "0.2.1",
57 | "nookies": "2.5.2",
58 | "postcss": "8.4.31",
59 | "react": "18.2.0",
60 | "react-animated-cursor": "2.11.2",
61 | "react-colorful": "5.6.1",
62 | "react-confetti": "^6.1.0",
63 | "react-dom": "18.2.0",
64 | "react-redux": "8.1.2",
65 | "react-use": "17.5.0",
66 | "resend": "2.1.0",
67 | "sharp": "0.33.1",
68 | "shepherd.js": "12.0.4",
69 | "sonner": "1.4.0",
70 | "tailwindcss": "3.4.1"
71 | },
72 | "devDependencies": {
73 | "@commitlint/cli": "19.0.3",
74 | "@commitlint/config-conventional": "19.0.3",
75 | "@tailwindcss/typography": "0.5.10",
76 | "encoding": "0.1.13",
77 | "husky": "8.0.3",
78 | "lint-staged": "15.2.0",
79 | "prettier": "3.0.1",
80 | "tailwind-scrollbar": "3.0.5"
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/docs/gssoc.md:
--------------------------------------------------------------------------------
1 | # GirlScript Summer of Code Guidelines & Code of Conduct
2 |
3 |
4 | For FAQ, visit [GSSoC FAQ Page](https://gssoc.girlscript.tech/faq)
5 |
6 | ## Code of Conduct
7 |
8 | * Do not spam. If any member is found spamming on this server, then they will face severe consequences. Spamming includes excessive copy-pastes, picture/ meme/ links/ GIF spam, reaction spam, any form of phishing link/NSFW/obscene content, and walls of text.
9 | * Do not harass or insult other members. This includes threats, internet attacks,gender-based insults, and cyberbullying. If such actions are reported to the organizers, then actions will be taken.
10 | * Do not promote other Discord servers, send invite links or promote any YouTube channels/videos. Promotional content is not permitted without notifying the organizers.
11 | * Every channel in this server is created for a specific purpose. Make sure you convey the message in the right channel. Always keep within the designated topic of every channel.
12 | * You can post your queries regarding the program in the #general or #doubts channels of the server. Use corresponding project channels if the query is project-specific.
13 | * Once you have created a username for yourself, maintain the same throughout the program. If any participant changes his/her username, then the username which is not registered with the organizing committee will cease to be a part of the program.
14 | * If any participant leaves the server at any time before the conclusion of the program in May, then he/she or anyone else will not be allowed to continue with the program further.
15 | * Please do not create official or unofficial groups on WhatsApp, Signal, Telegram, Slack, or any other social networking apps without the sole permission of the organizers.
16 | * Do not disrespect moderators, team members, organizers, sponsors, admins, mentors, contributors, and industry professionals or anyone else in the server as it is not allowed to disrespect anyone
17 | * Abstain from Direct Messaging to moderators, organizers, sponsors, admins, mentors, contributors, and industry professionals other than the team members without prior permission.
18 | * You are expected to have a patient and a motivating nature throughout the program as that what opensource is about. Always maintain good behavior by respecting your fellow teammates, mentors, admins, and the organizing members.
19 | * The mentors are required to fully commit themselves to the program. They are expected to provide their assistance to budding open-source enthusiasts throughout the three months.
20 | * Failure to maintain the code of conduct will result in termination of participation in GSSoC. If you're removed at any point you will not be added back to program so be careful.
21 |
--------------------------------------------------------------------------------
/src/components/pages/user/userPosts/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Loader from "@/app/loading";
3 | import { toastify } from "@/helper/toastify";
4 | import Image from "next/image";
5 | import Link from "next/link";
6 | import { Suspense, useEffect, useState, useCallback, useMemo } from "react";
7 | import { parseCookies } from "nookies";
8 | import { postDisplayTimeFormatter } from "@/helper/postDisplayTimeFormatter";
9 | import { getAllUserPosts } from "@/backend/posts.api";
10 | import { Models } from "appwrite";
11 | import SinglePost from "@/components/core/posts/SinglePost";
12 | import { PostInstanceType } from "@/types";
13 | import { useSelector } from "react-redux";
14 |
15 | export default function UserPosts({ userId }: { userId: string }) {
16 | const [userPosts, setUserPosts] = useStateNewsletter
39 |40 | Sign up for latest updates and offers 41 |
42 | 54 |55 | Will be used in accordance with our policy 56 |
57 | {/*
58 |
*/}
63 |
59 |
73 |
74 |
60 | {userPosts && userPosts.length > 0
61 | ? userPosts?.map((post: any, index: number) => (
62 |
68 |
69 | {userId && userPosts?.length === 0 && (
70 |
63 | {post.isActive &&
65 | ))
66 | : "No user posts"}
67 | No Posts Yet
71 | )} 72 |
30 |
46 | );
47 | })}
48 |
31 |
45 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
44 | -
39 |
40 |
41 |
42 |
{
61 | if (el) trailRef.current[index] = el;
62 | }}
63 | style={{
64 | position: "fixed",
65 | left: `0px`, // Initial position
66 | top: `0px`,
67 | width: `${15 - index}px`, // Increase size here
68 | height: `${15 - index}px`, // Increase size here
69 | backgroundColor: `rgba(255, 0, 0, ${0.5 - index * 0.05})`, // Fade with index
70 | borderRadius: "50%",
71 | pointerEvents: "none",
72 | transform: "translate(-50%, -50%)",
73 | }}
74 | />
75 | ))}
76 |
77 | );
78 | };
79 |
80 | export default CursorTrail;
81 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "@/styles/globals.css";
2 | import { Poppins } from "next/font/google";
3 | import { Metadata } from "next";
4 | import ReduxProvider from "@/redux/ReduxProvider";
5 | import { Toaster } from "sonner";
6 | import ScrollToTop from "@/components/ScrollToTop/scrolltotop";
7 | import CursorTrail from "@/components/core/cursor/cursorTrail";
8 | import CursorTrailHandler from "@/components/core/cursor/cursorTrailHandler";
9 |
10 | import { Providers } from "./providers";
11 | import LenisWrapper from "@/helper/leniswrapper";
12 |
13 | const poppinsFont = Poppins({
14 | subsets: ["latin"],
15 | weight: ["400", "500", "600", "700", "800", "900"],
16 | variable: "--font-poppins",
17 | });
18 |
19 | export const metadata: Metadata = {
20 | metadataBase: new URL("https://palettegram.vercel.app"),
21 | title: "Palettegram - Social Media for Professionals",
22 | description:
23 | "Palettegram is a social media application dedicated to professionals like graphic designers, UI/UX designers, Developers, etc. to leverage UI designs, design ideas, UX approaches and color palettes.",
24 |
25 | keywords:
26 | "Palettegram, Appwrite, Color Designer, Palettegram social media, behance, dribbble, made for designers, Palatogram, Palette gram, Palettegram social, palettegram app",
27 |
28 | alternates: {
29 | canonical: "https://palettegram.vercel.app",
30 | },
31 |
32 | openGraph: {
33 | type: "website",
34 | locale: "en_US",
35 | url: "https://palettegram.vercel.app",
36 | siteName: "Palettegram - Social Media for Professionals",
37 | title: "Palettegram - Social Media for Professionals",
38 | description:
39 | "Palettegram is a social media application dedicated to professionals like graphic designers, UI/UX designers, Developers, etc. to leverage UI designs, design ideas, UX approaches and color palettes.",
40 | images: [
41 | {
42 | url: "/assets/meta-image.png", // Replace with your actual OG image URL
43 | width: 1200,
44 | height: 630,
45 | alt: "Palettegram - from professionals by professionals",
46 | },
47 | ],
48 | },
49 | };
50 |
51 | export default async function RootLayout({ children }: { children: React.ReactNode }) {
52 | return (
53 |
54 |
59 |
60 | {/* Cursor trail handler and trail */}
61 |
70 |
72 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/src/components/pages/auth/verification/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useEffect, useState } from "react";
3 | import { verifyUser } from "@/backend/auth.api";
4 | import { useRouter } from "next/navigation";
5 | import { toastify } from "@/helper/toastify";
6 | import { ButtonLong } from "@/components/core/buttons";
7 | import { setCookie } from "nookies";
8 | import { useWindowSize } from "react-use";
9 | import Confetti from "react-confetti";
10 |
11 | import Image from "next/image";
12 | import Loader from "@/app/loading";
13 |
14 | interface Verification {
15 | accountId: string;
16 | secret: string;
17 | }
18 |
19 | type verify = "LOAD" | "TRUE" | "FALSE";
20 |
21 | export default function VerificationComponent({ accountId, secret }: Verification) {
22 | const [isVerified, setVerified] = useState("LOAD");
23 | const [showConfetti, setshowConfetti] = useState(false);
24 | const router = useRouter();
25 |
26 | const window = useWindowSize();
27 |
28 | const confetti = () => {
29 | setshowConfetti(true);
30 | setTimeout(() => {
31 | setshowConfetti(false);
32 | }, 10000);
33 | };
34 |
35 | useEffect(() => {
36 | setVerified("LOAD");
37 | verifyUser(accountId, secret)
38 | .then((resp: { userId: string; accountId: string; isVerified: boolean }) => {
39 | if (resp.userId && resp.accountId && resp.isVerified) {
40 | // confetti();
41 | setCookie(null, "accountId", resp.accountId);
42 | setCookie(null, "isVerified", String(resp.isVerified));
43 | setCookie(null, "userId", resp.userId);
44 | setshowConfetti(true);
45 | setVerified("TRUE");
46 | }
47 | })
48 | .catch((err) => {
49 | setVerified("FALSE");
50 | console.log(err.message);
51 | toastify(err.message, "error");
52 | });
53 |
54 | return () => setVerified("LOAD");
55 | }, [accountId, secret]);
56 |
57 | return (
58 | <>
59 | {showConfetti && isVerified === "TRUE" && (
60 |
64 |
65 |
86 |
87 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/src/backend/bookmarks.api.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { account, db, ID, Query, palettegramDB, bookmarksCollection } from "./appwrite.config";
4 |
5 | /**
6 | * @abstract filtering bookmarks
7 | * @param {string[]} bookmarks
8 | * @param {string} postId
9 | * @returns {string[]}
10 | */
11 | const removePostIdFromBookmarks = function (bookmarks: string[], postId: string): string[] {
12 | let idx = bookmarks.indexOf(postId);
13 |
14 | let beforeIdx = bookmarks.slice(0, idx);
15 |
16 | let afterIdx = bookmarks.slice(idx + 1, bookmarks.length);
17 |
18 | return [...beforeIdx, ...afterIdx];
19 | };
20 |
21 | const getBookmarks = async (userId: string) => {
22 | try {
23 | const getSavedBookmarkData = await db.listDocuments(palettegramDB, bookmarksCollection, [
24 | Query.equal("userId", userId),
25 | ]);
26 | // console.log(getSavedBookmarkData);
27 | return getSavedBookmarkData;
28 | } catch (error) {
29 | console.log(error);
30 | }
31 | };
32 |
33 | const saveBookmark = async (userId: string, postId: string) => {
34 | try {
35 | const getSavedBookmarkData = await getBookmarks(userId);
36 | // console.log(getSavedBookmarkData);
37 | if (!getSavedBookmarkData) {
38 | throw new Error("Account does not exist");
39 | }
40 |
41 | const documentId = getSavedBookmarkData.documents[0].$id;
42 | let oldBookmarkArray = getSavedBookmarkData.documents[0].postId;
43 |
44 | oldBookmarkArray.push(postId);
45 |
46 | const updatedData = await db.updateDocument(palettegramDB, bookmarksCollection, documentId, {
47 | postId: oldBookmarkArray,
48 | });
49 |
50 | if (!updatedData) {
51 | throw new Error();
52 | }
53 |
54 | return updatedData;
55 | } catch (error) {
56 | throw new Error();
57 | }
58 | };
59 |
60 | const removeBookmark = async (userId: string, postId: string) => {
61 | try {
62 | const getSavedBookmarkData = await getBookmarks(userId);
63 | if (!getSavedBookmarkData) {
64 | throw new Error("Account does not exist");
65 | }
66 |
67 | const documentId = getSavedBookmarkData.documents[0].$id;
68 | let oldBookmarkArray = getSavedBookmarkData.documents[0].postId;
69 |
70 | let newBookmarkArray: string[] = removePostIdFromBookmarks(oldBookmarkArray, postId);
71 |
72 | const updatedData = await db.updateDocument(palettegramDB, bookmarksCollection, documentId, {
73 | postId: newBookmarkArray,
74 | });
75 |
76 | if (!updatedData) {
77 | throw new Error();
78 | }
79 |
80 | return updatedData;
81 | } catch (error) {
82 | throw new Error();
83 | }
84 | };
85 |
86 | const createBookmarkEntry = async (userId: string, postId: string) => {
87 | try {
88 | const bookmarkDocs = await db.createDocument(palettegramDB, bookmarksCollection, ID.unique(), {
89 | userId: userId,
90 | postId: [postId],
91 | });
92 |
93 | if (!bookmarkDocs) {
94 | throw new Error("Account does not exist");
95 | }
96 |
97 | return bookmarkDocs;
98 | } catch (error) {
99 | throw new Error();
100 | }
101 | };
102 |
103 | export { saveBookmark, removeBookmark, createBookmarkEntry, getBookmarks };
104 |
--------------------------------------------------------------------------------
/src/components/core/contributionSections/HowToFork.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import { Copy } from "lucide-react";
3 | import { toastify } from "@/helper/toastify";
4 |
5 | export default function HowToFork() {
6 | const handleCopyClick = async (text: string) => {
7 | try {
8 | await navigator.clipboard.writeText(text);
9 | toastify(`Copied to clipbroad`, "success");
10 | } catch (error) {
11 | console.log(`copy clipboard error` + error);
12 | toastify(`Oops! Something went wrong. Please try again.`, "error");
13 | }
14 | };
15 |
16 | return (
17 |
18 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/docs/iwoc.md:
--------------------------------------------------------------------------------
1 | # Innogeeks Winter of Code - Guidelines 📑
2 |
3 | ## Welcome to IWOC Please read and follow all these guidelines carefully curated by IWOC Admins
4 |
5 | 1. Participants select your project you want to contribute to from the official website and join that particular project channel in the server.
6 |
7 | 2. Connect with Project Maintainers of the project and know more about project.
8 |
9 | 3. Visit github repo of project and look for the open issues. You will see **IWOC2024** Tag with the hardness level of the issue choose accordingly.
10 |
11 | 4. Comment on issue if you want to work on it and get it assigned to yourself from Project Admins. make sure you work on a single issue at a single time don't occupy the issues unnecessarily if found strict actions will be taken.
12 |
13 | 5. Once you get the issue assigned clone the repo and start working on it. if any issues encountered contact Maintainers, they will guide you.
14 |
15 | 6. Once work is done Make a pull request mentioning all the Minor/Major details about your feature you added you can also provide the documentation it will be appreciated.
16 |
17 | 7. If Maintainers find all good they will accept your pull request and assign you the point depending on hardness of issue.
18 |
19 | 8. Till here you have successfully done a open source contribution. repeat the procedure again and again and earn more points to get top on leaderboard and earn your swags.
20 |
21 | 9. If you have any Doubts/ Questions/ Suggestions please feel free to talk to the IWOC team. Please feel free to report any malpractices found in server.
22 |
23 | 10. Staying inactive in the server or project group will lead to your disqualification without any notification.
24 |
25 | ## FAQ - Frequently Asked Question
26 |
27 | 1. **What if multiple contributors comment on the same issue?**
28 |
29 | I'll assign the issue based on the FCFS (First Come First Serve) manner. If you create an issue, it will be assigned only to you.
30 |
31 | 2. **How long one can work on an issue?**
32 |
33 | To ensure fairness for everyone, once an issue is assigned to you, you will have a maximum of two days to solve it and create a pull request. If you fail to create a pull request within this timeframe, the issue will be assigned to the next person who commented on the issue to work on.
34 |
35 | 3. **Can you please clarify how the PRs (pull requests) will be documented and tracked?**
36 |
37 | Once your PR is merged it will be considered as one contribution and I'll record it at my end. All the necessary details will be recorded. Just keep on contributing and I'll take care of keeping track of your successful contributions.
38 |
39 | 4. **How many Max issues can I work on?**
40 |
41 | There is no limit on the number of issues you can work on, but I suggest working on one issue at a time.
42 |
43 | 5. **How can I start with IWOC?**
44 |
45 | This is one of the most frequently asked questions, Assuming you have registered for IWOC and have completed all the prerequisites like joining the Quine platform, IWOC discord server etc.
46 |
47 | To participate in the event, please familiarize yourself with the project codebase. Advanced users can try setting up the project on their local machine. At this point, you can begin addressing the issues listed in your selected projects. Keep in mind that the process for contributing to a project may vary depending on the project and its admin.
48 |
49 | 6. **Can I contribute in more than one project?**
50 |
51 | Yes, you can. But I'll suggest you focus on one project at a time.
52 |
53 | 7. **Where will I find all the projects of IWOC 2.0?**
54 |
55 | Visit https://iwoc.codes/projects
--------------------------------------------------------------------------------
/src/components/pages/contribute/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useCallback } from "react";
3 | import { useSearchParams, useRouter, usePathname } from "next/navigation";
4 | import Footer from "@/components/core/footer";
5 | import Navbar from "@/components/core/navbar";
6 | import { Forking, AppwriteSetup, DevSetup } from "@/components/core/contributionSections";
7 | import { motion, useScroll, useSpring } from "framer-motion";
8 | import ProgressBar from "@/components/ProgressBar";
9 |
10 | // Component to render the contribution guide with dynamic tabs
11 | export default function Contribute() {
12 | const router = useRouter();
13 | const searchParams = useSearchParams();
14 | const pathname = usePathname();
15 | // Dynamic tab rendering based on currentTab state
16 |
17 | const currentTab = searchParams.get("currentTab") ?? "forkingandclone";
18 |
19 | const loadComponent = [
20 | {
21 | name: "forkingandclone",
22 | toShow: "Fork and Clone",
23 | },
24 | {
25 | name: "localdevelopmentsetup",
26 | toShow: "Local Setup",
27 | },
28 | {
29 | name: "appwriteSetup",
30 | toShow: "Appwrite setup",
31 | },
32 | ];
33 |
34 | const { scrollYProgress } = useScroll();
35 | const scaleX = useSpring(scrollYProgress, {
36 | stiffness: 100,
37 | damping: 30,
38 | restDelta: 0.001,
39 | });
40 |
41 | const createQueryString = useCallback(
42 | (name: string, value: string) => {
43 | const params = new URLSearchParams(searchParams.toString());
44 | params.set(name, value);
45 |
46 | return params.toString();
47 | },
48 | [searchParams],
49 | );
50 |
51 | return (
52 | // Main render block
53 | <>
54 |
56 |
57 | {loadComponent.map((compo, idx) => {
58 | return (
59 | {
66 | router.push(pathname + "?" + createQueryString("currentTab", compo.name));
67 | }}
68 | className={`cursor-pointer p-4 border-b-2 border-gray-600 tex-xl font-medium ${
69 | currentTab == compo.name ? `border-primary` : ""
70 | } `}
71 | >
72 |
74 | );
75 | })}
76 |
77 |
78 |
85 |
86 |
87 |
88 | );
89 | }
90 |
91 | const Tabs = ({ currentTab }: { currentTab: string }) => {
92 | switch (currentTab) {
93 | case "forkingandclone":
94 | return ) {
21 | setEmail(event.target.value);
22 | }
23 |
24 | async function submitHander(event: React.FormEvent) {
25 | event.preventDefault();
26 | try {
27 | setIsLoading(true);
28 |
29 | if (!email || email == "" || !email.trim()) {
30 | throw new Error("Email not provided");
31 | }
32 |
33 | const response = await forgotpassword(email);
34 |
35 | if (!response) {
36 | throw new Error("Error occurred while sending the email. Please try again.");
37 | }
38 |
39 | setIsLoading(false);
40 | toastify("Send Successful", "success");
41 | } catch (error: any) {
42 | setIsLoading(false);
43 | console.log(error.message);
44 |
45 | toastify(error.message, "error");
46 | }
47 | }
48 |
49 | return (
50 | <>
51 |
52 |
101 |
102 | );
103 | }
104 |
--------------------------------------------------------------------------------
/docs/swoc.md:
--------------------------------------------------------------------------------
1 | # Social Winter of Code - Guidelines 📑
2 |
3 | ## Welcome to SWOC Please read and follow all these guidelines carefully curated by SWOC Admins
4 |
5 | 1. Participants select your project you want to contribute to from our website and join that particular project channel in our server.
6 |
7 | 2. Connect with Project Admins and Mentors of the project and know more about project.
8 |
9 | 3. Visit github repo of project and look for the open issues. You will see **SWOC S4** Tag with the hardness level of the issue choose accordingly.
10 |
11 | 4. Comment on issue if you want to work on it and get it assigned to yourself from Project Admins. make sure you work on a single issue at a single time don't occupy the issues unnecessarily if found strict actions will be taken.
12 |
13 | 5. Once you get the issue assigned clone the repo and start working on it. if any issues encountered contact Mentors or project admins they will guide you.
14 |
15 | 6. Once work is done Make a pull request mentioning all the Minor/Major details about your feature you added you can also provide the documentation it will be appreciated.
16 |
17 | 7. If Projects Admins find all good they will accept your pull request and assign you the point depending on hardness of issue.
18 |
19 | 8. Till here you have successfully done a open source contribution. repeat the procedure again and again and earn more points to get top on leaderboard and earn your swags.
20 |
21 | 9. If you have any Doubts/ Questions/ Suggestions please feel free to talk to the SWOC team. Please feel free to report any malpractices found in server.
22 |
23 | 10. Staying inactive in the server or project group will lead to your disqualification without any notification.
24 |
25 | ## FAQ - Frequently Asked Question
26 |
27 | 1. **What if multiple contributors comment on the same issue?**
28 |
29 | I'll assign the issue based on the FCFS (First Come First Serve) manner. If you create an issue, it will be assigned only to you.
30 |
31 | 2. **How long one can work on an issue?**
32 |
33 | To ensure fairness for everyone, once an issue is assigned to you, you will have a maximum of two days to solve it and create a pull request. If you fail to create a pull request within this timeframe, the issue will be assigned to the next person who commented on the issue to work on.
34 |
35 | 3. **Can you please clarify how the PRs (pull requests) will be documented and tracked?**
36 |
37 | Once your PR is merged it will be considered as one contribution and I'll record it at my end. All the necessary details will be recorded. Just keep on contributing and I'll take care of keeping track of your successful contributions.
38 |
39 | 4. **How many Max issues can I work on?**
40 |
41 | There is no limit on the number of issues you can work on, but I suggest working on one issue at a time.
42 |
43 | 5. **How can I start with SWOC?**
44 |
45 | This is one of the most frequently asked questions, Assuming you have registered for SWOC and have completed all the prerequisites like joining the Quine platform, SWOC discord server etc. Please wait until the 1st of January 2024 as the event will start on that day. Till then you can select the project in which you want to contribute and that best suits you.
46 |
47 | To participate in the event, please familiarize yourself with the project codebase. Advanced users can try setting up the project on their local machine. The official start date for the event is on the 1st of January 2024. At this point, you can begin addressing the issues listed in your selected projects. Keep in mind that the process for contributing to a project may vary depending on the project and its admin.
48 |
49 | 6. **Can I contribute in more than one project?**
50 |
51 | Yes, you can. But I'll suggest you focus on one project at a time.
52 |
53 | 7. **Where will I find all the projects of SWOC S4?**
54 |
55 | Visit https://www.socialwinterofcode.com and click on the project tab to get the projects.
--------------------------------------------------------------------------------
/src/helper/startTour.ts:
--------------------------------------------------------------------------------
1 | import Shepherd from "shepherd.js";
2 | import "../../node_modules/shepherd.js/dist/cjs/css/shepherd.css";
3 |
4 | import "@/styles/shepherdStyles.css";
5 |
6 | export const startTour = () => {
7 | const tour = new Shepherd.Tour({
8 | defaultStepOptions: {
9 | cancelIcon: {
10 | enabled: true,
11 | },
12 | classes: "shepherd-theme-arrows custom-tour",
13 | scrollTo: { behavior: "smooth", block: "center" },
14 | },
15 | useModalOverlay: true,
16 | });
17 |
18 | tour.addStep({
19 | id: "step1",
20 | text: "Welcome to Palettegram! Let's start with an overview of what this platform offers.",
21 | attachTo: {
22 | element: ".hero",
23 | on: "bottom",
24 | },
25 | buttons: [
26 | {
27 | text: "Next",
28 | action: tour.next,
29 | classes: "shepherd-button",
30 | },
31 | ],
32 | });
33 |
34 | tour.addStep({
35 | id: "step2",
36 | text: "Click to change the theme either dark mode or light mode.",
37 | attachTo: {
38 | element: "#theme",
39 | on: "bottom",
40 | },
41 | buttons: [
42 | {
43 | text: "Next",
44 | action: tour.next,
45 | classes: "shepherd-button",
46 | },
47 | ],
48 | });
49 |
50 | tour.addStep({
51 | id: "step3",
52 | text: "Click this button to navigate to the codebase.",
53 | attachTo: {
54 | element: ".git",
55 | on: "bottom",
56 | },
57 | buttons: [
58 | {
59 | text: "Next",
60 | action: tour.next,
61 | classes: "shepherd-button",
62 | },
63 | ],
64 | });
65 |
66 | tour.addStep({
67 | id: "step4",
68 | text: "Click here to sign in.",
69 | attachTo: {
70 | element: ".register",
71 | on: "top",
72 | },
73 | buttons: [
74 | {
75 | text: "Next",
76 | action: tour.next,
77 | classes: "shepherd-button",
78 | },
79 | ],
80 | });
81 |
82 | tour.addStep({
83 | id: "step5",
84 | text: "Already have an account? Login here.",
85 | attachTo: {
86 | element: ".loginin",
87 | on: "top",
88 | },
89 | buttons: [
90 | {
91 | text: "Next",
92 | action: tour.next,
93 | classes: "shepherd-button",
94 | },
95 | ],
96 | });
97 |
98 | tour.addStep({
99 | id: "step6",
100 | text: 'Click "Start your journey" to begin exploring all the exciting features we offer. Let\'s get started on creating something amazing together!',
101 | attachTo: {
102 | element: "#start-your-journey",
103 | on: "bottom-start",
104 | },
105 | buttons: [
106 | {
107 | text: "Next",
108 | action: tour.next,
109 | classes: "shepherd-button",
110 | },
111 | ],
112 | });
113 | tour.addStep({
114 | id: "step7",
115 | text: "This section explains what Palettegram is about.",
116 | attachTo: {
117 | element: "section:nth-of-type(2)",
118 | on: "bottom",
119 | },
120 | buttons: [
121 | {
122 | text: "Next",
123 | action: tour.next,
124 | classes: "shepherd-button",
125 | },
126 | ],
127 | });
128 | tour.addStep({
129 | id: "step8",
130 | text: "This section explains who Palettegram is for. ",
131 | attachTo: {
132 | element: "section:nth-of-type(3)",
133 | on: "top",
134 | },
135 | buttons: [
136 | {
137 | text: "Next",
138 | action: tour.next,
139 | classes: "shepherd-button",
140 | },
141 | ],
142 | });
143 | tour.addStep({
144 | id: "step9",
145 | text: "This section explains what you can do on Palettegram.",
146 | attachTo: {
147 | element: "section:nth-of-type(4)",
148 | on: "top",
149 | },
150 | buttons: [
151 | {
152 | text: "Finish",
153 | action: tour.complete,
154 | classes: "shepherd-button",
155 | },
156 | ],
157 | });
158 |
159 | return tour;
160 | };
161 |
--------------------------------------------------------------------------------
/LEARN.md:
--------------------------------------------------------------------------------
1 | # Learn About Our Palettegram Website Project! 🌈
2 |
3 | Welcome to our Palettegram Website project repository!🌟 Below, you'll find detailed information about the project and resources to help you get started.
4 |
5 | ## Project Overview ✈️
6 |
7 | Palettegram is a social media application dedicated to professionals like graphic designers, UI/UX designers, Developers, etc. to leverage UI designs, design ideas, UX approaches, and color palettes.
8 |
9 | ## Tech Stack Used 🛠️
10 |
11 | Next.js is an open-source web development framework known for its ease of use and powerful features, making it ideal for building interactive and performant web applications.
12 |
13 | TypeScript: TypeScript is a free and open-source high-level programming language that adds static typing to JavaScript, enhancing code quality, and developer productivity.
14 |
15 | Tailwind CSS: Tailwind CSS is a utility-first CSS framework that enables rapid development of modern websites without the need for writing custom CSS. Its intuitive utility classes allow for quick styling directly within HTML markup.
16 |
17 | Appwrite: Appwrite is an open-source backend platform designed for developing web, mobile, and Flutter applications. It offers a range of features, including user authentication, database management, file storage, and more, simplifying the development process and accelerating time to market.
18 |
19 | ## Resources to Learn 📚
20 |
21 | Here are some resources to help you get started with the technologies used in this project:
22 |
23 | ### Next.js:
24 | - **Documentation:** Next.js documentation offers tutorials and API references for a comprehensive understanding of the framework.
25 | - [Next.js Documentation](https://nextjs.org/docs)
26 |
27 | ### TypeScript:
28 | - **Handbook:** The official TypeScript Handbook covers basic to advanced features with clear explanations.
29 | - [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
30 |
31 | ### Tailwind CSS:
32 | - **Documentation:** Tailwind CSS documentation provides concise explanations and usage examples for utility-first classes.
33 | - [Tailwind CSS Documentation](https://tailwindcss.com/docs)
34 |
35 | ### Appwrite:
36 | - **Documentation:** Appwrite documentation details features, API endpoints, and integration possibilities.
37 | - [Appwrite Documentation](https://appwrite.io/docs)
38 |
39 | 40 | ## Frequently Asked Questions (FAQ) ❓ 41 | 42 | ### What is the purpose of this project? 43 | The Platelogram project is designed to develop a platform where users can discover designs and color palettes curated by designers, for designers. It serves as a hub for creative inspiration and collaboration. 44 | 45 | ### Who can contribute to this project? 46 | Individuals with expertise in Next.js, TypeScript, Tailwind CSS, and Appwrite are encouraged to contribute. Whether you're a seasoned developer or just starting out, your contributions are welcome and valued. 47 | 48 | ### How can I test the project locally? 49 | You can clone the repository to your local machine using detailed instructions provided in [CONTRIBUTING.md](./CONTRIBUTING.md) file. 50 | 51 | ### Where can I find the project documentation? 52 | The project documentation, including setup instructions and contribution guidelines, is available in the [README.md](./README.md) and [CONTRIBUTING.md](./CONTRIBUTING.md) file. 53 | 54 | ### Who do I contact for help or questions? 55 | If you have any questions or need assistance, you can contact the project maintainers through their provided contact details in [README.md](./README.md) file. 56 | 57 | ### How do I suggest new features for the project? 58 | You can suggest new features by opening an issue in the repository. Please provide a clear description of the feature and its benefits. 59 | 60 | ### Are there any guidelines for coding standards? 61 | Yes, we follow standard coding practices. Please ensure your code is clean, well-documented, and adheres to the style guide mentioned in the [CONTRIBUTING.md](./CONTRIBUTING.md). 62 | 63 | ### Can I report bugs and issues? 64 | Absolutely! If you encounter any bugs or issues, please report them by opening an issue in the repository. Provide as much detail as possible to help us address the problem promptly. 65 | 66 | --- 67 | 68 | We hope these resources and FAQs help you get started with Our Palettegram Website project. Happy coding! 🌟 69 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parserPreset: "conventional-changelog-conventionalcommits", 3 | rules: { 4 | "body-leading-blank": [1, "always"], 5 | "body-max-line-length": [2, "always", 100], 6 | "footer-leading-blank": [1, "always"], 7 | "footer-max-line-length": [2, "always", 100], 8 | "header-max-length": [2, "always", 100], 9 | "subject-case": [2, "never", ["sentence-case", "start-case", "pascal-case", "upper-case"]], 10 | "subject-empty": [2, "never"], 11 | "subject-full-stop": [2, "never", "."], 12 | "type-case": [2, "always", "lower-case"], 13 | "type-empty": [2, "never"], 14 | "type-enum": [ 15 | 2, 16 | "always", 17 | [ 18 | "build", 19 | "chore", 20 | "ci", 21 | "docs", 22 | "feat", 23 | "fix", 24 | "perf", 25 | "refactor", 26 | "revert", 27 | "style", 28 | "test", 29 | ], 30 | ], 31 | }, 32 | prompt: { 33 | questions: { 34 | type: { 35 | description: "Select the type of change that you're committing", 36 | enum: { 37 | feat: { 38 | description: "A new feature", 39 | title: "Features", 40 | emoji: "✨", 41 | }, 42 | fix: { 43 | description: "A bug fix", 44 | title: "Bug Fixes", 45 | emoji: "🐛", 46 | }, 47 | docs: { 48 | description: "Documentation only changes", 49 | title: "Documentation", 50 | emoji: "📚", 51 | }, 52 | style: { 53 | description: 54 | "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)", 55 | title: "Styles", 56 | emoji: "💎", 57 | }, 58 | refactor: { 59 | description: "A code change that neither fixes a bug nor adds a feature", 60 | title: "Code Refactoring", 61 | emoji: "📦", 62 | }, 63 | perf: { 64 | description: "A code change that improves performance", 65 | title: "Performance Improvements", 66 | emoji: "🚀", 67 | }, 68 | test: { 69 | description: "Adding missing tests or correcting existing tests", 70 | title: "Tests", 71 | emoji: "🚨", 72 | }, 73 | build: { 74 | description: 75 | "Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)", 76 | title: "Builds", 77 | emoji: "🛠", 78 | }, 79 | ci: { 80 | description: 81 | "Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)", 82 | title: "Continuous Integrations", 83 | emoji: "⚙️", 84 | }, 85 | chore: { 86 | description: "Other changes that don't modify src or test files", 87 | title: "Chores", 88 | emoji: "♻️", 89 | }, 90 | revert: { 91 | description: "Reverts a previous commit", 92 | title: "Reverts", 93 | emoji: "🗑", 94 | }, 95 | }, 96 | }, 97 | scope: { 98 | description: "What is the scope of this change (e.g. component or file name)", 99 | }, 100 | subject: { 101 | description: "Write a short, imperative tense description of the change", 102 | }, 103 | body: { 104 | description: "Provide a longer description of the change", 105 | }, 106 | isBreaking: { 107 | description: "Are there any breaking changes?", 108 | }, 109 | breakingBody: { 110 | description: 111 | "A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself", 112 | }, 113 | breaking: { 114 | description: "Describe the breaking changes", 115 | }, 116 | isIssueAffected: { 117 | description: "Does this change affect any open issues?", 118 | }, 119 | issuesBody: { 120 | description: 121 | "If issues are closed, the commit requires a body. Please enter a longer description of the commit itself", 122 | }, 123 | issues: { 124 | description: 'Add issue references (e.g. "fix #123", "re #123".)', 125 | }, 126 | }, 127 | }, 128 | }; 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution to Palettegram 2 | 3 | First of all, thank you for taking the time to contribute 😊. 4 | 5 | We welcome contributions from anyone willing to improve this project or add new features. 6 | 7 | Contribution guidelines are listed below. Please take the time to go through the guidelines and follow them so that it is easy for maintainers to merge or address your contributions. 8 | 9 | ## Table of Contents 10 | 11 | - [Contributing to Palettegram 🪡](#contributing-to-Palettegram-) 12 | - [Table of Contents](#table-of-contents) 13 | - [First time Contributor](#first-time-contributor) 14 | - [I Want To Contribute](#i-want-to-contribute) 15 | - [Fork the Project](#fork-the-project) 16 | - [Create a new branch](#create-a-new-branch) 17 | - [Work on the issue assigned](#work-on-the-issue-assigned) 18 | - [Commit](#commit) 19 | - [Push Local Changes](#push-local-changes) 20 | - [Pull Request](#pull-request) 21 | - [Review](#review) 22 | - [Other Ways to Contribute](#other-ways-to-contribute) 23 | 24 | ## First time Contributor 25 | 26 | To get an idea of the app, feel free to check out the website(to be added soon). 27 | 28 | You can start with available list of [issues](https://github.com/Sanchitbajaj02/Palettegram/issues) 29 | 30 | ## I Want To Contribute 31 | 32 | - Always check for [existing issues](https://github.com/Sanchitbajaj02/Palettegram/issues) before creating a new issue. 33 | - Only start working on an issue if it has been assigned to you. This avoids multiple PRs for the same issue. 34 | - Every change in this project must have an associated issue. **Issue before PR** 35 | 36 | 37 | To start contributing to this project, follow the steps below. 38 | 39 | ### Fork the Project 40 | 41 | - Star & Fork this repository. This will create a local copy of this repository on your github profile. 42 | 43 |
44 |
45 | - Follow [git workflow](docs/git.md) to know more.
46 |
47 | ### Create a new branch
48 |
49 | Creating a new branch lets you work on your issue without creating merge conflicts while making PRs.
50 | Select a name for your branch that is in line with the issue you are addressing.
51 |
52 | ```bash
53 | # It will create a new branch with name branch_name and switch to that branch
54 | git checkout -b branch_name
55 | ```
56 |
57 | ### Work on the issue assigned
58 |
59 | - Work on the issue assigned to you.
60 | - Add all the files/folders needed.
61 | - After you've made your contribution to the project add changes to the branch you've just created:
62 |
63 | ```bash
64 | # To add all new files to branch branch_name
65 | git add .
66 |
67 | # To add only a few files to branch_name
68 | git add
69 | ```
70 |
71 | ### Commit
72 |
73 | - To commit this changes, give a descriptive message for the convenience of reviewer. Follow the [commitlint](docs/commitlint.md) guidelines to know more.
74 |
75 | ```bash
76 | # This message will be associated with all files you have changed
77 | git commit -m "message"
78 | ```
79 |
80 | ### Push Local Changes
81 |
82 | ```bash
83 | # To push your work/changes to your remote repository
84 | git push -u origin branch_name
85 | ```
86 |
87 | ### Pull Request
88 |
89 | Go to your repository in the browser and click on compare and pull requests.
90 | This will send a request to the maintainer to add your contribution to the main repository i.e., `https://github.com/Sanchitbajaj02/Palettegram.git`
91 |
92 | ### Add a title to your Pull Request.
93 |
94 | Add a meaningful title to the pull request so that reviewing will be easy for our team. Follow the [commitlint](docs/commitlint.md) guidelines to know more
95 |
96 | ```text
97 | fix: minor issues to increase performance by 20%
98 | ```
99 |
100 | Make sure to mention which issue is solved with this Pull Request by mentioning the issue number #. Then add a description to your Pull Request that explains your contribution.
101 |
102 | ### Review
103 |
104 | Congratulations! 🎉🌟 Sit and relax, you've made your contribution to the Palettegram project. Wait until the PR is reviewed and incorporate changes suggested by the reviewers. After which the PR can be successfully merged.
105 |
106 | ## Other Ways to Contribute
107 |
108 | If you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about.
109 |
110 | - Star the project
111 | - Tweet about it
112 | - Mention this project to your peers
113 |
--------------------------------------------------------------------------------
/src/components/core/footer/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import Image from "next/image";
4 | import { Twitter, Facebook, Linkedin, Github } from "lucide-react";
5 |
6 | export default function Footer({ isFixed }: { isFixed?: boolean }) {
7 | const generalList = [
8 | {
9 | id: 1,
10 | title: "Register",
11 | slug: "/register",
12 | },
13 | {
14 | id: 2,
15 | title: "Login",
16 | slug: "/login",
17 | },
18 | {
19 | id: 3,
20 | title: "Privacy Policy",
21 | slug: "/privacy",
22 | },
23 | {
24 | id: 4,
25 | title: "Terms & Conditions",
26 | slug: "/terms",
27 | },
28 | ];
29 |
30 | const helpSupport = [
31 | {
32 | id: 1,
33 | title: "Help Center",
34 | slug: "/contact",
35 | },
36 | {
37 | id: 2,
38 | title: "Contribution Guidelines",
39 | slug: "/contribute",
40 | },
41 | ];
42 |
43 | return (
44 |
48 |
121 | );
122 | }
123 |
--------------------------------------------------------------------------------
/src/backend/posts.api.ts:
--------------------------------------------------------------------------------
1 | import {
2 | db,
3 | storage,
4 | ID,
5 | Query,
6 | palettegramDB,
7 | postsCollection,
8 | postBucketStorage,
9 | } from "./appwrite.config";
10 |
11 | /**
12 | * @description Save a single post to database
13 | * @param data
14 | * @returns
15 | */
16 | const savePostToDb = async (data: any) => {
17 | try {
18 | const post = await db.createDocument(palettegramDB, postsCollection, ID.unique(), data);
19 | if (!post) {
20 | throw new Error("Error in uploading data into database");
21 | }
22 |
23 | return post;
24 | } catch (error: any) {
25 | console.log(error);
26 | }
27 | };
28 |
29 | /**
30 | * @description get all posts present in the database
31 | * @returns posts
32 | */
33 | const getAllPosts = async () => {
34 | try {
35 | if (!palettegramDB || !postsCollection) {
36 | throw new Error("Either databaseId or collectionId is not provided");
37 | }
38 |
39 | const posts = await db.listDocuments(palettegramDB, postsCollection, [
40 | Query.orderDesc("$createdAt"),
41 | ]);
42 |
43 | if (!posts) {
44 | throw new Error("Error fetching data");
45 | }
46 |
47 | return posts;
48 | } catch (error: any) {
49 | console.log(error);
50 | }
51 | };
52 |
53 | /**
54 | * @description gets single document based on the id
55 | * @param id
56 | * @returns
57 | */
58 | const getSinglePost = async (id: string) => {
59 | try {
60 | const tweets = await db.getDocument(palettegramDB, postsCollection, id);
61 | if (tweets) {
62 | return tweets;
63 | }
64 | } catch (error: any) {
65 | console.log(error);
66 | }
67 | };
68 |
69 | /**
70 | * @description get user post based on account id
71 | * @param userId
72 | * @returns
73 | */
74 | const getAllUserPosts = async (userId: string) => {
75 | try {
76 | const allPosts = await db.listDocuments(palettegramDB, postsCollection, [
77 | Query.equal("userId", userId),
78 | Query.orderDesc("$createdAt"),
79 | ]);
80 |
81 | if (!allPosts) {
82 | throw new Error("could not find posts");
83 | }
84 |
85 | return allPosts?.documents;
86 | } catch (error: any) {
87 | console.log(error);
88 | }
89 | };
90 |
91 | const removePost = async (id: string) => {
92 | try {
93 | const resp = await db.updateDocument(palettegramDB, postsCollection, id, {
94 | isActive: false,
95 | });
96 | if (resp) {
97 | return resp;
98 | }
99 | } catch (error: any) {
100 | console.log(error);
101 | }
102 | };
103 |
104 | /**
105 | * @description like tweet api
106 | * @param tweet
107 | * @returns
108 | */
109 | const likeTweet = async (tweet: any) => {
110 | try {
111 | const tweets = await db.updateDocument(palettegramDB, postsCollection, tweet.$id, {
112 | likes: tweet.likes,
113 | });
114 | if (tweets) {
115 | return tweets;
116 | }
117 | } catch (error: any) {
118 | console.log(error);
119 | }
120 | };
121 |
122 | /**
123 | * @description image adding api. Save image into bucket
124 | * @param image
125 | * @returns
126 | */
127 | const addNewImage = async (image: any) => {
128 | try {
129 | const resImage = await storage.createFile(postBucketStorage, ID.unique(), image);
130 | if (!resImage) {
131 | throw new Error("File not found");
132 | }
133 | return resImage;
134 | } catch (error: any) {
135 | console.log(error);
136 | }
137 | };
138 |
139 | /**
140 | * @description get image url from bucket
141 | * @param imageId
142 | * @returns
143 | */
144 | const getImageUrl = (imageId: string) => {
145 | try {
146 | if (!imageId) {
147 | throw new Error("Image can not be uploaded");
148 | }
149 |
150 | const url = `https://cloud.appwrite.io/v1/storage/buckets/${postBucketStorage}/files/${imageId}/view?project=${process.env.NEXT_PUBLIC_PROJECT_ID}`;
151 |
152 | return url;
153 | } catch (error) {
154 | console.log(error);
155 | }
156 | };
157 |
158 | /**
159 | * @description delete image from bucket
160 | * @param id
161 | * @returns
162 | */
163 | const deleteImage = async (id: string) => {
164 | try {
165 | const resImage = await storage.deleteFile(postBucketStorage, id);
166 | if (resImage) {
167 | return resImage;
168 | }
169 | } catch (error: any) {
170 | console.log(error);
171 | }
172 | };
173 |
174 | const addComment = async (id: string, comment: any) => {
175 | try {
176 | const res = await db.updateDocument(palettegramDB, postsCollection, id, {
177 | comments: comment,
178 | });
179 | if (res) {
180 | return res;
181 | }
182 | } catch (error: any) {
183 | console.log(error);
184 | }
185 | };
186 |
187 | export {
188 | savePostToDb,
189 | getAllPosts,
190 | getAllUserPosts,
191 | getSinglePost,
192 | likeTweet,
193 | addNewImage,
194 | deleteImage,
195 | getImageUrl,
196 | addComment,
197 | removePost,
198 | };
199 |
--------------------------------------------------------------------------------
/src/components/pages/post/index.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/navigation";
2 | import { useState } from "react";
3 |
4 | import SinglePost from "@/components/core/posts/SinglePost";
5 | import TrendingFeed from "@/components/core/trendingFeed";
6 |
7 | import { PostInstanceType } from "@/types";
8 | import { ArrowLeft, Loader } from "lucide-react";
9 |
10 | export default function PostById({
11 | singlePostInfo,
12 | onLikeClick,
13 | }: {
14 | singlePostInfo: PostInstanceType;
15 | onLikeClick?: any;
16 | }) {
17 | const router = useRouter();
18 | let CHAR_LIMIT = 250;
19 | const [comment_message, setComment_message] = useState("");
20 | const [commentCount, setCommentCount] = useState(singlePostInfo?.commentsCount || 0);
21 | const [loading, setLoading] = useState(false);
22 |
23 | // const uploadComment = async (id: string | undefined, comment_message: string) => {
24 | // setLoading(true);
25 | // const previousComments = singlePostInfo.comments;
26 | // try {
27 | // if (previousComments === undefined || !id) return;
28 | // if (comment_message === "") {
29 | // toastify("Comment can not be empty", "error");
30 | // setLoading(false);
31 | // return;
32 | // }
33 | // const Comments = [...previousComments, comment_message];
34 | // const res = await addComment(id, Comments);
35 | // setCommentCount(res?.comments.length || singlePostInfo?.comments?.length);
36 | // toastify("Comment added successfully", "success");
37 | // singlePostInfo.comments?.push(comment_message);
38 | // setComment_message("");
39 | // setLoading(false);
40 | // } catch (error) {
41 | // console.log(error);
42 | // toastify("Comment cannot be added", "error");
43 | // setLoading(false);
44 | // }
45 | // };
46 |
47 | return (
48 | <>
49 |
50 |
66 |
74 | Click to join community
75 |
76 |
77 | ) : isVerified === "FALSE" ? (
78 |
85 | 71 | Congratulation!! You are verified 👏 72 |
73 |79 | Sorry! It seems you are not verified yet 😣 80 |
81 | ) : ( 82 |
19 |
80 |
20 |
25 |
37 |
38 |
39 |
51 |
52 |
53 |
75 |
76 | 21 | If you want to download it locally then follow these steps 22 |
23 | 24 |26 | Step 1: Fork the repository by clicking 27 | 'Fork' button 28 |
29 |40 | Step 2: Clone your repository by following 41 | the below step 42 |
43 |54 | Step 3: Copy the URL and paste it into 55 | your terminal 56 |
57 |
66 | {"git clone https://github.com//palettegram.git"}
67 |
70 | handleCopyClick("git clone https://github.com//palettegram.git")
71 | }
72 | />
73 |
74 |
77 | Pat you back 👍,
you have downloaded or cloned palettegram now start contributing.
78 |
{compo.toShow}
73 |
53 |
54 | router.push("/")}
57 | className="hover:cursor-pointer text-secondary dark:text-white"
58 | />
59 |
66 |
67 |
99 |
100 | 60 | Welcome to Palettegram 61 |
62 |63 | Forgot Password ? 64 |
65 |39 | 40 | ## Frequently Asked Questions (FAQ) ❓ 41 | 42 | ### What is the purpose of this project? 43 | The Platelogram project is designed to develop a platform where users can discover designs and color palettes curated by designers, for designers. It serves as a hub for creative inspiration and collaboration. 44 | 45 | ### Who can contribute to this project? 46 | Individuals with expertise in Next.js, TypeScript, Tailwind CSS, and Appwrite are encouraged to contribute. Whether you're a seasoned developer or just starting out, your contributions are welcome and valued. 47 | 48 | ### How can I test the project locally? 49 | You can clone the repository to your local machine using detailed instructions provided in [CONTRIBUTING.md](./CONTRIBUTING.md) file. 50 | 51 | ### Where can I find the project documentation? 52 | The project documentation, including setup instructions and contribution guidelines, is available in the [README.md](./README.md) and [CONTRIBUTING.md](./CONTRIBUTING.md) file. 53 | 54 | ### Who do I contact for help or questions? 55 | If you have any questions or need assistance, you can contact the project maintainers through their provided contact details in [README.md](./README.md) file. 56 | 57 | ### How do I suggest new features for the project? 58 | You can suggest new features by opening an issue in the repository. Please provide a clear description of the feature and its benefits. 59 | 60 | ### Are there any guidelines for coding standards? 61 | Yes, we follow standard coding practices. Please ensure your code is clean, well-documented, and adheres to the style guide mentioned in the [CONTRIBUTING.md](./CONTRIBUTING.md). 62 | 63 | ### Can I report bugs and issues? 64 | Absolutely! If you encounter any bugs or issues, please report them by opening an issue in the repository. Provide as much detail as possible to help us address the problem promptly. 65 | 66 | --- 67 | 68 | We hope these resources and FAQs help you get started with Our Palettegram Website project. Happy coding! 🌟 69 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parserPreset: "conventional-changelog-conventionalcommits", 3 | rules: { 4 | "body-leading-blank": [1, "always"], 5 | "body-max-line-length": [2, "always", 100], 6 | "footer-leading-blank": [1, "always"], 7 | "footer-max-line-length": [2, "always", 100], 8 | "header-max-length": [2, "always", 100], 9 | "subject-case": [2, "never", ["sentence-case", "start-case", "pascal-case", "upper-case"]], 10 | "subject-empty": [2, "never"], 11 | "subject-full-stop": [2, "never", "."], 12 | "type-case": [2, "always", "lower-case"], 13 | "type-empty": [2, "never"], 14 | "type-enum": [ 15 | 2, 16 | "always", 17 | [ 18 | "build", 19 | "chore", 20 | "ci", 21 | "docs", 22 | "feat", 23 | "fix", 24 | "perf", 25 | "refactor", 26 | "revert", 27 | "style", 28 | "test", 29 | ], 30 | ], 31 | }, 32 | prompt: { 33 | questions: { 34 | type: { 35 | description: "Select the type of change that you're committing", 36 | enum: { 37 | feat: { 38 | description: "A new feature", 39 | title: "Features", 40 | emoji: "✨", 41 | }, 42 | fix: { 43 | description: "A bug fix", 44 | title: "Bug Fixes", 45 | emoji: "🐛", 46 | }, 47 | docs: { 48 | description: "Documentation only changes", 49 | title: "Documentation", 50 | emoji: "📚", 51 | }, 52 | style: { 53 | description: 54 | "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)", 55 | title: "Styles", 56 | emoji: "💎", 57 | }, 58 | refactor: { 59 | description: "A code change that neither fixes a bug nor adds a feature", 60 | title: "Code Refactoring", 61 | emoji: "📦", 62 | }, 63 | perf: { 64 | description: "A code change that improves performance", 65 | title: "Performance Improvements", 66 | emoji: "🚀", 67 | }, 68 | test: { 69 | description: "Adding missing tests or correcting existing tests", 70 | title: "Tests", 71 | emoji: "🚨", 72 | }, 73 | build: { 74 | description: 75 | "Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)", 76 | title: "Builds", 77 | emoji: "🛠", 78 | }, 79 | ci: { 80 | description: 81 | "Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)", 82 | title: "Continuous Integrations", 83 | emoji: "⚙️", 84 | }, 85 | chore: { 86 | description: "Other changes that don't modify src or test files", 87 | title: "Chores", 88 | emoji: "♻️", 89 | }, 90 | revert: { 91 | description: "Reverts a previous commit", 92 | title: "Reverts", 93 | emoji: "🗑", 94 | }, 95 | }, 96 | }, 97 | scope: { 98 | description: "What is the scope of this change (e.g. component or file name)", 99 | }, 100 | subject: { 101 | description: "Write a short, imperative tense description of the change", 102 | }, 103 | body: { 104 | description: "Provide a longer description of the change", 105 | }, 106 | isBreaking: { 107 | description: "Are there any breaking changes?", 108 | }, 109 | breakingBody: { 110 | description: 111 | "A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself", 112 | }, 113 | breaking: { 114 | description: "Describe the breaking changes", 115 | }, 116 | isIssueAffected: { 117 | description: "Does this change affect any open issues?", 118 | }, 119 | issuesBody: { 120 | description: 121 | "If issues are closed, the commit requires a body. Please enter a longer description of the commit itself", 122 | }, 123 | issues: { 124 | description: 'Add issue references (e.g. "fix #123", "re #123".)', 125 | }, 126 | }, 127 | }, 128 | }; 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution to Palettegram 2 | 3 | First of all, thank you for taking the time to contribute 😊. 4 | 5 | We welcome contributions from anyone willing to improve this project or add new features. 6 | 7 | Contribution guidelines are listed below. Please take the time to go through the guidelines and follow them so that it is easy for maintainers to merge or address your contributions. 8 | 9 | ## Table of Contents 10 | 11 | - [Contributing to Palettegram 🪡](#contributing-to-Palettegram-) 12 | - [Table of Contents](#table-of-contents) 13 | - [First time Contributor](#first-time-contributor) 14 | - [I Want To Contribute](#i-want-to-contribute) 15 | - [Fork the Project](#fork-the-project) 16 | - [Create a new branch](#create-a-new-branch) 17 | - [Work on the issue assigned](#work-on-the-issue-assigned) 18 | - [Commit](#commit) 19 | - [Push Local Changes](#push-local-changes) 20 | - [Pull Request](#pull-request) 21 | - [Review](#review) 22 | - [Other Ways to Contribute](#other-ways-to-contribute) 23 | 24 | ## First time Contributor 25 | 26 | To get an idea of the app, feel free to check out the website(to be added soon). 27 | 28 | You can start with available list of [issues](https://github.com/Sanchitbajaj02/Palettegram/issues) 29 | 30 | ## I Want To Contribute 31 | 32 | - Always check for [existing issues](https://github.com/Sanchitbajaj02/Palettegram/issues) before creating a new issue. 33 | - Only start working on an issue if it has been assigned to you. This avoids multiple PRs for the same issue. 34 | - Every change in this project must have an associated issue. **Issue before PR** 35 | 36 | 37 | To start contributing to this project, follow the steps below. 38 | 39 | ### Fork the Project 40 | 41 | - Star & Fork this repository. This will create a local copy of this repository on your github profile. 42 | 43 |
44 |
45 | - Follow [git workflow](docs/git.md) to know more.
46 |
47 | ### Create a new branch
48 |
49 | Creating a new branch lets you work on your issue without creating merge conflicts while making PRs.
50 | Select a name for your branch that is in line with the issue you are addressing.
51 |
52 | ```bash
53 | # It will create a new branch with name branch_name and switch to that branch
54 | git checkout -b branch_name
55 | ```
56 |
57 | ### Work on the issue assigned
58 |
59 | - Work on the issue assigned to you.
60 | - Add all the files/folders needed.
61 | - After you've made your contribution to the project add changes to the branch you've just created:
62 |
63 | ```bash
64 | # To add all new files to branch branch_name
65 | git add .
66 |
67 | # To add only a few files to branch_name
68 | git add
49 |
113 |
114 |
50 |
51 |
65 |
60 |
64 | Palettegram
61 |Social Media for Professionals
62 | A social media platform built exclusively for design professionals to share. 63 |
66 |
112 |
67 |
81 | General
68 | {generalList && 69 | generalList.map((item) => { 70 | return ( 71 | 76 | {item.title} 77 | 78 | ); 79 | })} 80 |
82 |
111 | Help & Support
83 | {helpSupport && 84 | helpSupport.map((item) => { 85 | return ( 86 | 91 | {item.title} 92 | 93 | ); 94 | })} 95 |Social media
96 |
97 |
98 |
110 |
115 |
120 |
116 | Copyright © {new Date().getFullYear()} Palettegram | MIT License
117 |
Developed by Sanchit Bajaj and The Open Source Community
119 |
51 |
55 |
56 |
57 |
58 |
59 |
61 |
62 |