Smart Desk UI Documentation

Project Overview

The Smart Desk UI project aims to create an intuitive and interactive user interface for a smart desk system. This interface enhances the user's interaction with the smart desk, offering a seamless and personalized experience. In this documentation, we will provide an in-depth description of the interface, including its features, controls, and technical details.

Interface Description

Desk Display

At the heart of the interface is the desk display, represented as a rectangular area. The appearance and content of this display can dynamically change based on the tabs selected by the user.

Tabs

The interface comprises the following tabs, each serving a distinct purpose:

Dashboard: The Dashboard tab is the central hub for monitoring and controlling various aspects of the smart desk. It includes four dynamic cards displaying charge levels, current desk height, a Pomodoro timer, and standing hours. Additionally, a curated music playlist is showcased at the bottom of the Dashboard. Users can modify the values on these cards using interactive buttons.
Tasks: In the Tasks tab, users can view and manage their tasks. It provides filters for sorting tasks by status and priority. Users can also customize the view by selecting specific columns to display, offering a tailored task management experience.
Authentication: The Authentication tab serves as the entry point for users. Here, users log in before accessing other interfaces of the smart desk. It plays a pivotal role in ensuring secure access to the system.
Workspace: The Workspace tab is a versatile area with two distinct tabs within it:
- Focused Work: This tab is designed for users seeking a distraction-free environment for focused tasks, such as writing.
- Creative Work: In this tab, users can unleash their creativity by drawing, painting, or engaging in other expressive activities. It provides a canvas for artistic endeavors.
Settings: The Settings tab empowers users to customize their smart desk experience. They can update their display name and username, choose a preferred theme, configure notification settings (not yet implemented), and manage the visibility of tabs according to their preferences.

Technical Details

Technology Stack: The interface is built using ReactJS and NextJS, providing a responsive and dynamic web application. Tailwind CSS and RadixUI is utilized for styling and component layout, offering a modern and visually appealing design.
Authentication: The Authentication tab employs secure user authentication methods, ensuring that only authorized users can access the smart desk's features. Authentication requires storing user data and vercel/postgres (serverless) is used storing just on table called users.
Data Management: Task data is managed and displayed dynamically, allowing users to filter and customize their task view as needed.
Interactivity: The interface incorporates interactive elements such as buttons, dropdowns, and dynamic card values to enhance user engagement and control.

Conclusion

The Smart Desk UI interface provides a comprehensive and user-centric experience for smart desk users. It combines a range of features, customization options, and interactive elements to optimize productivity and comfort. This documentation offers an overview of the interface's structure and functionality, serving as a valuable reference for users and developers alike.

Extra Documentation