Scribbly

Seamlessly Document and Preserve the Vibrant Moments of Your Life with Our Feature-Rich Digital Journal.

Roles In Project

  • UI/UX Designer
  • Full Stack Web Developer

Responsibilities

  • Designing and implementing the user interface (UI) for the digital journal app
  • Developing user-facing features using Next.js for a seamless and responsive user experience.
  • Handling subscription payments using Stripe for billing
  • Setting up and managing webhooks for various functionalities, including saving data to the database and handling Stripe events.
  • Optimizing the app for performance, including load times and resource efficiency.

Scribbly is more than just a project; it's my passion brought to life. From design to implementation, I crafted Scribbly as a modern digital journal web app.

This open-source endeavor transforms the art of journaling into a delightful and eco-conscious experience.

Redefining the way we capture and reflect on life's moments, Scribbly offers an intuitive and sleek platform with a seamlessly integrated ecosystem. Immerse yourself in the future of personal reflection, where simplicity meets sophistication.

Features

  • Intuitive and Modern Journal Editor: Express yourself effortlessly with our sleek and intuitive journal editor powered by Editor.js. Craft your thoughts, memories, and aspirations in a way that feels natural and inspiring.
  • Personalized Entry Reminders: Tailor your journaling routine with personalized entry reminders. Receive gentle nudges through nice emails, thoughtfully sent to your inbox based on your preferences. Activate this option to enhance your commitment to self-reflection.
  • Bookmark and Organize Entries: Easily bookmark your favorite journal entries for quick access. Whether it’s a profound reflection or a cherished memory, keep your most important entries at your fingertips.
  • Scalable and Secure Database: Powered by PlanetScale and Prisma, our app ensures the scalability and security of your data. Your digital journals are stored with the utmost care and accessibility.
  • Beautifully Designed UI with Shadcn/UI: Immerse yourself in a modern and visually stunning user interface designed with Shadcn/UI components. Our UI is not only beautiful but also accessible, customizable, and built for speed.
  • Seamless Image Uploads: Enrich your journal entries with images effortlessly using UploadThing. Capture and save moments that matter, visually enhancing your digital journaling experience.
  • Efficient Email Communications: Craft engaging emails with React-Email, and seamlessly send them using Resend. Stay connected with your journaling journey through well-crafted and user-friendly emails.
  • Secure Payments with Stripe: Unlock premium features effortlessly with secure and convenient payments powered by Stripe. Elevate your experience with premium offerings tailored to your needs.

Challenges

UI/UX Design: Being my own UI/UX designer brought its own set of challenges, especially when perfectionism was at the forefront. Designing the landing page, inspired by various resources, became a labor of love. After navigating through design intricacies and drawing inspiration from diverse sources, I finally molded the UI to match the vision in my mind.

Storing Authenticated User Details: Integrating Clerk for authentication and Prisma as an ORM presented a puzzle. Saving authenticated users' details to the database proved tricky initially. The managed authentication service, Clerk, didn't seamlessly mesh with Prisma. The solution emerged through diligent study of documentation and leveraging example repositories. The recommended approach of using webhooks to store user data became the key, unlocking a smooth flow of information from authentication to the database.

Prisma Bug and Webhooks: A perplexing bug surfaced when non-authenticated users registered for the first time—redirecting to the dashboard triggered a "User not found" error. This unexpected behavior turned out to be a result of a race condition and network delay. Digging into the intricacies of Prisma, I discovered that the webhooks were functioning correctly, but a race condition was causing the bug. Implementing error-handling logic in the function responsible for retrieving the current user from the database resolved the issue. While seemingly a small misstep, this experience provided valuable insights into handling webhooks and overcoming race conditions.

In overcoming these challenges, Scribbly became more than just a digital journaling platform; it became a testament to perseverance and continuous learning. Each hurdle illuminated a path to improvement, making Scribbly not just a project, but a journey of growth and mastery in the world of web development.

Technology Stack

  • Next.js
  • Typescript
  • Tailwind CSS
  • shadcn/ui
  • Clerk
  • Editor.js
  • Prisma
  • PlanetScale
  • Framer Motion
  • Resend
  • React Email
  • React Hook Form
  • Zod
  • Stripe
  • React Query
  • Uplaodthing