Night Desk

I built NightDesk, a customizable productivity dashboard using HTML, CSS, and JavaScript. It includes a Google search bar, live clock and date, dark and light themes, English and Czech language settings, and four widgets: Quick Links, To-Do, Notes, and a Focus Timer. The widgets can be moved and resized, and users can customize which ones are visible. Settings and user data are saved, so the workspace stays personalized between visits.

One of the biggest challenges was getting the widget positioning system to work properly. I spent time debugging the layout and fixing issues that prevented widgets from being moved freely. This project helped me learn more about frontend development, CSS, JavaScript interactions, saving data in the browser, and how seemingly small changes can affect other parts of an application. I’m most proud that I managed to turn the idea into a working website that people can actually use.

I used VS Code as my editor, with ChatGPT and Claude for technical help, debugging, and a few code improvements. I tested and refined the project along the way.

How to test it: Open the live demo and try moving and resizing the widgets, switching themes and languages, adding tasks or notes, and using the focus timer. You can also change the settings to customize the dashboard to your liking.

(Sorry if the project timeline looks a little confusing! I had some trouble linking Hackatime correctly, so the tracked time doesn’t seem to match the time spent working on the project. I finally got it sorted out and wanted to publish the finished project instead of getting stuck on the setup any longer. :D)