I wanted a Notes App, so I built one 💪
It only took me 30mins, using Bolt.new AI 😱
It does exactly what I want..and no more!
When making apps is this easy, people are going to start crafting their own little masterpieces—just for themselves. The era of personal, private apps is coming!
PootleNotes is a sleek, minimalist note-taking application built with React, TypeScript, and modern web technologies. In this post, we’ll dive deep into its architecture and key features.
Core Technologies
- React & TypeScript: For type-safe component development
- Zustand: For state management
- PeerJS: For peer-to-peer real-time collaboration
- @uiw/react-md-editor: For Markdown editing
- Tailwind CSS: For styling
- DnD Kit: For drag-and-drop note reordering
Architecture Overview
State Management with Zustand
The app uses Zustand for state management, which offers a simple yet powerful approach. The store manages:
- Notes collection
- Selected note
- UI preferences (dark mode, distraction-free mode)
- Peer connections for real-time collaboration
interface NotesState {
notes: Note[];
selectedNoteId: string | null;
isDistractionFree: boolean;
isDarkMode: boolean;
// ... peer-related state
}
Real-Time Collaboration
One of the most interesting features is the peer-to-peer collaboration system built with PeerJS. Users can connect directly to each other and sync their notes in real-time.
The collaboration system handles several types of operations:
- Initial note synchronization
- Real-time updates
- Note deletion
- Conflict resolution based on timestamps
Component Structure
Sidebar Component
- Displays note list
- Handles note creation/deletion
- Implements drag-and-drop reordering
- Manages note selection
Editor Component
- Markdown editing interface
- Title editing
- Note sharing options (Twitter, Email, Download)
- Responsive layout with centered content
- Dark mode support
Key Features
1. Distraction-Free Mode
Users can toggle a distraction-free mode that hides the sidebar and focuses on the content. The editor maintains a comfortable reading width (max-w-3xl) for optimal readability.
2. Dark Mode
The app includes a carefully designed dark mode that affects:
- Background colors
- Text colors
- Editor theme
- UI elements
3. Drag and Drop
Notes can be reordered using drag and drop, implemented with DnD Kit for smooth interactions and animations.
4. Local Storage
Notes are automatically saved to localStorage using Zustand’s persist middleware, ensuring data persistence between sessions.
5. Sharing Options
Multiple ways to share notes:
- Twitter sharing
- Email sharing
- Markdown file download
Typography and Design
The app uses a thoughtful typography system:
- Lora for headings (font-heading)
- Libre Baskerville for body text (font-body)
This combination creates a pleasant reading and writing experience that’s easy on the eyes.
Custom Editor Styling
The Markdown editor is extensively customized with CSS to match the app’s design:
- Removed default borders
- Customized text colors
- Adjusted spacing
- Seamless integration with dark mode
Performance Considerations
Several optimizations are in place:
- Efficient state updates with Zustand
- Lazy loading of peer connections
- Optimized re-renders using React.memo where appropriate
- Debounced note updates
Conclusion
PootleNotes demonstrates how modern web technologies can be combined to create a powerful, user-friendly note-taking application. Its real-time collaboration features and clean design make it a valuable tool for both personal and collaborative note-taking.
Leave a Reply