dashboard - A sales dashboard

Overview:

Developed for a hackathon challenge, this project aimed to create a dashboard application for businesses to efficiently track sales history and performance. Despite missing the submission deadline due to a late discovery of the competition, the project became a valuable learning experience, expanding my skills in Next.js and Tailwind CSS—both new tools for me at the time.

Technologies Used:

  • React.js: Chosen to deepen my understanding of the framework and its component-based architecture.
  • Tailwind CSS: A new styling tool I explored, which significantly improved my ability to create responsive and clean designs efficiently.

Project Features:

The dashboard is designed to display sales history and track sales performance. While the design is straightforward, implementing the analytics section and recent orders table presented exciting technical challenges that helped me grow as a developer.

Challenges and Solutions:

  • Building the Analytics Section: Creating a bar chart in the analytics section was challenging due to my lack of experience with libraries like Chart.js. Instead of relying on external tools, I used CSS to tackle the problem, improving my problem-solving skills and building confidence in crafting complex visualizations independently.
  • Designing the Sidebar: As my first dashboard project, I faced the challenge of creating a responsive design without a mobile layout from the provided Figma file. I designed a mini sidebar for mobile, replacing the traditional hamburger menu with an original and practical solution.
  • Developing the Recent Orders Section: To refine my skills with HTML tables, I opted to use table elements rather than CSS Grid. This decision introduced its own challenges but ultimately enhanced my understanding of how to structure and display tabular data effectively.

Reflection:

Though the project wasn’t submitted, it was an immensely rewarding experience. Tackling the analytics section, refining the sidebar, and structuring the recent orders table pushed me to grow as a developer. This project not only strengthened my technical abilities but also solidified my confidence in exploring and applying new tools and techniques in web development.