This project is a React.js application bootstrapped with Create React App, utilizing various libraries and tools for a comprehensive development experience. It includes React Bootstrap for UI components, Redux and Redux Toolkit Query for state management, Sass for styling, Chart.js for data visualization, Styled Components for CSS-in-JS styling, and React-to-Print for printing components. Additionally, it employs unit testing with @testing-library/react, @testing-library/jest-dom, and @testing-library/user-event.
- Mobile Responsive: The application is designed to be mobile responsive, ensuring a seamless user experience across devices.
- UI Pixel Perfection and Attention to Details: The UI is crafted with pixel perfection and attention to details, ensuring a visually appealing and user-friendly interface.
- Line Chart (Responsive): The application includes a responsive line chart, leveraging Chart.js for data visualization.
- API Integration: The project integrates with the provided external APIs to fetch and display data dynamically.
- Filter Feature: The filter feature was implemented, allowing users to filter data based on predefined date intervals, date range, transaction type and transaction status. The row of predefined date intervals is horizontally scrollable for easy access.
- Export Feature: An export feature is included, enabling users to export data to pdf for further analysis or sharing.
- Writing Quality Unit Test: The project includes comprehensive unit tests for major components, ensuring the reliability and stability of the application.
The application has been deployed to Vercel, a cloud platform for static sites and Serverless Functions that fits perfectly with React.js projects. Vercel is known for its ease of use, performance, and scalability, making it an excellent choice for deploying modern web applications.
You can access the deployed application at Mainstack Frontend Test
-
Clone the Repository: First, clone the repository to your local machine.
-
Install Dependencies: Navigate to the project directory and run
npm installoryarnto install all the necessary dependencies. -
Start the Development Server: Run
npm startoryarn startto start the development server. The application will be available athttp://localhost:3000.
- React Bootstrap: Utilized for creating responsive and mobile-first projects on the web with Bootstrap.
- Redux and Redux Toolkit Query: For managing the application state and handling data fetching, caching, and updates.
- Sass: A CSS preprocessor that allows for variables, nesting, mixins, and more, making the stylesheets more maintainable and themeable.
- Chart.js: A simple yet flexible JavaScript charting library for designers & developers.
- Styled Components: Allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS.
- React-to-Print: A library that provides a simple way to print React components.
The project uses @testing-library/react for rendering components, @testing-library/jest-dom for custom DOM element matchers, and @testing-library/user-event for simulating user interactions in tests.
To run the tests, use the command npm test or yarn test. This will execute all tests in watch mode, meaning the tests will automatically re-run when changes are detected in the test files or the components being tested.
Contributions are welcome! Please read the contributing guidelines before submitting pull requests.
This project is licensed under the MIT License.