Note-taking Web App

Next.jstRPCDrizzle ORM TailwindCSSRedisBetter-Auth

While building this note-taking application, I used the t3 stack. 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

60