Notion Style Notes App
Build a fully interactive Notion-style Notes Application with a modern dark UI. The app should simulate a productivity tool where users can create, organize, and edit notes dynamically. The application should include: Sidebar with folders/workspaces Notes list panel Rich text editor view Smooth UI interactions Persistent data storage This challenge focuses heavily on: Advanced DOM manipulation State management without frameworks Complex layout structuring Dynamic rendering UX polish and responsiveness
Attention
This challenge does NOT include downloadable assets.
You are expected to:
- Use your own images, icons, and resources when needed
- Recreate the design based on the provided Figma file
- Respect the main brand identity, colors, logo, and key visual elements
- Keep the overall UI structure, layout flow, and important sections consistent with the design
You are NOT required to use the exact same images, text content, or placeholder data from the original design.
Your focus should be on:
- Brand colors
- Logo usage
- Layout structure
- Spacing and alignment
- UI architecture
- Required functionality
Minor differences in content, images, or displayed data are acceptable, but the overall visual identity and core design direction should remain clearly consistent with the challenge.
Project Requirements
- Create a sidebar with folders/workspaces navigation
- Display a list of notes for the selected folder
- Show selected note in an editor panel
- Allow creating a new note
- Allow editing note title and content
- Allow deleting notes
- Allow switching between notes dynamically
- Organize notes into folders
- Persist data using LocalStorage or mock API
- Implement active state for selected note and folder
- Support responsive layout (desktop + mobile)
- Add smooth transitions between UI states
- Implement search functionality for notes
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.