Hey there! I wanted to share something I’ve been working on—rewriting one of my very first projects in Next.js. It’s not a complete redesign (yet!), but I’m focused on making it better and more up-to-date.
Back when I started learning Next.js, I built a simple time dashboard—not a tracker, but a tool to help organize and visualize time more effectively. It was a great learning experience, but looking back now, I see so many ways to improve it!
What the Original Looked Like
The first version was pretty basic:
- A simple UI showing time allocations on a single-page website.
- Limited responsiveness and styling.
- Minimal features—just the basics.
- Manual data entry with no backend.
At that time, I was primarily focused on getting familiar with Next.js rather than creating a feature-rich application. Now, I want to revisit it and see how I can improve it.
The Improvements I Made
One major improvement was adding a backend. Originally, my project didn’t have one, so I set up a basic backend using Express.js. I then started implementing some essential features and connected them with my old frontend.
The next step was cleaning up the UI. For this, I used an AI tool called V0.dev for inspiration. It helped me generate cleaner component structures and redesign my interface. Thanks to that, I was able to streamline my styling and focus on adding essential features like authentication.
V0.dev turned out to be an incredible tool—it made my life easier by speeding up the UI development process. With a cleaner design in place, I was able to shift my attention back to refining the backend and improving performance.
I also transitioned from static data to dynamic data by integrating APIs for better flexibility. One of the most exciting additions was a calendar feature similar to Google Calendar. This allows my dashboard to connect with Google Calendar, retrieve all my scheduled events, and display them in an intuitive way.
Additionally, I implemented drag-and-drop functionality to make scheduling more interactive and user-friendly. To enhance insights, I added advanced analytics features, providing deeper data visualization and tracking capabilities.
Categorizing and Tracking Application Usage
Initially, I only tracked application titles, but I soon realized I needed a more detailed approach. I enhanced the system to track individual applications accurately and categorize them accordingly. For example, I differentiated coding-related applications like VS Code from other applications.
For better tracking, I created a category system in the database. The system classifies applications into categories like coding, entertainment, and productivity. If I was on a coding-related website, it would be categorized under coding. Similarly, if I was using Instagram or YouTube, it would fall under entertainment, while news websites would be considered as learning resources.
To improve this further, the system actively tracks which application is currently in focus. If VS Code is active, it logs that time as coding. If a music application is running, it categorizes it under entertainment. Figuring out how to track different types of applications and assign them correctly was challenging, but after multiple iterations, I found an efficient solution that works well.
Improving Tracking Methods
When this project started, everything was manually tracked. After some time, I relied on Google Calendar for scheduling, but it wasn’t very reliable for my needs. Eventually, I built my own tracking system, which allowed for more accurate and flexible time management directly within the application.
Optimizing Charts and Visualization
After two years of improving my skills, I revisited the charts and visualization aspects of my dashboard. I worked on making the design more compact and visually appealing, ensuring that the data was presented in a more accessible way.
AI-Powered Summarization and Suggestions
With AI becoming more powerful, I wanted to incorporate it into my project. I started working on a feature called "Summarization and Suggestions" using the Gemini AI API.
This feature summarizes daily, weekly, and monthly activities, giving users insights into how they spent their time. It also provides trend analysis, highlighting patterns and suggesting improvements for better time management.
The Final Stage: Optimization
Initially, the project was not well-optimized. I worked on optimizing performance step by step, improving every aspect of the application. The Google Lighthouse score is now much better, ensuring faster load times and better efficiency.
Putting It to the Test
I’ve been using this updated version for multiple weeks now, and it works pretty reliably overall. The application that tracks everything is functioning perfectly, but I know there’s still room for improvement. These real-world tests are invaluable—they help me identify areas to refine further.
Moving Forward
This rewrite is teaching me a lot about balancing frontend and backend development while leveraging modern tools. It’s been exciting to see how much progress I’ve made since my first attempt, and I’m eager to keep refining the project.
If you’ve ever revisited an old project, you know how rewarding (and sometimes challenging) it can be. I’ll continue sharing my journey—stay tuned for more updates!
If you have any questions or need clarification, feel free to ask!