A Simple Online Notes Application
CreateNote.xyz is a web application for quickly creating, editing, and managing personal notes.
I created the first version of the project in 2022, primarily as a way to learn and practise Next.js Pages Router. Later, I rewrote the application using Next.js App Router and updated its architecture and technologies.
The entire project was developed without the help of AI tools.
How It Works
CreateNote allows people to start writing immediately without creating an account.
When a user is not signed in, their notes are stored locally in the browser. This makes the application usable from the moment it is opened, without requiring registration.
When the user signs in, the locally stored notes are transferred to their account. From that point, the notes are stored in the database and can be accessed through the user’s profile.
This approach combines the simplicity of a local notes application with the option to preserve notes in an account.
Features
- Create notes without registration
- Store guest notes locally in the browser
- Transfer local notes to a user account after sign-in
- Create, edit, and delete notes
- Rich-text note editor
- Search through notes
- Note pagination
- User profiles
- Sign in with Google
- Passwordless sign-in through email
- Light and dark themes
From Pages Router to App Router
The original version of CreateNote was built with Next.js Pages Router.
I later rewrote the application using App Router. This involved changing the project structure and rebuilding different parts of the application around the newer Next.js architecture.
The current version uses server components, server actions, route handlers, and server-side authentication.
Real Users
Although CreateNote started as a learning project, several real users still use it periodically.
I find this especially rewarding because it shows that even a relatively small project created for learning can remain useful to other people years later.
Technologies
- Next.js
- App Router
- React
- TypeScript
- PostgreSQL
- Prisma
- NextAuth
- Tiptap
- Zustand
- Tailwind CSS
- DaisyUI
- Vercel
- Vercel Analytics
- Vercel Speed Insights