# Note-taking Web App

- URL: https://www.guneyunay.com/en/projects/note-taking-web-app
- Live demo: https://note-taking-web-app-tau.vercel.app
- Stack: Next.js, tRPC, Drizzle ORM, Better-Auth, Redis
- Date: 2024-11-25

[![](https://www.guneyunay.com/projects/note-taking-web-app.jpg)](https://note-taking-web-app-tau.vercel.app)

# Note-taking Web App

  `Next.js` `tRPC` `Drizzle ORM` 
  `TailwindCSS` `Redis` `Better-Auth`

While building this note-taking application, I used the
**[t3 stack](https://create.t3.gg/)**. In this project, I focused on creating
secure and efficient API routes with **tRPC**, implementing `authMiddleware` for
authentication and `rateLimitMiddleware` for preventing abuse. To ensure future
improvements and collaboration would be easier, I documented these middleware
carefully.

The type safety offered by **tRPC** made the development process smoother and
improved the overall code quality on both the client and server sides. For rate
limiting, I used **Upstash Redis**, which integrated seamlessly with the
project, and for authentication, I utilized **Better Auth**, providing a
straightforward and effective solution.

If you want to explore the app without creating an account, you can use the test
credentials provided below:

  - **Email**: `test@test.com` - **Password**: `12345678`

The app is designed to offer a modern user experience with responsive design,
theme customization, advanced search, and archiving features. You can easily
organize your notes and personalize the experience according to your needs.

## Key Features 🌟

- **Note Management**: Add, edit, delete, and archive notes.
- **Tagging System**: Organize notes with tags.
- **Advanced Search**: Search notes by title, tags, or content.
- **Keyboard Navigation**: Fully accessible interface via keyboard.
- **Responsive UI**: Seamless experience on both mobile and desktop devices.
- **Customizable Themes**: Customize color and font themes.

## Technologies Used 🛠️

- **Next.js**: A powerful framework for modern web applications.
- **tRPC**: Ensuring type-safe API and middleware interactions.
- **Drizzle ORM**: Simplified and flexible database interactions with
  PostgreSQL.
- **TailwindCSS**: A utility-first CSS framework for responsive designs.
- **Redis**: Used for rate-limiting processes.
- **Better Auth**: Providing secure and easy authentication.

Happy coding! 🚀

## Links

- **Source Code**:
  [GitHub Repository](https://github.com/unaygney/note-taking-web-app)
- **Demo**: [Live Application](https://note-taking-web-app-tau.vercel.app)

---