Lendsqr is a platform that provides lending-as-a-service to companies to simplify the lending process with an easy, but sophisticated technology that can guarantee an awesome lending experience.
This repository contains all the client side code that runs on a browser. The live application can be found at Lendsqr
This project is built primarily with React JS/Typescript.
CSS Library - SCSS
Build Tool - Vercel
HTTP client - Axios
Testing Library - Jest, React Testing Library.
On clicking on the application link Lendsqr, the user is redirected to the login page. After successful login, the user is taken to the users page.
- Login
There is a mock API implementation simulating an authentication being done on the user trying to login. You can simulate this using any email and password, after which you would be redirected to the users page and your login credentials stored in the local storage of your browser to persist state upon refresh. - Navbar
The navbar at the top contains a searchbar component and user's information. After login, the user's email address will be displayed at the top.
At tablet and mobile views, the navbar collapses and a hamburger menu shows up which displays a drawer upon click. - Logout
Users can logout from the application at any time. The stored credentials would be deleted from the local storage and the users would be redirected to the login page. - Users Page
This page contains a table displaying users' information fetched from the database using axios. The table is responsive and includes an options modal where you can find an option to view a particular user's complete information on a "User Details" page.
It is well paginated and includes a filter option which can be triggered by clicking on the filter icon on any of the table's header cells. - Filter Sidebar
Clicking on any filter icon will open up the filter sidebar which is fully functional and would traverse through the data with inputed fields to find a match. It displays the results if found and none if no results. It can be closed by clicking outside the sidebar. - User Details
The user details page receives the id of the selected user form the users' page and fetches the user's information using that specific id. It displays the information in a responsive layout with an option to go back to the users' page with the exact page number. - Sidebar
The sidebar is a fully responsive component that allows for navigating the various pages of the application. All the navlinks have been tested and display the right pages. In a case where the page is not available, there is a "Not available" placeholder.
All components in the src folder have been tested using React Testing Library and jest covering positive and negative scenarios. These tests can be found in the tests folder in each components folder.
The commit messages use the following naming convention:
- feat- {name of feature} OR
- fix- {name of fix}