Note-taking web application built with Next.js to practice App Router, authentication, and real-world routing patterns.
⸻
🚀 Live Demo
👉 NoteHub
⸻
📌 About the Project
NoteHub is a solo learning project focused on mastering the core concepts of Next.js App Router, routing architecture, and authentication flow.
The project emphasizes routing logic, middleware, cookies-based sessions, metadata configuration, and access control rather than UI design (styles were provided as part of the assignment).
A learning backend API is used to handle authentication and notes data.
⸻
🧩 Key Features
✔️ User authentication (login / register)
✔️ Cookies-based session handling
✔️ Public and private routes (Next.js Middleware)
✔️ Notes CRUD functionality
✔️ Forms handling and validation
✔️ Route interception and navigation logic
✔️ Loading and error states handling
✔️ Page metadata configuration (SEO)
✔️ Open Graph support for social sharing
⸻
🛠️ Technologies Used
• Next.js — App Router, Middleware, routing patterns
• React — component-based UI
• TypeScript — type safety
• CSS Modules — scoped component styles
• TanStack Query (React Query) — data fetching and caching
• Axios / Fetch API — HTTP requests
• Learning Backend API — authentication and notes management
• Git & GitHub — version control
• Vercel — deployment
⸻
🧠 What I Practiced
• Structuring applications with Next.js App Router
• Implementing route protection with Middleware
• Working with cookies and authentication flow
• Configuring metadata and Open Graph for SEO and social sharing
• Handling forms and user input
• Managing async data and application states
• Understanding basic security patterns in Next.js apps
⸻
📫 Links
🌐 Live Demo: https://09-auth-five-nu.vercel.app/
🔗 Repository: https://github.com/Diamond-FoxUA/09-auth
⸻
👤 Author
Dmytro Farbun Role: Frontend Developer
| Backend API provided for learning purposes