Welcome to my Eazipay frontend assessment project! This project was developed using React.js, Chart.js, CSS-JS styles, and Tailwind CSS. The goal was to replicate the designs provided in the Figma files, creating both a landing page and a user dashboard. Please note that while I aimed for full completion, I was able to achieve approximately 70% of the design due to time constraints.

This project demonstrates my skills as a React.js developer and showcases my ability to create responsive web applications using various frontend technologies. It includes:

• Landing Page
• User Dashboard

• React.js: A JavaScript library for building user interfaces.
• Chart.js: A powerful charting library for creating interactive and visually appealing charts.
• CSS-JS Styling: Styling components using inline styles.
• Tailwind CSS: A utility-first CSS framework for designing responsive and modern user interfaces.

Follow these steps to run the project locally:

1. Clone this repository to your local machine.
2. Navigate to the project directory using the command line.
3. Install the project dependencies by running: npm install.
4. Start the development server: npm start.
5. Open your web browser and go to: https://localhost:3000.

Please note that you'll need to have Node.js and npm (Node Package Manager) installed on your machine.

The project is organized as follows:

• src/: Contains the source code of the project.
  • components/: Reusable React components.
  • landingPage folder/: components concerning landing page.
  • userDashboard folder/: components concerning Dashboard
  • styles/: Contains inline styles for components.
  • pages/: Individual pages of the application.
• public/: Contains static assets.

To view the landing page and user dashboard, follow these steps:

1. Choose either the landing page or user dashboard main file from the component/landing page or dashboard directory.
2. import the DBholder in the app.js which is the parent file that contains all other dashboard file .
3. And for the landing page , import HomeFile in App.js.
4. Open the Vscode editor terminal and navigate to eazipay directory and run npm start and view the page at local host 3000 .

While I achieved 70% completion, there are areas for improvement and future enhancements:

• Complete User Form on Landing Page: Finish implementing the user form on the landing page, including validation and error handling. This will improve the user experience and allow for more user engagement.

• Enhance Footer Design: Work on the footer design to make it consistent with the overall theme of the application. Include important links and information for users.

• Implement Context API: Integrate the Context API to manage global state and improve data sharing between components. This will enhance code organization and make the application more maintainable.

• Optimize Performance: Identify and address performance bottlenecks, such as optimizing image loading and reducing unnecessary renders, to ensure a smooth and fast user experience.

• Localization: Implement localization support to make the application accessible to users from different regions by offering content in their preferred languages.

• Unit and Integration Testing: Implement testing strategies using tools like Jest and React Testing Library to ensure the reliability and stability of the application.

• Documentation: Create detailed documentation for the project, including setup instructions, component descriptions, and explanations of key design decisions. This will make it easier for other developers to understand and contribute to the project.

• Security Enhancements: Review and implement best practices for securing the application, including input validation, data sanitization, and protection against common vulnerabilities.

I'd like to thank the Eazipay team for providing this assessment opportunity and allowing me to showcase my skills.

Feel free to reach at [email protected] out if you have any questions or suggestions about this project. Thank you for taking the time to review my work!