Project Title: Designing the Frontend of a Fintech App

Welcome to the frontend repository for the fintech app project! This project focuses on developing a user-friendly and visually appealing frontend interface using React. The goal is to provide a seamless experience for users, implementing various features and principles to enhance usability and functionality.

This project was bootstrapped with Create React App.

Principles Applied in the Project

Implementation of Multiple Route Components:

The application utilizes multiple route components to render two sections: the User section and the Admin section. This allows for efficient navigation and management of different user roles and functionalities.

Design of Single Page UI with Menu Sidebar and Dashboard:

The project employs a single page UI approach, incorporating a menu sidebar and dashboard. This layout provides a clear and organized structure for users to access various features and information easily.

Implementation of Protected Routes with User Authentication:

To ensure secure access, the project incorporates a user registration and login authentication system. Protected routes are established, allowing only authenticated users to access certain sections or perform specific actions. Axios, a popular HTTP client library, is used for handling API requests and managing user authentication.

Development Structure Based on Prototype Design:

The application's structure is developed in alignment with the prototype design of the fintech product. This ensures consistency and maintains the intended user experience throughout the application.

Attention to Styling and User Experience Design:

Great emphasis is placed on providing the best possible styling to accurately represent the intended user experience design. The user interface is crafted with precision, focusing on aesthetics, usability, and intuitive interactions.

Interactivity Using ReactJS:

ReactJS is leveraged to enhance interactivity within the web application. Various components such as accordions, pagination, and other interactive elements are implemented to improve user engagement and navigation.

DESCRIPTION

The site was built through a collaborative work of front end and back end. Api was provided from the backend for the purpose of the project

Preview

You can get A PREVIEW of the site by following the link below https://ethiope-fintech.vercel.app/login

email is black@gmail.com password is bbbb

Getting Started

To run the project locally, follow these steps:

Clone the repository to your local machine. Install the necessary dependencies using a package manager like npm or yarn. Start the development server. Open your web browser and navigate to the provided local server address.

Project Structure

The project's codebase is structured as follows:

• src
  • components: Contains reusable React components used throughout the application.
  • pages: Includes the main page components for different sections (User and Admin).
  • routes: Defines the route configuration and protected routes.
  • services: Handles API requests, including user authentication using Axios.
  • styles: Contains styling files, including CSS or styled-component files.
  • App.js: The main entry point of the React application.
  • index.js: Renders the React application into the DOM.
  • ...

Feel free to explore the codebase to gain a deeper understanding of the project's implementation.