NoteHub is a modern Next.js note management application built with authentication, private note access, search/filter capabilities, and server-side API integration.
- Framework: Next.js 16
- UI: React 19
- Style: CSS modules
- Data fetching: Axios + React Query
- State: Zustand
- Auth/session handling: cookie + Next.js route handlers
- TypeScript support enabled
- User authentication and session handling via Next.js API routes
- Protected note pages and authenticated access to private data
- Note creation and detailed note view pages
- Note listing with server-side pagination and filtering by tag
- Search support for note content
- Global layout with header, footer, and modal support
- Reusable UI components for notes, pagination, search, and previews
app/- Next.js App Router pages and layoutsapp/(auth routes)/- authentication route structureapp/(private routes)/notes/- protected note pages, filters, and detail pagesapp/api/- route handlers for auth, notes, and session APIs
components/- reusable UI components likeHeader,Footer,NoteForm,NoteList, andModalhooks/- custom hooks for note creation and modal statelib/api/- API helpers for client and server requeststypes/- shared TypeScript types for notes and users
- Install dependencies:
npm install- Run development server:
npm run dev- Open the application:
Visit http://localhost:3000
npm run dev- start the Next.js development servernpm run build- build the application for productionnpm run start- run the production buildnpm run lint- run ESLint checks
nextreactreact-domaxios@tanstack/react-queryzustandreact-paginatecookieuse-debouncemodern-normalize
- The app uses Next.js API route handlers and cookies to manage authentication and session state.
- The root layout includes a global
Header,Footer, and React Query provider viaTanStackProvider. - Metadata is configured for SEO and social sharing across pages.