search

Tico4Chain-Coders / POC-Trustless-Work

POC of a decentralized application (dApp) to enhance trust in agency-client relationships using blockchain. It enables trustless payments via smart contracts, securing funds in escrow until milestones are approved by clients. Stablecoins like USDC are used to ensure stability and ease of use.
6 stars 12 forks source link

frontend: Create "Help" page #21

Closed JoelVR17 closed 5 days ago

JoelVR17 commented 1 week ago

Issue - Add Help Page

You must apply through OnlyDust. If not, you'll be ignored

Description:

Add a "Help" page accessible from a section in the header. This page should be structured using the Accordion component from ShadCN UI (reference: Accordion Component Documentation). The content for this page can be filled with placeholder text (e.g., Lorem Ipsum) for now.

Requirements:

  1. Add a "Help" link or button in the header section that navigates to the new "Help" page.
  2. On the "Help" page, implement the Accordion component from ShadCN UI to organize information in collapsible sections.
  3. Use placeholder text (Lorem Ipsum) within each section of the accordion for demonstration purposes.

Validations:

  1. The "Help" link in the header should navigate correctly to the "Help" page.
  2. The accordion on the "Help" page should be implemented as per the ShadCN UI design specifications, allowing sections to expand and collapse as intended.
  3. Placeholder text should display correctly within each accordion section.
  4. It should works on light / dark mode.
  5. Must be fully responsive.

Tests:

  1. Test navigation from the header to the "Help" page.
  2. Verify that the accordion component functions correctly, expanding and collapsing each section smoothly.
  3. Ensure the placeholder text displays in each section of the accordion without styling or alignment issues.

Recommendation:

Stick closely to the ShadCN UI guidelines for component usage, especially regarding styling and layout within the accordion. This will ensure visual consistency across the application.

⚠️ Please follow the guidelines for requesting an issue, launching commits, and describing PRs. Otherwise, they will be ignored. ⚠️

Michaelkingsdev commented 1 week ago

Hello, @JoelVR17 My name is Michael. I am an experienced nextjs developer. I have 4 years of experience as a fullstack developer. I will create a fully responsive "Help" page with navigation from the header using next/link. The page will use the ShadCN UI Accordion component to organize placeholder content into collapsible sections, ensuring smooth functionality and alignment with the design specs. I’ll ensure compatibility with both light and dark modes, test navigation, and validate the accordion’s responsiveness and usability on all devices. Can this task be assigned to me? My ETA is 48hrs from the start of ODHack.

Benjtalkshow commented 6 days ago

I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 45 contributions to over 15 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

Let me work on this issue and deliver in the next 24 hrs

Ugo-X commented 6 days ago

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 92 significant contributions across 19 different projects since Edition 1. This extensive involvement reflects my ability to deliver quality solutions under tight deadlines while adapting to diverse project requirements.

I am confident I can implement this design according to Ui specifications, would love to work on it.

mexes20 commented 6 days ago

Can I be assigned to work on this? I have three years experience in Software development and have contributed to some projects on OD here.

ETA: 10 hours.

martinvibes commented 6 days ago

Can I take care of this issue? i'm a frontend dev, and a blockchain dev kindly assign :)

Bran18 commented 6 days ago

Hello there. I’m Brandon, part of the ⛩️ Dojo Coding community, and I would love to contribute to this project! 🚀 This might be my first contribution here.

I've done quite a few accordion-related components and pages in our apps, feel free to check out the one from MB ( https://dev.masterbots.ai/ and https://masterbots.ai/) as one example xD. This full section is pretty much accordions being toggle and showing content (not that easy but yeah xD) I would love to help out with creating the one you need and adding all the elements it needs. I will be following the strategy we use in our products.

Lmk if I can start working on it. Here’s my GitHub profile: GitHub: https://github.com/Bran18 and my OnlyDust profile: https://app.onlydust.com/u/Bran18.

BTW tks for taking the time 🙏

Jethrolopwus commented 6 days ago

I'd be happy to do this.

KevinLatino commented 6 days ago

Hello @JoelVR17 My name is Kevin Latino, and I'm a Frontend Developer and active open-source contributor. I'm a member of Dojo Coding ⛩️, a thriving Web3 community in Costa Rica. I have experience with React, Next.js, and TypeScript, also I have experience in data fetching and API integrations and I recently won the LATAM Hackathon hosted by Base. I've also contributed to projects in ecosystems like Starknet and Stellar.

I will add a "Help" page to the application, accessible from the header section. The page will feature the Accordion component from ShadCN UI, which will be used to organize information into collapsible sections. For now, I will populate the sections with placeholder text (Lorem Ipsum). The "Help" link in the header will navigate correctly to this new page. I will ensure that the accordion works as intended, allowing sections to expand and collapse, and verify it works seamlessly in both light and dark modes. Additionally, the page will be fully responsive. Finally, I will test the navigation and accordion functionality to ensure everything works smoothly.

Here is an example of a Frontend Project that I have made: https://buildmyevent.xyz/

MullerTheScientist commented 6 days ago

I am a full-stack developer with experience in QA testing and languages like Python, Cairo, Solidity, React, and JavaScript. please can i address this issue

melnikga commented 6 days ago

Can I contribute to this one? Hi, my name is Georgiy, I'm a fullstack blockchain 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 ETA: 2 days

od-hunter commented 6 days ago

Hello, can I be assigned this issue? My experience includes html, css, react, javaScript, typescript, solidity & Cairo.

To solve this issue, I'll take the following steps:

  1. First of all, I'll add a Link component (React Router) in the Header.tsx to navigate to /help when the user clicks the "Help" link.
  2. Then, create a new page component (HelpPage.tsx). I'll use the Accordion, AccordionItem, AccordionTrigger, and AccordionContent components from ShadCN UI to display collapsible sections, then populate each AccordionContent with placeholder text (Lorem Ipsum).
  3. I'll now define a new route in App.tsx for the /help path, which renders the HelpPage component.
  4. I'll use conditional CSS classes like .light-mode and .dark-mode to toggle between light and dark modes. I'll ensure that the accordion and other UI components respect these modes using CSS.
  5. I'll also use media queries or utility classes (like TailwindCSS) to make the accordion fully responsive, I'll ensure the accordion behaves correctly on different screen sizes by adjusting padding, margin, and width.
  6. Lastly I'll test.

Kindly assign, I'm ready to work.

chibokaxavier commented 6 days ago

Hi, i am Chiboka Emmanuel a full-stack web developer who enjoys creating solutions and applications that look great and work smoothly. I would really love to be assigned this issue and work on this project.

Amarjeet325 commented 6 days ago

Could I try this one?

JoelVR17 commented 6 days ago

This issue is for you @Michaelkingsdev! 🚀 Remember to follow all the guidelines, both the ones inside the repository and the guideline to perform the PR.

Many thanks to all the other dev's who sent in their application. 

Michaelkingsdev commented 6 days ago

This issue is for you @Michaelkingsdev! 🚀 Remember to follow all the guidelines, both the ones inside the repository and the guideline to perform the PR.

Many thanks to all the other dev's who sent in their application.

Thanks a lot.