49 | );
50 | };
51 |
52 | export default Footer;
53 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2 | ## Getting Started
3 |
4 | First, run the development server:
5 |
6 | ```bash
7 | npm run dev
8 | # or.
9 | yarn dev..
10 | # or
11 | pnpm dev
12 | # or
13 | bun dev
14 | ```
15 |
16 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
17 |
18 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
19 |
20 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
21 |
22 | ## Learn More
23 |
24 | To learn more about Next.js, take a look at the following resources:
25 |
26 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
27 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
28 |
29 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
30 |
31 | ## Deploy on Vercel
32 |
33 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
34 |
35 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details..
36 |
--------------------------------------------------------------------------------
/app/(dashboard)/_components/Emptyboard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useRouter } from "next/navigation";
3 | import React from "react";
4 | import { Button } from "@/components/ui/button";
5 | import { api } from "@/convex/_generated/api";
6 |
7 | import { ClipboardCheck } from "lucide-react";
8 | import { useOrganization } from "@clerk/nextjs";
9 | import useMutationAip from "@/hooks/useMutationAip";
10 | import { toast } from "sonner";
11 |
12 | const Emptyboard = () => {
13 | const { organization } = useOrganization();
14 | const { mutate, pending } = useMutationAip(api.board.create);
15 | const Router = useRouter();
16 |
17 | const handleCLick = () => {
18 | if (!organization) return;
19 | mutate({
20 | orgId: organization.id,
21 | title: "New Board",
22 | })
23 | .then((id) => {
24 | toast.success("Board created successfully");
25 | Router.push(`/board/${id}`);
26 | })
27 | .catch(() => {
28 | toast.error("Failed to create board");
29 | });
30 | };
31 |
32 | return (
33 |
94 | );
95 | };
96 |
--------------------------------------------------------------------------------
/convex/_generated/server.js:
--------------------------------------------------------------------------------
1 | /* prettier-ignore-start */
2 |
3 | /* eslint-disable */
4 | /**
5 | * Generated utilities for implementing server-side Convex query and mutation functions.
6 | *
7 | * THIS CODE IS AUTOMATICALLY GENERATED.
8 | *
9 | * To regenerate, run `npx convex dev`.
10 | * @module
11 | */
12 |
13 | import {
14 | actionGeneric,
15 | httpActionGeneric,
16 | queryGeneric,
17 | mutationGeneric,
18 | internalActionGeneric,
19 | internalMutationGeneric,
20 | internalQueryGeneric,
21 | } from "convex/server";
22 |
23 | /**
24 | * Define a query in this Convex app's public API.
25 | *
26 | * This function will be allowed to read your Convex database and will be accessible from the client.
27 | *
28 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
29 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
30 | */
31 | export const query = queryGeneric;
32 |
33 | /**
34 | * Define a query that is only accessible from other Convex functions (but not from the client).
35 | *
36 | * This function will be allowed to read from your Convex database. It will not be accessible from the client.
37 | *
38 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
39 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
40 | */
41 | export const internalQuery = internalQueryGeneric;
42 |
43 | /**
44 | * Define a mutation in this Convex app's public API.
45 | *
46 | * This function will be allowed to modify your Convex database and will be accessible from the client.
47 | *
48 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
49 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
50 | */
51 | export const mutation = mutationGeneric;
52 |
53 | /**
54 | * Define a mutation that is only accessible from other Convex functions (but not from the client).
55 | *
56 | * This function will be allowed to modify your Convex database. It will not be accessible from the client.
57 | *
58 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
59 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
60 | */
61 | export const internalMutation = internalMutationGeneric;
62 |
63 | /**
64 | * Define an action in this Convex app's public API.
65 | *
66 | * An action is a function which can execute any JavaScript code, including non-deterministic
67 | * code and code with side-effects, like calling third-party services.
68 | * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
69 | * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
70 | *
71 | * @param func - The action. It receives an {@link ActionCtx} as its first argument.
72 | * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
73 | */
74 | export const action = actionGeneric;
75 |
76 | /**
77 | * Define an action that is only accessible from other Convex functions (but not from the client).
78 | *
79 | * @param func - The function. It receives an {@link ActionCtx} as its first argument.
80 | * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
81 | */
82 | export const internalAction = internalActionGeneric;
83 |
84 | /**
85 | * Define a Convex HTTP action.
86 | *
87 | * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
88 | * as its second.
89 | * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
90 | */
91 | export const httpAction = httpActionGeneric;
92 |
93 | /* prettier-ignore-end */
94 |
--------------------------------------------------------------------------------
/app/board/_components/toolbar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ToolBtn from "./ToolButton";
3 | import {
4 | Circle,
5 | MousePointer2,
6 | Pencil,
7 | Redo2,
8 | Square,
9 | StickyNote,
10 | Type,
11 | Undo2,
12 | } from "lucide-react";
13 | import { CanvasMode, CanvasState, LayerType } from "@/types/canvas";
14 |
15 | interface ToolbarProps {
16 | canvasState: CanvasState;
17 | setCanvasState: (state: CanvasState) => void;
18 | undo: () => void;
19 | redo: () => void;
20 | canUndo: boolean;
21 | canRedo: boolean;
22 | }
23 |
24 | const Toolbar = ({
25 | canvasState,
26 | setCanvasState,
27 | undo,
28 | redo,
29 | canRedo,
30 | canUndo,
31 | }: ToolbarProps) => {
32 | return (
33 |