CrediPyme Fintech App - Frontend

Description

CrediPyme FinTech WebApp is a web application that simulates a banking platform for managing credit applications for Small and Medium-sized Enterprises (Pymes). It allows Pyme users to apply for credit, check the status of their applications, and manage their accounts, while bank operators can review, approve or reject applications, and access reports and metrics with visual indicators.

The application aims to apply the real workflow of a corporate credit system within a controlled test environment.

Essential Features

• User Authentication: Secure registration and login for both Pyme users and internal operators.
• Pyme Dashboard: Overview of credit requests, status tracking, and access to relevant financial information.
• Credit Request Flow: Multi-step form for Pymes to submit detailed credit applications, including document uploads and terms acceptance.
• Operator Dashboard: Tools for internal operators to review, approve, or reject credit requests, manage users, and monitor key performance indicators (KPIs).
• Document Management: Secure handling and storage of documents required for credit evaluation.
• AML Checks: Integration with Anti-Money Laundering (AML) services to ensure compliance.
• Responsive Design: Optimized user experience across various devices and screen sizes.

Technologies Used

• Frontend:
  • React.js: A JavaScript library for building user interfaces.
  • TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
  • Vite: A fast build tool that provides an optimized development experience.
  • Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
  • React Router DOM: Declarative routing for React.
  • Zustand: A small, fast, and scalable bearbone state-management solution.
  • React Hook Form: For flexible and extensible forms with easy-to-use validation.
  • Zod: A TypeScript-first schema declaration and validation library.
  • Axios: Promise-based HTTP client for the browser and Node.js.
• Tooling:
  • ESLint: Pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript code.
  • Prettier: An opinionated code formatter.

Conventions

• File Naming: PascalCase for components (Button.tsx, Card.tsx).
• Relative Paths: Use @/ for src/.
• Component Folders:
  • ui/ for global reusable components.
  • Page-specific components go into the page's folder (landing/, dashboard/components/).
• Features: Each module has its own folder with pages/, components/, hooks/, services/, and types.ts.
• Global Hooks: Go in src/hooks/ (e.g., useAuth).
• Global Constants: In src/constants/ (e.g., user roles).

Scripts

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Production preview
npm run preview

Development Workflow

1. Branches:
   • dev → general development, base for new features.
   • main → production. Deploy on Vercel.
   • Each feature should have its own branch starting from dev.
2. Merge to dev:
   • Review code, resolve conflicts, ensure architectural consistency.
3. Deploy to production:
   • Only from main.
   • dev remains the default branch.