Gig Overview:The Frontend Engineer will implement the user interface for the Community Management Tool, turning the provided UI/UX designs into a functional and performant application. The engineer will ensure the interface is responsive, intuitive, and visually aligned with the provided wireframes.

Expertise Required: Front End Developer

● Frontend Frameworks: Strong experience with Next.js for building modern web

applications.● Styling: Proficiency in Tailwind CSS for efficient and responsive styling.

● TypeScript: Strong typing for scalable and maintainable codebases.

● Data Visualization: Familiarity with integrating libraries for dashboards and admin

interfaces.

Responsibilities:

1. UI Implementation:

○ Develop the frontend using Next.js and T ailwind CSS, ensuring pixel-perfect

alignment with the Figma designs.

○ Implement responsive layouts optimized for desktop and tablet.

2. Component Development:

○ Create reusable and modular components following design patterns like the

Repository Pattern for scalability.

Design pattern: Repository Pattern

You will be added to the github repository when picked for this gig.

Gig Description: The dashboard is the first page that should be seen after login, it should have information

summed up in numbers written in cards.

a. Layout

The layout includes the navbar and sidebar components, which are reusable across the

application. The navbar should feature a logo, page title, a search button, and a notification

icon that triggers a dropdown or modal displaying a list of recent notifications. The sidebar

should support vertical scrolling for overflow and contain navigation links, starting with the

dashboard.

b. Main Content

The main content consists of:

● A welcome text at the top for a personalized greeting.

● A container with four key metric sections. These sections summarize data for

organizations, technicians (active/inactive status), financial activity, and gig statuses

(pending, completed, ongoing). Two sections should use charts, and two should use

summary cards.

● A time graph with tabs to toggle between displaying the number of technicians and

the total financial activity over a time period. Use a charting library like Chart.js orApexCharts for these visualizations.

c. Responsiveness

The layout (navbar, sidebar) and dashboard content (cards, charts, graphs) must adapt

seamlessly to various screen sizes. Utilize T ailwind's responsive utilities to ensure a

consistent user experience on both desktop and mobile devices.

Figma Link: https://www.figma.com/design/7sYKfF6z2WoGE5HHmcfghz/Xoxo-community-tool?node-id=0-1&t=q0vZVrQX45CMsyYJ-1

Additional Notes: Please find attached the brand guidelines.