Nuxpad is an infinite canvas application that lets you organize your thoughts, ideas, and tasks visually. The app features a responsive design that works on desktop, tablet, and mobile devices.
- 📝 Create, edit, and delete notes in Nuxpad
- 🌈 Customize note colors
- 📱 Fully responsive design (desktop, tablet, mobile)
- 🔄 Infinite canvas with pan and zoom
- ⏪ Undo/redo functionality
- 📊 Optional grid for alignment
- 🖱️ Drag and resize notes
- 🌓 Light/dark mode support
- 💾 Local storage persistence
Nuxpad is optimized for mobile devices with touch controls for panning, zooming, and note manipulation.
The application adapts seamlessly to tablet devices, providing an optimal experience between desktop and mobile.
- Node.js (v14 or later)
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/Nuxpad.git cd Nuxpad -
Install dependencies
npm install # or yarn -
Start the development server
npm run dev # or yarn dev -
Open your browser and navigate to
http://localhost:5173
Click the "Add Note" button in the toolbar to create a new note in Nuxpad. Notes are automatically saved to your browser's local storage.
Drag notes by their header to reposition them anywhere on the infinite canvas.
Use the resize handle in the bottom-right corner of any note to adjust its size.
Click the color circle in the note to change its color. Choose from 6 different colors to organize your notes.
- Pan: Click and drag on empty canvas areas
- Zoom:
- Desktop: Use mouse wheel or trackpad pinch gesture
- Mobile: Use pinch gesture to zoom in/out
- Reset View: Click the reset button or use keyboard shortcut
Ctrl +/Cmd +: Zoom inCtrl -/Cmd -: Zoom outCtrl 0/Cmd 0: Reset zoomCtrl Z/Cmd Z: UndoCtrl Y/Cmd YorCtrl Shift Z/Cmd Shift Z: Redo
- Use two fingers to pan the canvas
- Pinch to zoom in and out
- Tap and hold the note header to drag
- Tap the tutorial button for a mobile-optimized guide
- React
- TypeScript
- Tailwind CSS
- Vite
- Shadcn UI Components