Social Media Dashboard using Next.js, Tailwind CSS and Supabase

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

I’m most proud of how far I’ve come with this solution—especially how I was able to bring the Frontend Mentor design to life using Next.js and Tailwind CSS while also implementing dark mode, theme persistence, and dynamic stats rendering. It pushed me to apply real-world practices like managing state, structuring components, and handling local storage for UI preferences.

I also learned a lot about cleaning up unused features, optimizing components, and making design decisions that improve the user experience. The whole process helped me better understand the balance between functionality and simplicity.

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

One of the biggest challenges I faced was implementing a reliable dark mode toggle. I wanted it to persist across sessions and reflect correctly on both first load and manual toggle. I initially tried handling it with useEffect and localStorage, but it felt like reinventing the wheel. Switching to the next-themes library made things much smoother—it handled persistence and initial theme detection out of the box, which helped clean up my code and improved the user experience.

Another challenge was removing unused authentication logic. I had previously integrated Supabase authentication with login and admin routes, but for this project, they weren’t necessary. It took some care to untangle the old logic and remove those files without breaking the layout or flow of the app. Once I stripped it down, the project felt lighter and more focused.

Lastly, getting the layout pixel-perfect with Tailwind CSS especially for the cards across mobile and desktop views took a good amount of iteration. I constantly compared my implementation with the design screenshots and made small tweaks until everything matched closely.

These challenges pushed me to write cleaner, more intentional code, and gave me more confidence with both frontend styling and managing app structure.

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

I’d really appreciate feedback on dark/light theme implementation using next-themes. I used the ThemeProvider for managing the toggle, and it works, but I’d like to know if I'm using it efficiently or if there are better practices I should consider for scalability and consistency.

Also, I’d love insights on accessibility, especially making sure the UI is friendly for keyboard users and has proper contrast. I focused mostly on matching the design but want to be more intentional about inclusivity.

Finally, any advice on organizing a Next.js + Tailwind project (e.g., component reuse, folder structure, or performance tweaks) would help me level up.