Provider Profile

[JosueBrenes]

Provider Profile Implementation

Overview

Create a comprehensive Provider Profile page that displays provider information, services, reviews, and certifications following the provided Figma design.

Main Components

1. Header Section
2. Performance Stats
3. Services Table
4. Reviews Section
5. Certifications Grid

Detailed Requirements

Header Section

• Provider logo/avatar
• Provider name with verification badge
• Category and rating display
• Contact information (email, website)
• License number
• "Contact Provider" button
• Navigation tabs (Services, Reviews, Certifications)

Performance Stats Card

• Completed Projects counter (234)
• Success Rate percentage (98%)
• Response Time display (2h avg)
• Active Disputes counter (0)
• Implement stats animations

Services Table

• Create responsive table layout
• Columns: Service, Description, Price Range, Availability
• Available/Unavailable status badges
• Implement sorting functionality
• Add hover states
• Mobile-friendly view

Reviews Section

• Review cards with:
  • User avatar/initial
  • Username
  • Date
  • Rating stars
  • Review text
• Implement pagination
• Add rating filter

Certifications Grid

• Create certification cards
• Display certification icons
• Show issue dates
• Add hover effects
• Responsive grid layout

Technical Specifications

• Use shadcn/ui components:
  • Card
  • Tabs
  • Table
  • Badge
  • Avatar
  • Button
• Implement responsive design
• Add loading states
• Error handling
• Dark mode support

Styling Requirements

• Follow Figma design spacing
• Use consistent typography
• Implement hover states
• Ensure responsive breakpoints
• Maintain accessibility standards

Resources

• Figma design file
• shadcn/ui documentation
• Project repository

Definition of Done

• All sections implemented according to design
• Responsive on all devices
• Dark mode implemented
• Animations working
• All interactive elements functional
• Code reviewed
• Tests written and passing
• Accessibility requirements met
• Performance optimized
• Documentation updated

Notes

• Use mock data for initial development
• Ensure all links are working
• Implement proper error states
• Add loading skeletons
• Ensure proper tab focus states

.

Make sure to follow the Git Guidelines for Atomic Commits and read Contributing Guide

The Pull request needs to have the format mentioned below in the Git Guideline

• Contributing Guide
• Git Guidelines

[pragmaticAweds]

I’m interested in this one.

[Supa-mega]

Can I handle this task?

[Kingsuite]

May I handle this issue?

[ekumamatthew]

Can I take this from here?

[zintarh]

I'd be happy to do this.

[kimcascante]

Hello! I'm Kim Cascante, a member of Dojo Coding! ⛩️
I’m passionate about design and frontend development, with experience in React, Typescript, Java, SQL, Javascript, and small scripts for automation. I’m also diving into Web3, blockchain, and exploring the world of open-source contributions.
For this project, my approach will be:
1️⃣ Start by reviewing the current code and figma design
2️⃣ Implement new Provider Profile page to make consistent with figma
3️⃣ Test the changes to follow the design specifications
4️⃣ Prepare a well-documented PR for review.
Excited to apply what I know and learn from this experience to grow as a developer. Let’s build something amazing together! 💻✨

[Wendyalbert]

I'd be happy to do this.

[Benjtalkshow]

I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, Cairo and Rust . With over 50 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contracts, and the optimization and maintenance of scalable codebases.
I can handle this task. Kindly assign.

[Michaelkingsdev]

Could I take a shot at this?

[therealemino]

Hi, I've over 4 years professional experience working on frontend applications (React, Vue, Next, Nuxt, TS). I've gone through the repository and Figma design. I would love to contribute to this project and I believe this is an excellent issue for me to take on. My draft PR should be ready within 24 hrs.
Can handle this task?

[Pvsaint]

Can I try solving this issue?
I'm Victor Peter, I’ll like to contribute to this project, I’m a frontend and smart contract developer proficient in type script, react.js, next.js, solidity and cairo languages respectively.
I'm a first time contributor on this project
ETA 48hrs.

[evgongora]

Hello!

My name is Erick, and I'm a Full Stack Web Developer with expertise in React, Next.js, TypeScript, JavaScript, and Tailwind CSS. I’ve maintained multiple open-source projects like CofiBlocks, SocialSphere and Semaphore-Stellar ensuring high code quality and active community engagement.

I am a proud member of Dojo Coding, and you can find my work and contributions via:

GitHub Profile
OnlyDust Profile

How I would tackle this:


Initial Setup & Data Flow

• Review the Figma design and existing project repository.
• Prepare shadcn/ui components (Card, Tabs, Table, Badge, Avatar, Button) for seamless integration.
• Utilize mock data for development, ensuring easy transition to live data later.

UI Sections & Structure

• Header Section: Implement provider avatar, name/verification, contact info, license number, and a “Contact Provider” button. Include tabs for navigating Services, Reviews, and Certifications.
• Performance Stats Card: Display counters (Completed Projects, Success Rate, Response Time, Disputes) with animations.
• Services Table: Responsive table with sorting, status badges (Available/Unavailable), and hover states.
• Reviews Section: Paginated review cards (avatar, rating, text). Include rating filters and star-based visuals.
• Certifications Grid: Card layout for icons, issue dates, and hover effects.

Responsive Design & Dark Mode

• Ensure all sections adapt to mobile, tablet, and desktop screens.
• Integrate dark mode toggling, adhering to the design’s color palette.

Interactions & Accessibility

• Implement hover states, focus states, and ARIA labels for screen readers.
• Provide loading states and error handling for data retrieval or network issues.

Testing & Finalization

• Write unit tests for critical components and ensure no console errors.
• Validate that all interactive elements (buttons, tabs, sorting, filters) function properly.
• Adhere to Git Guidelines for atomic commits and the specified Pull Request format.
• Confirm that the Definition of Done is met (responsive, animations, accessibility, performance metrics).

I look forward to collaborating on this issue and contributing to the project’s success. Please feel free to reach out if you have any questions or need additional details regarding my approach.

Thank you for your consideration!

[Jagadeeshftw]

Proposal to Work on the Issue

I am eager to contribute to this issue and believe I am well-suited for the task, given my extensive experience in Cairo programming and building decentralized applications on StarkNet. My expertise spans across multiple domains crucial for this implementation:

• Smart Contracts & Blockchain Development: Proven expertise in StarkNet, Stellar, and Rust, with hands-on experience in developing secure and efficient smart contracts, blockchain integrations, and high-performance backend systems.
• Backend Engineering: Strong background in designing and managing scalable APIs, handling server-side operations, and ensuring robust backend performance for blockchain applications.
• Frontend Development: Proficient in building intuitive and responsive frontend interfaces using React and Next.js, ensuring seamless interaction between users and blockchain-based applications.

Why Assign This to Me?

I have a track record of delivering high-quality solutions efficiently, with a deep understanding of smart contract security, decentralized architectures, and full-stack development. My ability to bridge frontend, backend, and blockchain components ensures a well-rounded, optimized solution.

Estimated Timeline

I anticipate delivering a fully functional solution within 3 days. Please let me know if I can proceed.

I am excited about the opportunity to contribute and look forward to collaborating!

Best regards,
Jagadeesh B

[CoderPrime99]

Hello there! My name is Carlos Correa, better known as CoderPrime99, I am a student of Software Engineering at UNED, Costa Rica, with over two years of experience, focusing on Fullstack development with JavaScript and learning about WEB3 technologies at Dojo Coding.

My approach to this issue would be:

1. Understand the Design and Requirements
   Review Figma Design: Analyze the layout, spacing, typography, and interactive elements.
   Break Down the Components: Identify the functionality and design of each section (header, performance stats, services table, reviews, and certifications).
   Refer to Resources: Familiarize yourself with the shadcn/ui component library and ensure alignment with project guidelines.

2. Plan the Component Architecture
   Reusable Components: Identify shared elements like buttons, badges, and cards to create reusable components.
   Section Layout: Define each section (e.g., Header, Stats, Table) as a modular, testable component.
   State Management: Plan for dynamic states like loading, error handling, and user interactions.

3. Implement Incrementally
   a. Header Section
   Display provider avatar, name, and badge.
   Add navigation tabs and a "Contact Provider" button.
   b. Performance Stats
   Create a stats card with animated counters and ensure responsiveness.
   c. Services Table
   Implement a responsive table with sorting, hover effects, and availability badges.
   Add mobile-friendly views for smaller screens.
   d. Reviews Section
   Design review cards with user details and review text.
   Include pagination and a filter system for ratings.
   e. Certifications Grid
   Build a responsive grid layout for certification cards with hover effects and metadata.

4. Focus on Styling and Responsiveness
   Use Figma spacing and typography for consistent design.
   Implement hover states and responsive breakpoints.
   Ensure compatibility with dark mode.

5. Test Interactivity and Accessibility
   Validate all interactive elements (e.g., tabs, filters).
   Ensure keyboard navigation and proper tab focus states.
   Run accessibility checks to meet WCAG standards.

6. Optimize and Finalize
   Add mock data for testing all functionalities.
   Implement skeleton loaders for loading states.
   Optimize performance by lazy-loading components where needed.

7. Documentation and Review
   Update project documentation with component usage and implementation details.
   Follow Git Guidelines for atomic commits.
   Ensure the pull request is formatted according to the Contributing Guide.

[chiscookeke11]

Is it okay if I take this?

[josephpdf]

Hello @JosueBrenes
My name is Joseph Poveda, I am a member of the Dojo Coding community, where I am learning to contribute to open source. I have already made several contributions to different projects in different ecosystems, where I have been able to apply my knowledge in programming from front end, back end and documentation.

To solve this issue I would investigate and follow these steps to solve it:

1. Understand the Requirements

• Analyze the Figma design and listed sections: Header, Performance Stats, Services Table, Reviews, and Certifications Grid.
• Identify reusable components from shadcn/ui.

2. Component Implementation

• Header Section: Add provider details with tabs for navigation.
• Performance Stats: Use Card with animated counters for statistics.
• Services Table: Create sortable, responsive tables with hover states.
• Reviews Section: Implement review cards with pagination and filters.
• Certifications Grid: Build a responsive grid with hover effects.

3. Technical Implementation

• Ensure responsiveness, dark mode, and error handling.
• Integrate loading skeletons for smooth UX.
• Mock data for initial setup.

4. Validation

• Test for performance, accessibility, and functionality.
• Conduct code reviews and write tests.

5. Documentation

• Update README with implementation details.

6. Submission

• Follow Git Guidelines for atomic commits and PR formatting.

[1nonlypiece]

Application for Contribution

I am excited about the opportunity to contribute to this issue and am confident that my expertise aligns well with the requirements. With a strong background in Cairo programming and decentralized application development on StarkNet, I bring a well-rounded skill set to deliver an effective solution.

ETA

I expect to have a working solution ready within 48 hours. Please let me know if I can proceed with the implementation.

[jahrulezfrancis]

I’d love to make this my first contribution on SafeTrust and I am keen to work on the Provider Profile page. Here’s how I’ll approach it:

Header: I’ll build the header with the provider’s logo, contact info, and navigation tabs, ensuring it’s responsive.

Performance Stats: Implement stats like projects completed, success rate, and response time, with smooth animations.
Services Table: A responsive, sortable table for services with price ranges and availability badges.

Reviews: Review cards with user avatars, ratings, and pagination, plus a rating filter.

Certifications: A responsive grid of certification cards with icons, dates, and hover effects.

I’ll use shadcn/ui components throughout and focus on responsiveness, accessibility, and dark mode support. I’ll ensure smooth UX with loading states and error handling.

My ETA is 24 to 48 hours tops

[ShantelPeters]

Can I attempt this issue?

[0xdevcollins]

Can I contribute to this one?
I am a Full Stack Blockchain Developer with proficiency in Solidity/Rust, Next.js, TypeScript, React, and Node.js. I've demonstrated my ability to adjust to a variety of requirements, perform well under pressure, and reliably produce user-centric blockchain solutions with 66 significant contributions spread over 20 OnlyDust projects.

[mimisavage]

Can I take this from here?

[miguelaragonh]

👤 Personal Information

My name is Miguel Aragón Duarte, a web developer passionate about technology and creating efficient solutions. I have experience in designing, developing, and deploying web platforms, focusing on improving user experience and optimizing administrative processes.

🧢 About Me

I am an enthusiast of collaborative development, seeking to contribute to projects that positively impact the tech ecosystem. My focus is on building robust and scalable solutions, leveraging technologies such as React, Laravel, and Drupal. My portfolio is available on my personal website, and my work can be found on GitHub here.

✉️ Application for the Provider Profile Implementation

Dear Hiring Team,

I am excited to apply for the opportunity to implement the Provider Profile as described in the issue details. With my strong background in web development and a keen eye for creating responsive, user-friendly interfaces, I am confident I can deliver a robust solution that aligns with your expectations.

My Approach

1. Understanding the Requirements: I will carefully analyze the provided Figma design to ensure every detail is accurately translated into a functional and visually appealing interface.

2. Development Plan:

   • Header Section: Implement components such as Avatar, Verified Badge, and Contact Button using shadcn/ui.
   • Performance Statistics: Create animated counters and real-time visualizations for metrics like completed projects and success rates.
   • Services Table: Develop a responsive table with sorting, hover states, and status badges for availability.
   • Reviews Section: Design review cards with filters, pagination, and star ratings for a seamless user experience.

3. Technical Execution:

   • Utilize shadcn/ui components to ensure consistency and reusability.
   • Follow responsive design principles to guarantee compatibility across devices.

Why Choose Me?

• Experience: Proficient in React, Laravel, JavaScript, and Drupal, with a portfolio showcasing projects that involve complex UI/UX requirements.
• Attention to Detail: I pride myself on delivering pixel-perfect implementations that match design specifications.
• Collaborative Mindset: Open to feedback and dedicated to ensuring the final product exceeds expectations.

I look forward to the possibility of contributing to your project and am available to discuss further details or answer any questions.

Thank you for considering my application.

Best regards,
Miguel Aragón Duarte

[Elite-tch]

Can I take care of this issue?