• Code Complete Logo
  • ChallengesPro

    logoCode Complete

    Explore

    Challenges
    Pro
    FAQ

    About

    Privacy Policy
    Terms

    Community

    Youtube
    Discord

    Contact us at [email protected]

    Copyright Ā© 2025 CODE COMPLETE PTY LTD

    Thumbnail for Expense Tracker App design
    Pro

    3 - Advanced

    Expense Tracker App

    Expense tracker dashboard with area and pie charts

    Download DesignSubmit Solution
    šŸ“ Overview
    Build a dynamic and visually engaging Expense Tracker App to help users monitor their financial health. This single-page intermediate-level challenge includes: • A dashboard with expense history and monthly analytics. • Visualizations using charts (area and pie) with hover tooltips. • Functional components like modals and dropdowns for adding expenses. Practice layout design, chart integration, and interactivity using JavaScript or React. šŸ“ŠšŸ’° (Charts are based on shadcn charts)
    šŸŽ“ Learnings
    • šŸ“Š Using and rendering charts (area chart, pie chart)
    • šŸ”„ Managing state for dynamic data updates
    • šŸ—ļø Creating grid or flex-based layouts
    • šŸ’° Handling numeric/financial data
    • šŸ’” Building interactive UI with tooltips and modals
    • šŸŽØ Styling visually appealing UI with CSS or Tailwind
    • šŸ—‚ļø Structuring layouts and organizing components
    āœ… Project Checklist

      The navbar displays the logo, dashboard text, and a user dropdown with the user's full name on the top right.

      The first row contains welcome text and an 'Add New Expense' button.

      The second row contains three cards with an icon, a title, an amount, an increase or decrease icon, and a subtitle.

      The third row contains a title and area chart.

      The fourth row contains a card with title, pie chart and legend

      The fourth row contains a card with title and scrollable table

      Hovering over the area chart shows a tooltip displaying the month and amount at the cursor.

      Hovering over the pie chart shows a tooltip displaying the category and percentage at the cursor.

      Clicking the user dropdown opens a dropdown with links to settings, support, and a 'Log Out' button.

      Clicking the 'Add New Expense' button opens the 'Add New Expense' modal with the background blurred.

      The 'Add New Expense' modal contains a title, a subtitle, an amount input field, a category text field, and two buttons: 'Cancel' and 'Add Expense'.

      Clicking 'Cancel' in the modal closes it without adding an expense.

      Clicking 'Add Expense' in the modal closes the modal and adds a new row to the 'Expense History' table in the dashboard.

      Adding an expense updates all values and charts in the dashboard.

    šŸŽ“ Learnings
    • šŸ“Š Using and rendering charts (area chart, pie chart)
    • šŸ”„ Managing state for dynamic data updates
    • šŸ—ļø Creating grid or flex-based layouts
    • šŸ’° Handling numeric/financial data
    • šŸ’” Building interactive UI with tooltips and modals
    • šŸŽØ Styling visually appealing UI with CSS or Tailwind
    • šŸ—‚ļø Structuring layouts and organizing components
    🌟 Bonus Features

      Add a dark mode toggle.

      Implement mobile views for the dashboard and modals.

      Enable chart filtering by date range using dropdowns or sliders.

      Add validation and error messages to the Add Expense form.

      Implement export functionality to download the expense history table as a CSV file.

      Allow users to edit or delete entries directly from the 'Expense History' table.

      Add a sign up/login page using OAuth.

    šŸ› ļø Instructions
    1. Click on the 'Download Design' button to get the .fig file.
    2. Upload the .fig file to your Figma account using these steps. You can now open the design and see what you have to make.
    3. Export assets from Figma by pressing Ctrl+Shift+E (or Cmd+Shift+E on Mac) while nothing is selected and then clicking the 'Export' button that shows up.
    4. Implement the design using your preferred language or framework (aim for pixel-perfect accuracy).
    5. Deploy your solution for free using GitHub Pages, Netlify, or Vercel.
    6. Submit your solution link here and try to get a perfect score!
    šŸ”Ž Check out the FAQ page for any questions regarding challenges and solutions.
    šŸ‘‹ Sign up to submit your solution!