Back to Pet Project Projects

Pet Project

NoteHub

A modern note management application built with Next.js App Router, SSR, TanStack Query and Zustand.

Live DemoView Code
NoteHub

Overview

NoteHub is a full-featured note management application developed with Next.js App Router. The project demonstrates modern React development practices including Server-Side Rendering, Client-Side Rendering, dynamic routing, React Query hydration, Zustand state management, SEO optimization and responsive user interface.

My Contribution

SSR & CSRApp RouterDynamic RoutesSEO MetadataOpen GraphTanStack QueryHydrationZustand PersistAxios APIDraft Persistence

Responsibilities

  • Built application using Next.js App Router
  • Implemented Server-Side Rendering
  • Implemented Client-Side Rendering
  • Integrated REST API with Axios
  • Configured React Query hydration
  • Implemented dynamic routing
  • Added SEO metadata and Open Graph
  • Implemented note filtering
  • Created note details page
  • Implemented draft persistence with Zustand
  • Configured localStorage persistence
  • Developed responsive UI using CSS Modules

Challenges

  • Combining SSR and CSR
  • React Query hydration
  • Dynamic routing with App Router
  • SEO optimization
  • Persisting drafts with Zustand