Gig Overview: You are provided with a figma link to a  platform for Admins to manage member access. This gig requires a Frontend Engineer to implement the user interface for this tool, turning the provided UI/UX designs into a functional and performant application. The engineer will ensure the interface is responsive, intuitive, and visually appealing, ensuring the conversion aligns with the provided wireframes and brand guidelines.

Expertise Required:

• 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 Tailwind CSS, ensuring pixel-perfect

alignment with the Figma designs.

○ Implement responsive layouts optimized for desktop and tablet.

1. 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, follow the exact design on figma and give a react-based conversion.

1. Layout

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

application. The navbar should feature a page title, and a notification icon. The sidebar

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

dashboard. Note: please refer to the file structure diagram below before you begin.

1. Main Content

The main content should carry designs as seen on the figma design.You are responsible for

designing the dashboard page and its table and the add user page (the three horizontal

pages on the figma, where the first is the board). Note that forms work with react-hook-form.

1. 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.

Expectations: As a Techo chosen to participate in this gig, we have some expectations.

-Timely Completion: complete each gig within the given timeframe. If the gig has not been completed within this frame, the project will be re-assigned.

-Communication: Stay in touch with the Community Manager for guidance, support and feedback throughout the project. This can be done through the chat box in the My Gigs section underneath the gig description.

-Work-Ethic Alignment: Make a concerted effort to comply with our standards.

Figma: https://www.figma.com/design/CYnMGtq27JddhqTjrdiOW7/CE-Management?node-id=64-1905&t=DORXkvaeUdgJzm7s-1

Additional Notes: Brand guidelines sent to Techo when selected for this gig. Please make sure to adhere closely to this.