Get in touch
Email me at tusharupadhyay690@gmail.com tusharupadhyay690@gmail.com link
Logic Board
Logic Board is an interactive drawing canvas where users can import images from their local devices, toggle between light and dark modes, and save their canvas as an image. Built with TypeScript, Next.js, and Tailwind CSS, this app provides a user-friendly environment for quick sketches, annotations, and image manipulations.
Key Features:
- Image Import: Easily upload images from your local device to the canvas.
- Dark Mode: Switch to a comfortable dark theme for a better user experience.
- Save as Image: Save your canvas creations as images to share or reuse later.
- UUID Support: Unique identifiers for each session or drawing to ensure stability and prevent collisions.
- Modern UI: Built with Shadcn UI and Tailwind CSS, offering a sleek and customizable interface.
Technologies
TypeScript:
A statically typed superset of JavaScript that helps in catching errors early during development, making the application more reliable and maintainable.
Next.js:
A React framework that provides server-side rendering and optimized performance for web applications. Next.js powers the app’s frontend with fast page loads.
UUID:
Used for generating unique identifiers for the session or drawing, ensuring each canvas interaction is tracked individually.
Tailwind CSS:
A utility-first CSS framework that allows you to build custom, responsive designs quickly without writing custom CSS.
Shadcn UI:
A UI component library designed for ease of use and customization. It enhances the visual appeal and usability of the Logic Board app.
Features
- Image Upload: Drag and drop or select images from your local machine to place them on the canvas.
- Dark Mode: Toggle the theme of the application to dark mode for a more comfortable viewing experience, especially in low-light environments.
- Save and Download: After working on your drawing, you can save your canvas as an image and download it to your computer.
- UUID Support: Each drawing session or canvas interaction is given a unique identifier, helping maintain state and ensuring consistency.
- Responsive Design: Built with Tailwind CSS, the app provides a clean, mobile-friendly interface.
How to Run Locally
- Clone the repository:
git clone https://github.com/tushar-upadhya/excalidraw.git