search

AFK-AlignedFamKernel / afk_monorepo

AFK: Aligned Fam Kernel - Monorepo
https://afk-community.xyz
MIT License
14 stars 34 forks source link

Feed screen Search component #36

Closed MSghais closed 2 months ago

MSghais commented 2 months ago

Improve the search and search components of the Feed screen.

Screen: Feed Component: SearchComponent

Images:

image

martinvibes commented 2 months ago

hello @MSghais can i be assigned

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged hello @MSghais i'm a frontend dev and i have skills in react, typescript, next.js, tailwind, sass, boostrap etc. i would love to work on this if i'm giving the oppotunity

How I plan on tackling this issue teps to Improve the Feed Screen Search and Search Components: Utilize SearchComponent:

Integrate the SearchComponent into the Feed useNote hooks. Use the SearchComponent to dynamically update the types of notes (NDKKind) displayed in the Feed. Open Menu:

Implement a mechanism to open a menu or dropdown within the Feed screen. Add/Remove Kinds:

Provide buttons or options within the menu to allow users to add or remove specific types of notes: NDKKind.Text NDKKind.ChannelCreation NDKKind.GroupChat NDKKind.ChannelMessage NDKKind.Metadata

i'll love to be giving this opportunity :)

ikemHood commented 2 months ago

Hey @MSghais, I am ikem Peter. a fullstack software developer with 3+ years of working experience

Here is how i would approe=ach this...

petersdt commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

ca

NueloSE commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hi

ShantelPeters commented 2 months ago

Hello @MSghais can I jump on this ?

ikemHood commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey @MSghais, I am ikem Peter. a fullstack software developer with 3+ years of working experience

How I plan on tackling this issue

Here is how i would approach this...

martinvibes commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @MSghais i'm a frontend dev and i have skills in react, typescript, next.js, tailwind, sass, boostrap etc. i would love to work on this if i'm giving the oppotunity

How I plan on tackling this issue

teps to Improve the Feed Screen Search and Search Components: Utilize SearchComponent:

Integrate the SearchComponent into the Feed useNote hooks. Use the SearchComponent to dynamically update the types of notes (NDKKind) displayed in the Feed. Open Menu:

Implement a mechanism to open a menu or dropdown within the Feed screen. Add/Remove Kinds:

Provide buttons or options within the menu to allow users to add or remove specific types of notes: NDKKind.Text NDKKind.ChannelCreation NDKKind.GroupChat NDKKind.ChannelMessage NDKKind.Metadata

sajalbnl commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have 2 years of experience as a front-end developer, with expertise in JavaScript, React.js, CSS, and HTML. I've built full-stack projects like Crypto Bank, handling both front-end and back-end development. My skills in creating responsive, dynamic interfaces make me well-equipped to contribute effectively to your project.

Dprof-in-tech commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As an experienced Full Stack Blockchain Developer, I'm excited to contribute my expertise to Edition 7 of the OnlyDust hackathons. With a strong background in Next.js, TypeScript, JavaScript, React, Node.js, Solidity, and Cairo, I've honed my technical skills across the blockchain development landscape. My journey with OnlyDust began at Edition 2, and I've since made 28 contributions across 11 projects. This extensive experience on the platform has allowed me to develop a keen understanding of delivering high-quality solutions under tight deadlines. I bring a unique blend of technical prowess and user-centric design to every project, whether I'm crafting immersive 3D experiences or developing innovative smart contracts. My track record demonstrates my ability to adapt quickly and contribute effectively to diverse challenges. I'm confident in my capacity to tackle new problems and drive innovation in the blockchain space. As we embark on Edition 7, I'm eager to leverage my hackathon experience and technical skills to push the boundaries of what's possible in blockchain development. With a passion for creating cutting-edge solutions, I'm excited to collaborate with the OnlyDust community and contribute to the advancement of the blockchain ecosystem.

How I plan on tackling this issue

To solve this issue, i would:

Update SearchComponent to Modify NDKKind in Feed Modify the SearchComponent to maintain a state of selected NDKKinds. Implement a function to update the useNote hooks in the Feed component when the selected kinds change. Ensure that the Feed component re-renders appropriately when the kinds are updated. Implement Open Menu Functionality Add a button or icon to open an expanded search menu. Create a dropdown or expandable section that appears when the menu is opened. Ensure the menu is accessible and follows UI/UX best practices. Add Buttons for NDKKind Selection Create buttons for each of the following NDKKinds: NDKKind.Text NDKKind.ChannelCreation NDKKind.GroupChat NDKKind.ChannelMessage NDKKind.Metadata Implement toggle functionality for each button to add/remove the kind from the search criteria. Style the buttons to clearly indicate their selected/unselected state. State Management for Selected Kinds Implement state management (e.g., using React's useState or a state management library) to keep track of selected kinds. Ensure that the state is properly synchronized with the Feed component's useNote hooks. UI/UX Enhancements Design and implement a visually appealing layout for the search area and kind selection buttons. Add animations or transitions for a smoother user experience when opening/closing the menu and selecting kinds. Performance Optimization Optimize the search process to minimize unnecessary re-renders. Implement debouncing for search input to reduce API calls. Testing Write unit tests for the new search functionality and kind selection. Perform integration tests to ensure the SearchComponent properly updates the Feed. Conduct user testing to gather feedback on the new search experience. Documentation Update component documentation to reflect new props and functionality. Add usage examples for the enhanced SearchComponent in the project documentation.

My expected delivery time for this issue would be 2-3 days

Benjtalkshow commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @MSghais I’m ready to tackle the "Feed screen Search component #36" issue. My name is Benjamin, and I bring 3 years of experience with Next.js, TypeScript, and frontend development. My background includes working on various projects, including contributions to OnlyDust, where I addressed complex UI and component challenges.

How I plan on tackling this issue

Understanding the Issue

The task is to enhance the search functionality and components for the Feed screen. This involves updating the SearchComponent to handle various NDKKind values and adding functionalities to manage these kinds through buttons in the search UI.

My Proposed Solution

Enhance SearchComponent

Update Feed useNote Hooks

Implement UI Elements

Design Considerations

Testing and Validation

josephchimebuka commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @Msghais I am Joseph Chimebuka I'm a full-stack software developer with 4+ years of experience in crafting innovative products. I've built a range of projects, including https://mattedsgn.vercel.app/ and https://metacrypt.vercel.app/ showcasing my expertise in React, Next.js, and blockchain technologies. I'm also an active contributor onlydust. here's my account https://app.onlydust.com/u/josephchimebuka.

How I plan on tackling this issue

I will improve the search component of the feed screen

PoulavBhowmick03 commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Poulav Bhowmick, a software engineer at Invisible Studios with a robust background in TypeScript, Rust, Solidity Cairo, fullstack development and blockchain technology. My experience includes building robust applications, optimizing functionalities and blockchain integration. I have actively participated in events and open source contributions, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Starknet community🇷.

How I plan on tackling this issue

ETA- less than 1 day

  1. SearchComponent Upgrades

Adapt the component to work seamlessly with the Feed screen Implement support for multiple NDKKind values Optimize result display based on selected kinds

  1. Feed Screen Hook Modifications

Refactor useNote hooks to accommodate new NDKKind values Ensure accurate and relevant search results for each kind

  1. New User Interface Elements

Develop an interactive kind selection menu Create toggleable buttons for the following NDKKind values:

Text Channel Creation Group Chat Channel Message Metadata

Implementation Focus User Experience

Prioritize intuitive design for the search interface Streamline the process of filtering and viewing search results

Responsive Design

Ensure compatibility across various devices and screen sizes

Quality Assurance Functional Testing

Verify the correct operation of the updated search component Validate the accuracy of search results for each NDKKind

UI/UX Testing

Confirm the usability and visual appeal of new UI elements Test the responsiveness of the search interface

Next Steps

Begin with SearchComponent modifications Proceed to update Feed screen hooks Implement and integrate new UI elements Conduct thorough testing and refinement

onlydustapp[bot] commented 2 months ago

The maintainer MSghais has assigned Dprof-in-tech to this issue via OnlyDust Platform. Good luck!