:---

Building a Stylish Expense Tracker with React, SVG Pie Charts, and the Tolgee Platform

Hello, Dev.to community! 👋

I’m excited to share my latest project: a user-friendly Expense Tracker built with React. This app not only helps users manage their expenses but also provides insightful visualizations through dynamic SVG pie charts. Moreover, I utilized the Tolgee Platform for easy localization and internationalization. Let’s dive into the features, design choices, and the challenges I faced while developing it!

🚀 Features

1. Add and Manage Expenses

Users can easily add new expenses by specifying the category, amount, note, and date. The app displays a list of expenses, making it simple to track spending habits.

2. Interactive Pie Chart Visualization

One of the standout features is the interactive pie chart that visualizes the percentage of expenses by category. Each slice represents a different category, providing a clear overview of where money is being spent.

3. Tolgee Platform for Localization

I integrated the Tolgee Platform to allow users to switch between different languages seamlessly. This enhances user experience and accessibility, making the app usable for a broader audience. Here’s a brief overview of how I set it up:

import { useTolgee } from '@tolgee/react';

const App = () => {
  const { t, setLanguage } = useTolgee();

  const changeLanguage = (lang) => {
    setLanguage(lang);
  };

  return (
    <div>
      <h1>{t('expense_tracker')}</h1>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('es')}>Español</button>
      {/* Other components like Expense List and Pie Chart */}
    </div>
  );
};

4. Stylish Design

With a modern UI, the Expense Tracker is designed to be visually appealing and intuitive. I utilized Tailwind CSS for rapid styling and responsive design.

🛠️ Technologies Used

• React: For building the user interface.
• SVG: To create dynamic and responsive pie charts.
• Tailwind CSS: For styling and responsive layouts.
• Lucide Icons: For adding sleek icons to enhance the user experience.
• Tolgee Platform: For easy localization and internationalization.

🎨 Designing the Pie Chart

Creating the pie chart was one of the most exciting parts of the project. I calculated the percentages for each expense category and rendered the chart using SVG paths. Here’s a simplified version of the SVG rendering logic:

const PieChart = () => {
  let cumulativePercentage = 0;

  return (
    <svg width="200" height="200" viewBox="-1 -1 2 2" style={{ transform: 'rotate(-90deg)' }}>
      {Object.entries(categoryPercentages).map(([category, percentage], index) => {
        const [startX, startY] = [Math.cos(2 * Math.PI * cumulativePercentage), Math.sin(2 * Math.PI * cumulativePercentage)];
        cumulativePercentage += percentage / 100;
        const [endX, endY] = [Math.cos(2 * Math.PI * cumulativePercentage), Math.sin(2 * Math.PI * cumulativePercentage)];
        const largeArcFlag = percentage > 50 ? 1 : 0;

        return (
          <path
            key={index}
            d={`M ${startX} ${startY} A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY} L 0 0`}
            fill={`hsl(${index * 50}, 70%, 50%)`}
          />
        );
      })}
    </svg>
  );
};

This code snippet dynamically creates each slice of the pie chart based on the expenses, providing users with a clear view of their spending habits.

🌟 Design Choices

To make the app visually appealing, I opted for a bright color palette that complements the dark mode. The gradient background creates an engaging atmosphere for users while maintaining readability.

🎉 Getting Started

If you're interested in trying out the Expense Tracker, you can find the source code on my GitHub repository. Clone the repo, install the dependencies, and run the app locally!

🤝 Conclusion

Building this Expense Tracker has been a fantastic experience, and I'm thrilled to share it with the community. The integration of the Tolgee Platform for localization makes the app accessible to a wider audience. I hope this post inspires you to create your own projects and explore the possibilities with React and SVG.

Feel free to share your thoughts, questions, or feedback in the comments below! Happy coding! 💻✨