What it does: Madness Journal is a unique digital journaling application with multiple writing modes that transform your text in real-time. Users can choose from various modes like "Madness Journal" (progressive text corruption), "Irreversible Mode" (no backspace allowed), "Time-Locked Mode" (entries locked for specific durations), and more. The app features Google authentication, cloud storage, typing sound effects, and a beautiful dark ambient theme with glassmorphism effects.
How we built it: Everything was built using Cursor IDE. We built Madness Journal using Next.js 15 with the App Router, React 19, TypeScript, and Tailwind CSS. The frontend uses Shadcn/ui components for a consistent design system. For the backend, we integrated Firebase Authentication for Google sign-in and Firestore for cloud storage of diary entries. The real-time text corruption effects are implemented using custom JavaScript algorithms that progressively transform characters based on corruption levels. The typing sound effects use the Web Audio API for dynamic audio generation.
Challenges we ran into One of the biggest challenges was implementing the progressive text corruption effect while maintaining readability. We had to balance the visual impact with usability, ensuring users could still understand what they were writing. Another challenge was handling Firebase Analytics in a Next.js SSR environment, which we solved by removing analytics entirely to avoid compatibility issues. We also faced issues with Firestore composite indexes when using where() and orderBy() together, which we resolved by implementing client-side sorting instead.
Accomplishments that we're proud of: We're particularly proud of creating a truly unique journaling experience that makes writing fun and engaging. The real-time corruption effects that maintain readability while creating an unsettling atmosphere are something we haven't seen in other journaling apps. We also successfully implemented multiple distinct writing modes, each with its own personality and mechanics. The beautiful dark ambient theme with floating particles and glassmorphism effects creates an immersive atmosphere that matches the app's concept perfectly.
What we learned: We learned the importance of balancing creativity with usability - even the most innovative features need to remain functional. We discovered how to handle complex state management for real-time text transformations and gained experience with Firebase integration in Next.js applications. We also learned about the challenges of implementing audio effects in web applications and how to create engaging user experiences through subtle design details.
What's next for Madness Journal: We plan to add more journaling modes like "Echo Mode" (words echo back with variations) and "Shadow Journaling" (hidden layers of text). We want to implement AI-powered features for the "Alternative Reality Mode" to generate truly alternate versions of entries. We're also considering adding collaborative features, export options, and mobile app versions. Additionally, we want to add more customization options for the corruption effects and expand the audio experience with different sound themes for each mode.
Built With
- cursor
- firebase
- nextjs
- tailwind
Log in or sign up for Devpost to join the conversation.