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.
Tech Stack:
- React.js
- TypeScript
- TailwindCSS
- AWS Amplify
- APEXCHARTS.JS
- react-chartjs-2
- React Query
- React Testing Library
Installation:
- Clone the repository.
- Run
npm install
oryarn install
. - Start the development server:
npm start
oryarn start
.
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. -->