search

nexlabsweb3 / scanguard

https://scanguard.vercel.app
4 stars 29 forks source link

Implement Product Overview screen #2

Closed zintarh closed 3 weeks ago

zintarh commented 1 month ago

This issues is part of ODHACK 9.0, apply via the platform

Thank you for showing interest! Please implement the Product Overview screen, ensuring it matches the provided design. This is a conversion task, so the screen must be replicated exactly with attention to detail. It should be responsive and fully aligned with the design.

Please ensure to provide an ETA.

https://www.figma.com/design/dwXPww5jcUl55azC9EQ8H0/SCANGUARD?node-id=14-12&t=CY2laF37qFH954NR-1

Looking forward to seeing your great work!

MullerTheScientist commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a full-stack developer with experience in QA testing and languages like Python, Cairo, Solidity, React, and JavaScript.

How I plan on tackling this issue

i will Create a user-friendly and visually appealing design using the provided figma desing

josephchimebuka commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Joseph I am a frontend developer and blockchain developer and I am also an active contributor here on only dust here is my profile https://app.onlydust.com/u/josephchimebuka. This is my first time to contribute to this repo ill appreciate the opportunity to contribute. this is a couple of frontend and blockchain projects i have built https://metacrypt.vercel.app/ https://mattedsgn.com/

How I plan on tackling this issue

I will ensure the description is met by implementing the product overview screens in 3-4 days

GoSTEAN commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

am a frontend developer with experience in creating responsive and pixel-perfect UI components using technologies like React, CSS Flexbox, and Figma. My experience includes working on various web development projects where attention to detail and adherence to design were critical. I also have a strong understanding of making websites responsive across different devices.

How I plan on tackling this issue

  1. Design Inspection: Analyze the Figma design carefully, identifying all key elements, dimensions, and layout details.

  2. Setup Project: Create or configure the project setup using React, ensuring tools like Tailwind or Bootstrap are ready for styling.

  3. Component Structure: Break down the UI into reusable components (header, product image, description, etc.) and structure them logically in the codebase.

  4. Responsiveness: Implement media queries or use a responsive framework to ensure the layout adjusts smoothly on various screen sizes.

  5. Final Testing: Test across multiple devices and browsers, adjusting any alignment or visual inconsistencies to match the Figma design pixel-perfectly.

martinvibes commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @zintarh i'm an experienced frontend developer and a blockchain developer i would love to work on this issue Pleasee kindly assign :)

How I plan on tackling this issue

Task Summary:

ETA: 72 hrs kindly assign :)

Ayoazeez26 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a software developer with 6 years experience building applications

How I plan on tackling this issue

ETA - 4 days

Jemiiah commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a front-end web 3 developer I have always been contributing to previous OD Hack project and my first time on this repository here is my github profile : https://github.com/Jemiiah and over 55 + contribution on onlydust

How I plan on tackling this issue

  1. Understand the Design from Figma First, I’ll dive into the provided Figma link and carefully inspect the Product Overview screen. I'll note the key components—headings, product image, description, buttons, pricing info, reviews, etc. The goal is to ensure every single pixel is replicated as per the design. I'll also check how the design responds to different screen sizes to ensure the layout remains intact.

  2. Component Structure and Layout I'll break down the Product Overview page into reusable components:

Header: Likely includes the product title, possible breadcrumb navigation, or a category label. Product Image & Gallery: Display the main product image with possibly smaller images or a slider. Product Details: Includes description, price, rating, availability, and any additional product info. CTA Buttons: ‘Add to Cart’ or ‘Buy Now’ buttons, ensuring they match the exact styling from Figma. Reviews/Related Products Section: If the screen includes reviews or suggested products, I’ll replicate them too.

  1. Responsiveness I'll pay close attention to how the design behaves on different devices, starting with mobile-first and scaling up. I'll make sure to use media queries, flexible grids (e.g., using CSS Grid or Flexbox), and responsive font sizes and margins. If Figma includes mobile/tablet versions, I’ll match those. If not, I’ll ensure the breakpoints feel natural for various screen sizes.

  2. Styling (CSS/SCSS) I'll pull the exact fonts, colors, padding, margins, and spacings from Figma and make sure the CSS matches the design system exactly. To stay DRY (don’t repeat yourself), I’ll centralize common styles (e.g., buttons, typography) into reusable classes. The idea is to maintain consistency across the entire app.

  3. State Management (if needed) If the product data (like name, price, images, reviews) is dynamic or pulled from an API, I'll integrate it with the Web3 backend or any existing data-fetching mechanisms. This would likely be handled via hooks like useEffect or API calls, depending on the setup. I’d ensure all product data gets loaded in real-time and displayed properly.

  4. Adding Web3 Components (if required) Since this is a Web3 project, I’ll check if there are any blockchain-related components like:

Wallet connection buttons Token-based purchasing If required, I’ll integrate Web3 functionality, such as querying blockchain data for availability or allowing the user to purchase using cryptocurrency directly through a wallet like MetaMask.

  1. Interaction and Animations I’ll ensure any hover states, animations, or transitions are smooth and match the design specs. This includes things like:

Hover effects on buttons Image gallery or sliders for product images Smooth transitions for any dropdowns or pop-ups (if included).

  1. Testing for Cross-Browser Compatibility Once I’m happy with the implementation, I’ll test the screen in all major browsers (Chrome, Firefox, Safari, Edge) and on multiple devices to ensure everything looks and behaves consistently. with an ETA of 3day(72 hours)
Benjtalkshow commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, Cairo and Rust . With over 31 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.

How I plan on tackling this issue

I will implement the Product Overview screen as part of ODHACK 9.0, ensuring it matches the design provided in the Figma link. This task involves converting the design into a functional screen, so my focus will be on replicating every detail precisely, including layout, styles, and assets.

I will pay close attention to ensure that the screen is responsive, maintaining usability and aesthetics across different devices and screen sizes. I will also implement best practices for performance optimization to enhance the user experience.

In terms of timeline, I will provide an estimated time of arrival (ETA) for the completed implementation within five days. This timeframe allows for thorough testing and any adjustments needed to ensure that the final product meets the design specifications and quality standards.

Ugo-X commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Blockchain Developer with demonstrable expertise across modern web and blockchain technologies. My tech stack centers on Next.js, TypeScript, React, and Node.js for web development, complemented by Three.js for 3D experiences, and Solidity/Rust for blockchain solutions.

What sets me apart is my proven track record on OnlyDust, where I've made 83 significant contributions across 15 different projects since Edition 1. This extensive involvement reflects my ability to deliver quality solutions under tight deadlines while adapting to diverse project requirements.

With my deep experience in hackathon environments, I bring both technical excellence and practical development skills to the table. I'm confident I can contribute meaningfully to pushing the boundaries of what's possible in blockchain development while maintaining a focus on user-centric solutions.

My profile (https://app.onlydust.com/u/Ugo-X) showcases my consistent ability to deliver results across various blockchain challenges. I'm excited to bring this experience and drive for innovation to your team.

How I plan on tackling this issue

I will be sure to replicate the exact design outline in the figma link.

ETA is 2 days

melnikga commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, my name is Georgiy, I'm a frontend developer. I have extensive experience in developing tools for Starknet, and I've participated in almost all ODHacks, during which I worked on many projects. My OnlyDust profile: https://app.onlydust.com/u/melnikga

How I plan on tackling this issue

I would create a detailed Product Overview screen that strictly follows the provided design. I'd use shadcn components for the UI elements to maintain a polished look, particularly for cards, tables, and buttons. For the layout, I'd implement a responsive grid system that matches the exact spacing and alignment from the design.

ShantelPeters commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Background and How It Can Be Leveraged: I have extensive experience in front-end development, particularly with responsive design principles and frameworks like React and Next.js. My background includes converting design mockups into functional user interfaces, ensuring that the implementation is pixel-perfect and aligns with provided specifications. This experience will enable me to replicate the Product Overview screen accurately, maintaining the design integrity.

How I plan on tackling this issue

To implement the Product Overview screen, I will first analyze the Figma design thoroughly to understand the layout, styles, and interactive elements. I will then set up a new component for the Product Overview screen within the application, utilizing a responsive CSS framework to ensure it displays correctly across devices. I will pay close attention to the color scheme, typography, and any gradients specified in the design.

Once the initial implementation is complete, I will rigorously test the screen for responsiveness on various screen sizes, ensuring that all elements behave as intended. After final adjustments, I will document the process and provide an ETA which is 3 to 5 working days. based on the complexity of the design and any potential challenges encountered during development.