Soar.inc Fintech Dashboard 🚀

Welcome to the Soar.inc Fintech Dashboard project! This application is built as part of a Front-End Developer Assessment Task, showcasing a comprehensive financial dashboard with multiple interactive views. Dive into a seamless user experience designed to display financial activities, card details, transactions, statistics, and user settings with a sleek and responsive design.

Live Demo 🌐

The application is deployed on Vercel for seamless hosting and continuous deployment. Access the live demo here.

Table of Contents

• Live Demo
• Features
  • Dashboard Page (Overview)
  • Settings Page
  • Additional Functionalities
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Running the Application
• Project Structure
• Linting & Formatting
• Contributing
• License
• Contact

Features ✨

Dashboard Page (Overview)

• My Cards Section
  • Displays multiple card details including balance, cardholder name, and partially masked card number.
  • "See All" button to navigate to the full list of cards.
• Recent Transactions
  • Lists recent transactions with icons, descriptions, dates, and amounts (green & red).
• Weekly Activity Chart
  • Interactive bar chart showing daily deposits and withdrawals for the week.
• Expense Statistics
  • Pie chart breaking down expenses by categories such as Entertainment, Bills, Investments, and Others.
• Quick Transfer
  • Frequent transfer contacts with profile pictures, names, and roles.
  • Input field for transfer amount and a "Send" button (UI Only).
• Balance History Chart
  • Line chart representing balance trends over the past few months.

Settings Page

• Tabs
  • "Edit Profile," "Preference," and "Security" tabs for organized navigation.
• Edit Profile Section
  • Edit fields: Name, Username, Email, Password, Date of Birth, Addresses, City, Postal Code, and Country.
  • Profile picture upload/edit feature.
  • "Save" button to apply changes.

Additional Functionalities

• Responsive Design: Adapts seamlessly across mobile, tablet, and desktop devices.
• Interactive Elements: Buttons with hover effects and feedback, scrollable lists for cards and transactions.
• Form Validations: Ensures proper input formats for email, password, and other fields.
• Smooth User Experience: Transitions between sections and consistent use of icons.

Tech Stack 🛠️

• Frameworks & Libraries

  • React.js - Front-end library
  • TypeScript - Type safety
  • Vite - Build tool
  • TailwindCSS - Utility-first CSS framework
  • Apache ECharts - Data visualization
  • React Router - Routing
  • Zustand - State management
  • Framer Motion - Animations

• Tools

  • ESLint - Linting
  • Prettier - Code formatting
  • Git - Version control
  • Vercel - Deployment

Getting Started 🚀

Prerequisites

• Node.js (v14 or later)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/Sociopacific/fintech-dashboard.git
   cd fintech-dashboard

2. Install dependencies

   npm install
   # or
   yarn install

Running the Application

• Development Mode

  npm run dev
  # or
  yarn dev

  Open http://localhost:4000 to view it in the browser. The page will reload if you make edits.

• Build for Production

  npm run build
  # or
  yarn build

  The build artifacts will be stored in the dist/ directory.

• Preview the Production Build

  npm run preview
  # or
  yarn preview

Project Structure 📂

soar-task/
├── src/
│   ├── components/
│   ├── pages/
│   ├── assets/
│   ├── hooks/
│   ├── store/
│   ├── App.tsx
│   └── main.tsx
├── public/
├── styles/
├── tests/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

Linting & Formatting 🧹

• Lint the codebase

  npm run lint
  # or
  yarn lint

• ESLint Configuration

  • Uses @vitejs/plugin-react-swc for Fast Refresh.
  • Type-aware lint rules for enhanced code quality.
  • React plugin for consistent React code standards.

Contributing 🤝

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a new branch

   git checkout -b feature/YourFeature

3. Commit your changes

   git commit -m "Add your feature"

4. Push to the branch

   git push origin feature/YourFeature

5. Open a Pull Request

License 📄

This project is licensed under the MIT License.

Contact 📬

Aleksandr Iakimov
Email: iakimov.aleks@gmail.com
LinkedIn: Aleksandr Iakimov
GitHub: @sociopacific

---

Made with ❤️ by Aleksandr