Bizpoke Senior Frontend Challenge Submission (Femi Akinyemi, akinfemi46@gmail.com )

This README provides an overview of the solution I created for the Bizpoke Senior Frontend Challenge using React.js, TypeScript, and TailwindCSS.

Overview:

I successfully completed the Senior Frontend Challenge within the designated time frame. The solution includes building a user interface with React.js and TypeScript, utilizing TailwindCSS for styling, integrating charts for visual representation of business metrics, and managing data fetching with React Query.

Responsive Check

Tech Stack:

Installation:

  1. Clone the repository.
  2. Run npm install or yarn install.
  3. Start the development server: npm start or yarn start.

Setting Up the Environment

To run the application, create a file named .env in the project root directory. This file should contain the following line:

REACT_APP_BASE_URL='https://frontend-challenge-api-xpjf.onrender.com'

Usage:

Users can interact with the application to view various business metrics and performance data. Navigate through different sections to explore deals, revenue, top revenue channels, and campaign performance.

Testing:

The application includes unit tests written with React Testing Library to ensure component functionality and behavior.

Deployment:

The deployed application can be accessed main.d3kgwriefi0feh.amplifyapp.com/

Code Quality:

Efforts were made to maintain code quality by adhering to best practices in terms of code structure, readability, and maintainability. Components are well-organized, and TypeScript typings are utilized for type safety.

Design Resemblance:

The implementation closely resembles the provided mockup design. I utilized TailwindCSS for styling to achieve a similar visual appearance while ensuring responsiveness and accessibility.

Additional Notes:

  • The application fetches data from the provided APIs to dynamically populate the UI with real-time information.
  • Error handling and loading states are implemented to enhance user experience.

Link to Github Repository:

Private Github repository link

Social Contacts:

Feel free to reach out with any questions via the following social channels:

Thank you. -->