Notes app with authentication
A notes dashboard prototype with login, protected routes, category filtering, search, and note creation.
RoleFrontend development and auth logic integration
TypeNotes application with authentication
LocationCourse project
FocusBuilding a practical notes workflow with secure access and dashboard navigation.
StackNext.js, TypeScript, CSS, Auth, Middleware, API
Duration1 week
Project summary
- Project type
- Notes application with authentication
- Goal
- Build an app with login, protected routes, and a dashboard for browsing and creating notes.
- Main features
- Login and registration
- Protected routes
- User profile
- Notes list
- Category filtering
- Search
- Create note flow
- My role
- Frontend development and auth logic integration
- Stack
- Next.js
- TypeScript
- CSS
- Auth
- Middleware
- API
- Result
- A working notes app prototype with basic authentication, filtering, and note management.
Problem
A notes app needs more than a list of entries: it also requires secure access, basic data navigation, and a quick way to find relevant information.
Solution
The project combines login, registration, protected views, user profile, notes list, category filtering, search, and a form for creating new notes.
Result
The result is a prototype that shows the full flow from landing page and authentication to working with notes inside the user dashboard.
What I did
- Implemented authentication UI and protected route behavior
- Integrated dashboard navigation and notes interaction flows
- Built filtering and search interactions for notes list
- Implemented create-note form flow with controlled state
- Connected frontend logic with app API routes
- Structured responsive page layouts for core views
Home screen
Landing page with a short description of the NoteHub app.
Login
Sign-in form for an existing user.
Sign up
Registration form for creating a new user account.
User profile
Protected profile page with signed-in user data.
Notes dashboard
Notes list with categories, pagination, and create note action.
Category filtering
Notes view filtered by the selected category.
Search
Filtering notes by a typed search phrase.
Create note
Form for adding a new note with title, content, and tag.
Need a website that makes customer contact easier?
I can prepare a clear website with a simple path to an inquiry, booking request or conversation.