This is a credit chart DESKTOP web application. It is NOT optimized for mobile view. It grants user access to their dashboard to view charts of business profiles.
App's Figma Design Link: (https://www.figma.com/proto/cNbKhwqOms1d6kx6iUryRQ/Untitled?type=design&node-id=1-120&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A1434)
- React.js
- Typescript for static typing
- Tailwind CSS for styling
- Recharts to integrate charts into the application
- React-icons and Router for navigation
-
Dashboard Page
- Segmentation Analysis component
- Total Population and Active Clients Chart
- Average Age and Transactional Value Analysis
- Average Monthly Balance
- Pillar Distribution
- Customers' Profile component
- Overview of total customers, transactional value, and average monthly balance
- Profile
- Segmentation Analysis component
-
Customer Page
- Customers Details Table
- Bank Profile Comparison Table
- Dashboard
- Customer
Production Link: (https://react-credit-charts.vercel.app/)
Project Github Repo Link: (https://github.com/OmaJuliet/React-Credit-Charts.git)
To get this React-Vite-Typescript application on your local machine, you need to follow these steps
- Node.js (v14.17.6 or later)
- npm (v6.14.15 or later)
- Clone the repository or download the source code from GitHub. To clone it, use this command "git clone https://github.com/OmaJuliet/ React-Credit-Charts.git"
- Open a terminal or command prompt and navigate to the project directory.
- Run
npm installto install the project dependencies.
- Run
npm install react-router-domto install the router library - Run
npm install rechartsto install the recharts library
- Run
npm run devto start the development server. - Open a web browser and go to http://127.0.0.1:5173 to view the application.