ScribNotes | Mastering React through Persistence

ScribNotes is a high-performance, aesthetically driven sticky notes application. While it serves as a functional tool for capturing thoughts, its primary purpose is to learn professional-grade React patterns for data persistence and state management.

What I Learned by Building This

Building this project bridges the gap between basic "Notes" apps and production-ready applications. Here is how this project enhanced my React.js expertise:

1. Advanced State Persistence Patterns

Most beginners struggle with data disappearing on refresh. This project taught me:

• How to handle larger data sets (Notes) that don't need server-side synchronization.
• How to use browser cookies to store UI preferences (like Dark Mode) which can be read by a server during SSR (Server Side Rendering) to prevent UI flickering.

2. Logic Abstraction with Custom Hooks

Instead of cluttering components with localStorage.getItem and JSON.parse, I used Custom Hooks (useLocalStorage, useCookie).

• I learned how to create reusable, generic hooks (<T>) that can be dropped into any project.
• I understood the Functional Initializer pattern in useState to read from storage only once during the initial mount.

3. Mastering Immutable State Updates

Handling an array of objects is a core React skill. Through this project, I practiced:

• Adding: Spreading the existing state and adding new items ([newNote, ...notes]).
• Deleting: Using .filter() to remove items by ID.
• Updating: Using .map() to find a specific object and merge updates without mutating the original state.

4. Modern UI Architecture (Tailwind CSS 4)

This project moves away from standard utility-first styling and into Design Systems:

• Implementing a Black & Green theme using Tailwind 4's new @theme configuration.
• Building Glassmorphic components that maintain readability across different backdrop filters.
• Creating a Fluid Masonry Grid that automatically adapts to the number of notes using CSS Grid's auto-fill.

5. Type-Safe Development with TypeScript

Using TypeScript in this project ensures:

• Notes always have the required properties (id, title, content, color, createdAt).
• Storage hooks are Generic, allowing you to store any data type with full IDE autocompletion and error checking.

---

Tech Stack

• React 19: Utilizing functional components and modern hooks.
• Tailwind CSS 4: For high-performance, modern styling.
• Lucide React: For consistent, lightweight icons.
• js-cookie: For simplified cookie manipulation.

Getting Started

1. Clone the repository.
2. Install dependencies: bun install or npm install.
3. Run the dev server: bun dev or npm run dev.

By studying the implementation in src/hooks/useStorage.ts and src/App.tsx, I've gained a deeper understanding of how modern React applications manage side effects and maintain a seamless user experience across browser sessions.