Tracking Dashboard: Light Mode + Profile Switch + Tailwind + VanillaTS

What are you most proud of, and what would you do differently next time?

I'm really proud of the unique approach I took right from the start of the project. At first, it seemed time-consuming, but I trusted the process and focused on building a strong foundation.

Here’s a breakdown of what I accomplished:

1. Design Focus: I decided to complete the design phase first, which allowed me to create a solid visual structure before diving into the technical parts. This step gave me clarity and set the tone for the rest of the project. 🎨✨
2. Personal Touch: I modified the JSON data to include my own profile, which added a personal and unique element to the application. 🧑‍💻
3. Light and Dark Mode: Implementing both themes was an exciting challenge! I managed to keep the images the same for both modes, and instead of toggling between images, I cleverly used CSS properties to change the image color based on the theme. 🌞🌙
4. Clean and Lightweight: I kept things simple by using vanilla TypeScript with no external libraries for the components. This helped me maintain full control over the project’s structure and made it lighter. 💡
5. Well-Structured Code: I created separate components and wrote clear interfaces, ensuring the code was modular, easy to maintain, and scalable. 👨‍💻🔧

Looking back, if I were to do anything differently, I would aim to plan the project’s timeline more efficiently to avoid feeling rushed during the implementation phase. Next time, I'll make sure to allocate time for both testing and refinement without compromising on quality.

Overall, I'm really happy with the outcome and excited for the next challenge!

What challenges did you encounter, and how did you overcome them?

One of the main challenges I faced was related to image handling in production. Since my assets were initially stored in the src folder, they weren’t loading properly when deployed. This caused issues with the images not being visible in the live version of the app. 😕📸

To resolve this, I moved the assets from the src folder to the public folder, which allowed the images to be served correctly in production. This simple adjustment solved the issue and made everything work smoothly. 💡✔️

It was a good reminder that sometimes the solution is just about placing things in the right spot! Always a learning experience! 😎

What specific areas of your project would you like help with?

I'd appreciate some constructive feedback on my TypeScript code and the overall project structure. 🙏 I'm open to suggestions on how I can improve code readability, performance, or anything else that might make it more maintainable and scalable. 👩‍💻🧑‍💻

If you spot any areas where I could refine the architecture or if you have tips on best practices for TypeScript, feel free to share! 🚀 I'm all ears for valid and insightful feedback that can help me level up my skills! ✨

Important: Make sure to hover on the dashboard for a bigger screen to see the buttons for light mode and profile swap.