Cindy Nakhammouane
WorldNotes
WorldNotes is currently under development
Overview
WorldNotes is a spatial web experiment blending maps, art, and 3D spaces. Users create notes by sharing thoughts and drawing doodles then posting and anchoring them to a globally shared street view map. Designed for casual web strolling, this web app fuels the creative spirit and builds a global community centering authentic creative expression.
Context
Solo Fullstack Web App Development and UI/UX Design
Role(s)
Project Manager, Lead Fullstack Developer and UI/UX Designer. I built this app end-to-end from ideation to launch
Skills
UI/UX Design, Fullstack Web App Development, Wireframing, SEO
Tools
React, Next.js, TypeScript, Three.js, NoSQL
Discover Art and Stories From Around the World
Start your adventure by landing at a random location scattered with 3D notes left behind by others. Exploration is spontaneous and feels natural: click-to-move in Street View, use the overview or mini map, or search specific places. The navigation bar allows quick refreshes of nearby notes, filtering, and stepping through notes.
See the Full Picture and React with Your Community
A post viewer will be shown if you click on a note, here we can see information about the note’s title, creator, location, description, and community reactions.
Show Off Your Notes the Way You Want
Profiles show you all the notes you post, draft, repost, like, and save. The cover page is a place the user can display their favorite notes in any way they desire.
Create Notes with Fun and Easy to Use Tools
The note creation canvas provides custom tools and brushes. Drawing, text, pixel art, and animation are all supported along with a layers panel, color picker, and color palette creator.
Project Breakdown
Problem
Existing social media platforms are losing their genuity and overall appeal
After interviewing a pool of social media creators and everyday users, many say these are the reasons for the rise of disinterest in social media:
Loss of Human Touch and Authenticity
Hyper brand-driven content, the stress of performativity, and the rise of AI-generated posts and bot accounts have diluted the sense of genuine human presence online.
Overly Curated Feeds
Most platforms use filters and optimized algorithms to maximize user engagement, this leads to tiring social media addictions and restricted natural content discovery.
Lack of Fresh Approaches to Online Social Interaction
Social platforms are beginning to share derivative features and blend into each other. People want new and innovative ways to connect with people online.
Solution
I created WorldNotes to embrace the values and practice of digital graffiti: self-expression, pictography, and creativity. Unique features like 3D note placement, custom drawing tools, and Street View mapping are integrated to create a unique craft-based social media platform.
Creating the MVP
Inspiration and Discovery
WorldNote's creative direction embraces geo-located hand-drawn pictorial posts over the standard text-based or video/photo uploaded content to offer a quirky nuance and emotional depth in social interactions that is under explored today.
The challenge then became:
How can we design a social platform that inspires creativity?
WorldNotes is deeply informed by a blend of internet culture, mapping tools, and communal creativity platforms such as the Unsent Project, GeoGuesser, Reddit's r/Place, and Gartic Phone.
Storyboarding & Designing App Structure
With the vision set, I focused on structuring the app and story boarding user flows. There's a diverse set of traversals I had to consider: note traversal, content browsing, the note creation process, etc., so I mapped the app structure out to visualize navigation routes between different sections, ensuring a concise logical user flow.
App Structure Diagram
Wireframing and Prototyping
I sketched out how key pages like the user profile, community page, and subsequent news and updates page would look and interact. Early iterations helped me find balance between clean and simpler layouts and a stylized scrap book layout without over investing in visuals too soon.
Wireframes of User Profile and Community Page
Formal UI Design
After validating layouts, I shifted toward creating a formal visual design of components using Figma and Illustrator. In doing this process, I found myself redesigning elements multiple times to refine usability and aesthetics.
WorldNote's branding embraces playfulness, bright colors, references the paper medium, and carries a lighthearted aesthetic to reflect the project’s creative spirit. The UI is intentionally inviting, encouraging hesitant users to have casual fun.
Creating An Ecosystem
A design system ensures the interface feels visually unified, giving every interaction from map navigation to note creation a shared cohesive identity. The platform is also intentionally designed to be scalable. For example, the note creator is built to modularly adopt new features, opening possibilities like animated gifs, music attachments, note borders, and stickers to expand the ways users can express themselves.
Mockup Deigns of User Profile and Community Page
Fullstack Development
I followed an Agile workflow with short sprints and modular commits to keep momentum and organization. Each development cycle began with defining small testable goals then designing the feature, implementing it, validating behavior, and gathering informal user feedback.
React
React powers the interactive UI components.
Next.js
Nested layouts and route groups separate pages. Server Components handle data fetching and SEO-friendly rendering; Client Components power interactive views.
TypeScript
TypeScript ensures type safety across components, hooks, and API calls, reducing runtime bugs and streamlining refactors as features evolve.
Konva
Konva enables the custom note creation canvas with drawing, text, and pixel-art modes, supporting layers, transforms, and undo/redo functionality.
Firebase Firestore
Firebase Firestore serves as the NoSQL database, storing notes, user profiles, and community replies with geo-discovery and fast reads in mind.
NextAuth
NextAuth manages authentication and session flow, tying identities to Firestore documents for secure user interactions.
Frontend Development
The bulk of my development time went into implementing WorldNotes's unique UI. It was imperative early on to set up a system of designs such as core color schemes, fonts, text sizing conventions etc. as to have a cohesive look. Pre-planning React component implementations helped streamline production and provide reusable code.
Backend Development: Storing Notes, User Data, and Reactions
Implementing a database was something completely new to me, so I wanted something that could handle real-time data, simple to iterate on, and friendly to a solo workflow. Firebase Firestore is what I ended up using to store key information about user accounts, posted notes, and interactions. I also had no experience with user authentication practices so I ended up using NextAuth and allowed users to create accounts using Google accounts.
Next Milestones
This project is currently in active development with plans to launch a beta version in late 2026.
Go back to the top