AdvancedWeb12-14 hours+450 XPMentor reviewed

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

notion
notes app
productivity
advanced
javascript
dom
localstorage
ui
ux
dashboard

This challenge doesn't include downloadable assets

Recreate the design from the Figma file using your own images, icons and resources where needed. You are not required to use the exact same images, copy or placeholder data.

You are expected to

Use your own images, icons and resources when needed
Recreate the design based on the provided Figma file
Respect the brand identity, colours, logo and key visuals
Keep the UI structure, layout flow and key sections consistent

Reviewers focus on

Brand colours

0

Completed

—

Average AI review

New here? Read the Tahaddiyat guide to learn the expected structure and submission flow.

Logo usage

Layout structure

Spacing & alignment

UI architecture

Required functionality

Minor differences in content, images or data are fine, but the overall visual identity and design direction should stay clearly consistent with the challenge.

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

Submission

Submit your solution

Share your work for mentor review and showcase your structure, polish and implementation quality.

2 joined

Log in to submit

You need an account to submit your solution and receive mentor feedback.

Log in to submit

Community Discussions

Questions & Answers

Be the first to ask a question about this challenge.

Loading discussions...