Author: Colt Cruz
Date: February 16, 2026
This week marked a meaningful step forward for CalmSpace as the project moved from wireframes into tangible interface development. After spending last week refining the overall structure and user flow, this week focused on turning those plans into functional screen layouts inside the application.
The primary focus was building out the authentication flow and core app screens. I redesigned and implemented the welcome screen, login screen, and sign-up screen to create a cleaner and more cohesive first impression. Because CalmSpace is centered around rest and calm environments, I kept the layouts minimal, with consistent spacing, soft contrast, and clear visual hierarchy. Authentication may seem straightforward, but it sets the emotional tone for the entire experience.
From there, I built out the main Home screen (dashboard). This includes a personalized greeting, a sleep overview card displaying duration, depth, and quality, a weekly sleep summary chart, and recent session history. At this stage, the data is statically placed to define structure and layout. The goal was to solidify how information is presented before connecting real-time data or backend systems. Establishing the UI foundation first makes future integration more intentional and less prone to restructuring.
Another major milestone was constructing the Monitor screen. This screen represents the core functionality of CalmSpace and includes an active recording indicator, sleep timer display, microphone threshold controls, and ambient sound playback controls. While the current implementation uses placeholder logic, the layout establishes how real-time monitoring, decibel detection, and session tracking will eventually function. Designing this screen required careful attention to clarity, since it must remain usable in low-light, low-focus conditions.
Throughout development, I intentionally left structured TODO notes in the codebase to prepare for backend integration. These include authentication handling, persistent sleep session storage, API connections, and real-time microphone processing. Rather than rushing into partial implementations, this approach keeps the architecture clean and reduces future refactoring.
Compared to last week’s wireframing phase, this week felt more concrete. The project moved from conceptual layouts into interactive screens that resemble a real product. While much of the functionality is still to be implemented, CalmSpace now has a visible and navigable structure in place.
Overall, this week was about translating ideas into structure. The foundation is set, and the next phase will focus on connecting these interfaces to working logic and backend systems, bringing CalmSpace closer to a fully functional MVP.
Blogs by Colt 
Leave a comment