DEV Community: anshuman-rai-27

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

anshuman-rai-27 — Thu, 31 Oct 2024 12:06:39 +0000

:---

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! 💻✨

CopilotKit

anshuman-rai-27 — Sat, 26 Oct 2024 18:17:47 +0000

CopilotKit: Simplifying AI Integration

CopilotKit is an open-source framework designed to make adding AI copilots to applications easy and fast. By using CopilotKit, developers can create interactive, AI-driven features to enhance user experience and automate tasks with minimal effort.

What is CopilotKit?

CopilotKit provides developers with a toolkit to seamlessly integrate AI capabilities into their applications. Ideal for building apps that require real-time user interaction and feedback, CopilotKit enables the creation of custom AI chatbots, agents, and dynamic text areas.

Key Features of CopilotKit

Ease of Integration: Implement AI copilots in hours instead of months, making it ideal for projects with tight deadlines.
Custom Components: Offers essential UI components like input fields and action buttons that integrate seamlessly into existing apps.
Real-Time Data Handling: Grounds AI copilots in application-specific, real-time data for more relevant and accurate responses.
Open Source: Encourages community collaboration, contributions, and innovation through its open-source model.

Getting Started with CopilotKit

1. Installation

To get started, install CopilotKit through npm or yarn:

npm install @copilotkit/react-core

2. Setting Up the Component

Wrap your application or specific areas where you want copilot functionality with the <CopilotKit /> component, providing context for all components and hooks within its scope.

import { CopilotKit } from "@copilotkit/react-core";

3. Defining Custom Actions

Define custom actions with CopilotKit hooks, allowing the copilot to process user queries and interact with external APIs.

4. Integrating with APIs

Boost your copilot's capabilities by connecting it with APIs, such as OpenAI, for handling requests and responses based on user interactions.

Example Use Cases

Here are a few practical applications for using CopilotKit in your projects:

AI-Powered Resume Generator: Guide users in generating resumes and cover letters based on their input.
Social Media Post Scheduler: Automate social media posting with platform integrations.
Interactive To-Do List: Build a task manager with AI-driven organization suggestions.

Conclusion

CopilotKit is a powerful tool for developers who want to integrate AI features, offering a streamlined approach to building applications that respond intelligently and adapt to user needs in real time. By using CopilotKit, developers can bring innovative, AI-powered functionalities to their projects with ease.

Building a Recipe Modifier Tool with Next.js, React, and CopilotKit

anshuman-rai-27 — Sat, 26 Oct 2024 17:30:47 +0000

Title: Building a Recipe Modifier Tool with Next.js, React, and CopilotKit

Ever wondered how you could modify a recipe in just a few clicks? This project lets you generate instant recipe modifications based on different categories—whether you want to make it vegetarian, healthier, or simply add a twist. Here’s how it’s built with Next.js, React, and the AI power of CopilotKit!

Project Overview

The Recipe Modifier Tool allows users to:

Enter a recipe and request different modifications.
Choose from options like "Modify Recipe," "Veg," "Non-Veg," or "Healthy Diet."
View generated suggestions in a styled markdown format.

Tech Stack

Next.js for server-side handling and API routes.
React for building a dynamic UI.
CopilotKit for integrating AI-driven actions.
React Markdown to render suggestions in markdown format.

Code Breakdown

RecipeModifier Component

The RecipeModifier component uses useCopilotReadable to make the recipe readable by CopilotKit and useCopilotAction to trigger the modification process. When a user enters a recipe and selects a modifier, the app fetches an AI-generated response via the /api/getSuggestions endpoint.

API Route (pages/api/getSuggestions.ts)

The API route accepts the recipe and modifierType, sends a prompt to CopilotKit’s AI, and returns a suggestion based on the selected modification type.

Key Takeaways

CopilotKit Integration makes it easy to add AI-driven actions to your app.
React Markdown enables real-time formatted output, enhancing readability.
Next.js API Routes are a great way to handle AI requests within your frontend.

Feel free to experiment with additional modifiers or try different models in CopilotKit. Let me know in the comments if you try it out or have suggestions!