This is a frontend implementation of the Personal Finance App challenge from Frontend Mentor. The project focuses on transforming a provided Figma design into a pixel-perfect, interactive web application.
Key aspects:
- Implementing the design system (colors, typography, spacing)
- Responsive layout across all devices
- Interactive UI components including charts and data grids
- Modern frontend development practices
This project is part of my 2025 goal to maintain and enhance my frontend development skills, pushing my boundaries in modern web development practices.
This challenge showcases my frontend expertise through pixel-perfect design implementation, responsive layouts, modern CSS techniques, and state-of-the-art component architecture. By leveraging my choice of frontend frameworks and tools, I aim to demonstrate clean code practices, accessibility standards, and optimal performance optimization techniques that are essential in today's web development landscape.
To run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/jshsmth/personal_finance.git
cd personal_finance- Install dependencies:
npm install- Start the development server:
npm run devThe application will start running at http://localhost:5173 (or another port if 5173 is already in use). Open your browser and navigate to this URL to view the application.