Financial Dashboard

A modern financial dashboard application built with Next.js, React, Tailwind CSS, and other powerful tools. This project includes features such as data visualization, forms with validation, and customizable UI components.

Table of Contents

• Features
• Tech Stack
• Installation
• Usage
• Scripts
• License

Features

• Interactive UI: Built with Radix UI components and Tailwind CSS for responsiveness and customization.
• Data Visualization: Integrated with recharts for creating dynamic charts and graphs.
• Form Handling: Robust form management using react-hook-form and zod for schema validation.
• Custom Animations: Smooth animations powered by tailwindcss-animate.
• Reusable Components: Modular and reusable components for scalability.

Tech Stack

• Framework: Next.js 15
• Frontend: React 19
• Styling: Tailwind CSS
• Data Visualization: Recharts
• Form Handling: React Hook Form + Zod
• Icons: Lucide React
• Utilities:
  • clsx for conditional class names
  • tailwind-merge for class merging
  • class-variance-authority for component variations

Installation

Prerequisites

Ensure you have the following installed:

• Node.js >= 18.x
• npm >= 8.x or Yarn >= 1.x

Steps

1. Clone the repository:

   git clone https://github.com/razor-eng/financial-dashboard.git
   cd financial-dashboard
   

2. Install dependencies:

   npm install
   # or
   yarn install
   

Usage

Development

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser to see the app.

Production

Build the app for production:

npm run build
# or
yarn build

Start the production server:

npm start
# or
yarn start

Scripts

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.

Acknowledgments

• Radix UI
• Tailwind CSS
• Recharts

Contact

For questions or support, please reach out to [email protected].