Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
57b0626
feat - Pencil, updated UI, cleaner code
mounishvatti Jan 20, 2025
4ce26e3
now the pencil strokes render on all devices which joined the room
mounishvatti Jan 20, 2025
5ea1709
new toolbar
mounishvatti Jan 20, 2025
0978c43
made the toolbar responsive for medium and small screens
mounishvatti Jan 21, 2025
917bd1e
fixing zoom and pan
mounishvatti Jan 21, 2025
5f7673c
feat: zoom in, zoom out, and auth token
mounishvatti Jan 21, 2025
6962c47
Merge pull request #1 from mounishvatti/dev
mounishvatti Jan 21, 2025
3c25250
code cleanup
mounishvatti Jan 21, 2025
bc7988d
code clean up 2
mounishvatti Jan 21, 2025
4fdb570
Merge pull request #2 from mounishvatti/dev
mounishvatti Jan 21, 2025
74876b1
users can enter a roomID and join their friend's room and collaborate
mounishvatti Jan 21, 2025
cb9267d
type error fix
mounishvatti Jan 21, 2025
d20d2fd
minor UI fix
mounishvatti Jan 21, 2025
6c77421
feat: undo, redo, erase and panning
mounishvatti Jan 22, 2025
61993b4
canvas ui fix
mounishvatti Jan 22, 2025
0240b17
minor type fix
mounishvatti Jan 22, 2025
b3fa512
feat: changes curser-pointer based on selected tool
mounishvatti Jan 22, 2025
b58e753
feat: choose strokeStyle for canvas, added collaborate button
mounishvatti Jan 23, 2025
f94a65b
users can view the hex code of the colour on hover
mounishvatti Jan 23, 2025
094a98d
minor ui fix
mounishvatti Jan 23, 2025
9736194
users can now change the theme of their canvas
mounishvatti Jan 23, 2025
432aac6
feat: added tooltip for better user accesibility
mounishvatti Jan 23, 2025
8630b61
minor theme ui fixes
mounishvatti Jan 23, 2025
0d7b541
feat: added new shapes line and diamond, added sidebar.
mounishvatti Jan 23, 2025
63c063c
seperated components into different files
mounishvatti Jan 23, 2025
3afbfb0
viewpane fixes
mounishvatti Jan 24, 2025
79146c5
added redux for global user state management
mounishvatti Jan 24, 2025
4f8a0a5
added comments
mounishvatti Jan 24, 2025
e4d2f7d
minor ui fix
mounishvatti Jan 24, 2025
16c586d
using localStorage instead
mounishvatti Jan 24, 2025
0903ceb
minor ui fix
mounishvatti Jan 24, 2025
efde6be
minor ui fix
mounishvatti Jan 24, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/excelidraw-frontend/app/canvas/[roomId]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import { RoomCanvas } from "@/components/RoomCanvas";

export default async function CanvasPage({ params }: {
Expand Down
89 changes: 89 additions & 0 deletions apps/excelidraw-frontend/app/create-room/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
"use client";
import { PencilRuler } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import Link from "next/link";
import axios from "axios";
import { toast } from "react-toastify";
export default function SigninPage() {
const router = useRouter();
const [formData, setFormData] = useState({
name: "",
});

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { id, value } = e.target;
setFormData((prev) => ({ ...prev, [id]: value }));
};

const createRoom = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (formData.name) {
try {
const data = {
name: formData.name,
};
const response = await axios.post("/room", data);
const roomId = response.data.roomId;
toast.success("Room created successfully");
router.push("/canvas/"+roomId);
} catch (error) {
console.log(error);
toast.error("Something went wrong");
}
}
};
return (
<>
<div className="bg-gradient-to-t from-indigo-900 to-white via-indigo-300 dark:from-gray-950 dark:to-indigo-900">
<div className="absolute top-50 right-50 p-4 cursor-pointer">
<PencilRuler
className="h-8 w-auto text-indigo-600 dark:text-indigo-400"
onClick={() => {
router.push("/");
}}
/>
</div>
<div className="flex min-h-screen items-center justify-center">
<div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
<div className="text-center">
<h1 className="text-2xl font-bold text-gray-800">
Create a room and collaborate
</h1>
</div>
<form className="mt-6" onSubmit={createRoom}>
<div className="mb-4">
<label
htmlFor="name"
className="block text-sm font-medium text-gray-700"
>
Please enter your name
</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleInputChange}
className="mt-1 block w-full px-3 py-2 border text-zinc-800 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
placeholder="Harkirat"
/>
</div>
<div>
<button
type="submit"
className="w-full py-2 px-4 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none sm:text-sm font-medium"
>
Create room
</button>
</div>
<div className="text-center mt-4">
<p className="text-zinc-700">Want to join a room? <a className="underline" href="/join-room">Join room</a></p>
</div>
</form>
</div>
</div>
</div>
</>
);
}
65 changes: 57 additions & 8 deletions apps/excelidraw-frontend/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 221 83% 53%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
Expand All @@ -22,8 +22,13 @@
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221 83% 53%;
--radius: 0.75rem;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}

.dark {
Expand All @@ -33,7 +38,7 @@
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
Expand All @@ -45,6 +50,50 @@
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
--ring: 212.7 26.8% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}


/* Define custom cursors */
.cursor-hand {
cursor: grab;
}
.cursor-pencil {
cursor: crosshair;
}
.cursor-rect {
cursor: crosshair;
}
.cursor-circle {
cursor: crosshair;
}
.cursor-erase {
cursor: url('../assets/icons8-eraser-32.png'), auto;
}
.cursor-clear {
cursor: url('../assets/icons8-clear-40.png'), auto;
}
.cursor-point {
cursor: url('../assets/icons8-cursor-32.png'), auto;
}
.cursor-line {
cursor: crosshair;
}
.cursor-rhombus {
cursor: crosshair;
}
85 changes: 85 additions & 0 deletions apps/excelidraw-frontend/app/join-room/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
"use client";
import { PencilRuler } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { toast } from "react-toastify";
export default function SigninPage() {
const router = useRouter();
const [formData, setFormData] = useState({
roomId: "",
});

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { id, value } = e.target;
setFormData((prev) => ({ ...prev, [id]: value }));
};

const joinRoom = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (formData.roomId) {
try {
router.push("/canvas/"+formData.roomId);
toast.success("Joined the room successfully");
} catch (error) {
console.log(error);
toast.error("Something went wrong");
}
}
};
return (
<>
<div className="bg-gradient-to-t from-indigo-900 to-white via-indigo-300 dark:from-gray-950 dark:to-indigo-900">
<div className="absolute top-50 right-50 p-4 cursor-pointer">
<PencilRuler
className="h-8 w-auto text-indigo-600 dark:text-indigo-400"
onClick={() => {
router.push("/");
}}
/>
</div>
<div className="flex min-h-screen items-center justify-center">
<div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
<div className="text-center">
<h1 className="text-2xl font-bold text-gray-800">
Join a room and collaborate
</h1>
</div>
<div className="text-center mt-1">
<p className="text-sm text-gray-500 font-light">(Ask your friend to share the room ID)</p>
</div>
<form className="mt-6" onSubmit={joinRoom}>
<div className="mb-4">
<label
htmlFor="roomId"
className="block text-md font-medium text-gray-700"
>
Enter room ID
</label>
<input
type="text"
id="roomId"
name="roomId"
value={formData.roomId}
onChange={handleInputChange}
className="mt-1 block w-full px-3 py-2 border text-zinc-800 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
placeholder="1234"
/>
</div>
<div>
<button
type="submit"
className="w-full py-2 px-4 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none sm:text-sm font-medium"
>
Join room
</button>
</div>
<div className="text-center mt-4">
<p className="text-zinc-700">Want to create a room? <a className="underline" href="/create-room">Create room</a></p>
</div>
</form>
</div>
</div>
</div>
</>
);
}
29 changes: 24 additions & 5 deletions apps/excelidraw-frontend/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
"use client";
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { ToastContainer } from "react-toastify";
import { Provider } from "react-redux";
import store from "@repo/store/store";
import "./globals.css";

const geistSans = Geist({
Expand All @@ -12,10 +16,10 @@ const geistMono = Geist_Mono({
subsets: ["latin"],
});

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
// export const metadata: Metadata = {
// title: "Excalidraw",
// description: "Draw, collaborate and chat with your team in real-time",
// };

export default function RootLayout({
children,
Expand All @@ -27,7 +31,22 @@ export default function RootLayout({
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<Provider store={store}>
<ToastContainer
position="top-right"
autoClose={3000}
hideProgressBar={false}
newestOnTop={true}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="system"
limit={5}
/>
{children}
</Provider>
</body>
</html>
);
Expand Down
Loading