.webp)
Previews
.webp)
.webp)
.webp)
Excalidraw-MongoDB
This project integrates the core "@excalidraw/excalidraw" package with a modern Next.js 16 application setup, providing users with a dedicated dashboard to manage their drawing boards, rename them, share them publicly, or delete them when they are no longer needed.
Features
- Whiteboarding: Full integration with the official Excalidraw package for an authentic diagramming and sketching experience.
- Authentication: Secure user login and signup flows powered by [Clerk](https://clerk.com/).
- Dashboard Management:
- View all your drawings as beautifully rendered cards.
- Automatically formatted "Twitter-style" timestamps indicating active edits.
- Options popover to easily rename or delete your boards.
- Cloud Storage: Persistent storage in MongoDB using Mongoose, automatically saving your "elements" and "appState".
- Sharing: Toggling functionality to make your precise drawing public and generate a link to share with others.
- Modern UI: Styled efficiently via Tailwind CSS and Shadcn UI components. Flash messages handle real-time feedback with Sonner.
Framework & libraries
- Next JsResponsiveClerk AuthZod ValidationTailwind CSSGsap AnimationExcalidrawServerlessMongoDB