Profile Navigation Enhancement

[zleypner]

Profile Navigation Enhancement

Description

Implement navigation buttons and views in the profile section to improve user access to apartments and offers.

Features Required

1. Profile Navigation Button

• Create a button that redirects to the main profile page
• Target URL: http://localhost:3000/profile
• Button should be clearly visible and accessible from relevant pages
• Include appropriate styling consistent with existing UI

2. My Apartments View

• Improve the current view for the path
• Target URL: http://localhost:3000/profile/my-apartments
• Implement route handling in the router
• Create necessary components for displaying apartment listings
• Include proper layout and styling

3. Interested People View

• Improve the current view for the path
• Target URL: http://localhost:3000/profile/interested-people
• Implement route handling in the router
• Create components to display interested users/offers
• Include proper layout and styling

Technical Requirements

• Implement using React Router for navigation
• Ensure proper state management
• Add error handling for invalid routes
• Include loading states
• Make components responsive

Acceptance Criteria

• Main profile button redirects successfully to /profile
• My Apartments view is accessible at /profile/my-apartments
• Interested People view is accessible at /profile/interested-people
• All routes are properly protected with authentication
• Navigation is smooth with no page refreshes
• UI is consistent with existing design system
• All views are responsive on mobile devices

Additional Notes

• Consider adding breadcrumb navigation
• Include loading states for data fetching
• Add proper error boundaries
• Consider adding animations for transitions

Resources

-Keep the projects structure

• Design system documentation
• Current routing implementation
• Existing profile components

[mimisavage]

Could I grab this task?

[SYLVIANNORUKA]

Can I handle this task?
I am a Front-end and smart contract developer. I am proficient in tailwind css, Next Js, Typescript, JavaScript, . I would love to contribute to this project.

[0xdevcollins]

Is this issue still available?
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 57 significant contributions spread over 16 OnlyDust projects.

[codebestia]

Can i wok on this as soon as ODHack11 starts?

How i will tackle this

• I will follow the contribution guideline to the letter
• I will follow the above description and check all the checklist
• I will open a PR within 4 days

[Ayoazeez26]

I will create a button that redirects to the main profile page and make sure it styles is consistent with the existing UI. I will improve the my-apartments view by implementing route handling and creating components for displaying apartment listings. I will also ensure consistent layout and styling. I will also improve the interested-people view by implementing route handling and creating components to display interested users/offers. I will make sure to use React Router for navigation and handle state management properly. I will handle invalid routes errors and also include loading states by adding a spinner and also make sure the components are fully responsive. Before creating a PR, I will make sure all the acceptance criteria are met.
ETA - 2 days.

[josephchimebuka]

I'd be happy to do this.

[armandocodecr]

Issue Submission: Profile Navigation Enhancement for Improved User Access

Hi zleypner,

I am excited to contribute to enhancing the profile navigation by implementing intuitive and responsive views for the Main Profile, My Apartments, and Interested People sections. After reviewing the issue description and the technical requirements, I propose the following structured approach to deliver a seamless and consistent user experience.

Proposed Solution

1. Profile Navigation Button

• Button Implementation:

• Create a Profile Navigation Button that redirects users to the main profile page (/profile).

• Ensure the button is prominently displayed and styled in accordance with the existing design system.

• Use React Router’s useNavigate for efficient client-side navigation.

• Target URL:

http://localhost:3000/profile

2. My Apartments View

• Route and Component Creation:

• Implement a new route for the path /profile/my-apartments using React Router.

• Create a MyApartments component to display apartment listings.

• Integrate appropriate layout and styling using the existing design system and TailwindCSS (if applicable).

• Key Features:

• Include placeholders or dynamic content for apartment listings.

• Add loading states for data fetching and error boundaries to handle failures gracefully.

• Target URL:

http://localhost:3000/profile/my-apartments

3. Interested People View

• Route and Component Creation:

• Implement a new route for the path /profile/interested-people using React Router.

• Create an InterestedPeople component to display users or offers interested in the apartments.

• Ensure the layout is user-friendly and styled consistently with the current profile design.

• Key Features:

• Display user details or offers in an organized manner.

• Include loading indicators and error boundaries to improve user experience.

• Target URL:

http://localhost:3000/profile/interested-people

Technical Implementation

1. React Router Navigation:

• Use React Router for route handling to ensure smooth, client-side navigation without page refreshes.

2. State Management:

• Implement state management (e.g., using React’s useState or useContext for global state) to handle user data dynamically.

3. Error Handling and Loading States:

• Include loading indicators during data fetching to improve UX.

• Add error boundaries to gracefully handle invalid routes or failed data fetches.

4. Responsive Design:

• Ensure all components are responsive and adapt seamlessly to mobile and desktop devices.

• Use existing design guidelines and utilities (e.g., TailwindCSS or custom styles) for consistency.

5. Authentication Protection:

• Protect routes with authentication guards to ensure only logged-in users can access profile-related pages.

Acceptance Criteria

• ✅ The Main Profile Button successfully redirects to /profile.

• ✅ The My Apartments View is accessible at /profile/my-apartments.

• ✅ The Interested People View is accessible at /profile/interested-people.

• ✅ All routes are protected with authentication.

• ✅ Navigation is smooth with no page refreshes.

• ✅ UI is consistent with the existing design system.

• ✅ All views are responsive on mobile and desktop devices.

Why This Approach?

1. Consistency:

This approach follows the current project structure and design system, ensuring seamless integration.

2. User Experience:

Smooth navigation, loading states, and error handling enhance user satisfaction and reliability.

3. Scalability:

The modular component design allows for easy maintenance and future enhancements.

4. Experience:

With experience in React Router, state management, and responsive design, I am confident in delivering a robust solution.

Additional Considerations

• Breadcrumb Navigation:

To enhance usability, I suggest adding breadcrumbs to help users navigate back easily.

• Animations:

Consider adding subtle animations for route transitions to improve the visual experience.

I am eager to take on this issue and deliver an improved profile navigation experience. Looking forward to your feedback!

[abdegenius]

Let me try this one!

[7-falseparfait]

Can I attempt this issue?

I am a Front-end and Smart Contract Developer with expertise in Tailwind CSS, Next.js, TypeScript, JavaScript, and SQL. I am eager to contribute to this project and bring value with my skills.

[jimenezz22]

Hi, I'd love to contribute to this issue! I'm part of the Dojo Coding community and have experience contributing to various open-source projects in OnlyDust and I manage a full-stack developer profile.

My Approach:

1. Profile Navigation Button
   • Implement a button component styled consistently with the existing UI.
   • Configure the button to redirect to /profile using React Router for seamless navigation.
2. My Apartments View
   • Define a new route in the router for /profile/my-apartments.
   • Build a component to display apartment listings using the existing design system for layout and styling.
3. Interested People View
   • Add routing for /profile/interested-people in the router configuration.
   • Create a component to display interested users or offers with proper styling and layout.

Technical Notes:

• Ensure state management is properly handled for data display in both views.
• Add basic loading states for data fetching to enhance user experience.
• Test the navigation to confirm routes are working as expected and protected with authentication.

ETA: few hours or a day maximum in the worst case scenario

[melnikga]

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

[SudiptaPaul-31]

Would love to work on this issue

I am a fullstack and blockchain developer having experience for more than 1.5 years and had worked on many projects from previous odhack my profile: (https://app.onlydust.com/u/SudiptaPaul-31)

[DanielEmmanuel1]

Mind if I take this issue?

I will implement the required navigation buttons and views in the profile section to improve user access to apartments and offers. I plan to create a new component, while also integrating routing logic, and ensuring the UI is consistent with the existing design. I’m a first time contributor and would like the opportunity to take on this task. I can have this delivered within 48 hrs.

[Kachimercy1]

Let me handle this issue!

[Michaelkingsdev]

Could I be assigned to this?

[0xdevcollins]

Could I try solving this?

My Background
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 46 significant contributions spread over 12 OnlyDust projects.

[Ekene001]

Hello I'm Ekene, a frontend and blockchain developer, and I’m new to the OnlyDust platform. This is my first time contributing to this repository, and I’m excited about the opportunity to collaborate and bring my skills to the table.

Please can i be assigned to this task

[Yunusabdul38]

May I be assigned to this?
will be glad to work on this as my first contribution to this project
I have solid experience with contract integration and have worked on multiple web3 projects (open source and personal projects)

[emmz3230]

I am a front-end web developer with skills like HTML, CSS, JavaScript, React.js, and Next.js.
I have experience writing code for websites and web apps.
with the little understanding I have in react-router, which i took the 9-hour video on freeCodeCamp YouTube channel by a scrimba tutor.
I would love to use my routing skill to tackle this issue. .

[austineblaise]

How I Can Solve the Issue

As a frontend/JavaScript/blockchain developer, I will enhance the profile navigation by adding a visible button for the main profile page and improving views for "My Apartments" and "Interested People." I’ll handle routes with React Router, ensure responsive design, add loading states, and make the UI consistent with the existing design. Navigation will be smooth with proper error handling and authentication.

[Rayguti]

Hi, I'm a Full Stack Developer with a strong interest in continuous learning and expanding my knowledge across various scopes. I enjoy contributing to projects that challenge me and help me grow. I have previously contributed to this project and found it to be a great opportunity to develop my skills further. I’d be delighted to continue working on it and contribute to its success.

Proposed Approach.

Define requirements: Identify the routes to be implemented (profile, my apartments, interested people) and the components needed for each view.

Set up navigation: Use React Router to create the corresponding routes and ensure that views are accessible from the defined URLs.

Create components: Develop the necessary components for each view, ensuring that they display the correct data and have a consistent layout.

Manage state and authentication: Implement state management for views and ensure that routes are protected with authentication.

Include loading functionality and error handling: Add loading states for data fetching and handle potential invalid route errors.

Test and tune: Verify that all routes work correctly, that views are responsive, and that navigation does not cause page reloads. Adjust as needed to improve the user experience.

[deeseeker]

Hello, I am Qudus Adeyemi (@deeseeker), a frontend developer with over two years of experience in React, TypeScript, and JavaScript. I am currently working on a social media app for African creators (https://app.myrevva.com/).

I have reviewed the requirements carefully and will convert the designs with great attention to detail. I will consider the responsiveness, loading states, handle error and properly manage the states.

You can check out my portfolio for a sample of my work, such as Logisfi(https://logisfi-pro-app.vercel.app/), available on my GitHub.

I would love the opportunity to take on this issue.

[1nonlypiece]

Hi ,
I’d like to work on this issue as I have experience in building frontend interfaces using frameworks like React and Next.js.

ETA:
I estimate completing this task in about 12-24 hours. Let me know if I can get started!

[Jagadeeshftw]

Hi,
I’d like to work on this issue as I have experience in back-end development, including designing and handling APIs, optimizing server-side logic, and ensuring secure and efficient data handling.

ETA:
I estimate completing this task in about 12-24 hours. Let me know if I can get started!

[aniruddhaaps]

To address this issue, I would improve the navigation through the profiles by adding a button for redirection to /profile with proper styling. Create views at /profile/my-apartments and /profile/interested-people by using React Router, securing routes appropriately, and making it seamless in navigating. Use responsive components for every view as per the design system; include error handling, loading states, and breadcrumbs are optional to enhance user experience.

[respp]

I have been exploring the repository and its issues these past days, and I feel that I can add value. I am part of the Dojo and am excited about the opportunity to make my first contributions to OnlyDust.

After reviewing the requirements, I can add value by following these steps:

• Create a navigation button to redirect users to the main profile page using useNavigate from React Router.
• Implement a new route /profile/my-apartments with the MyApartments component to display available apartments.
• A new route /profile/interested-people with the InterestedPeople component to show interested users or offers.
• Use React Router for navigation without page refreshes and handle routes efficiently.
• Ensure routes are protected with authentication.
• Implement loading indicators and error handling to improve user experience.
• Style components using the existing design system and TailwindCSS.
• Ensure all components are responsive on mobile and desktop devices.
• Include validations for user inputs and show loading states while fetching data.

By following this approach, I will meet all the Acceptance Criteria

[ONEONUORA]

Is it okay if I take this? I am a full stack and blockchain developer. ETA 24 hours

[SudiptaPaul-31]

Would love to work on this issue

I am a fullstack and blockchain developer having experience for more than 1.5 years and had worked on many projects from previous odhack my profile: (https://app.onlydust.com/u/SudiptaPaul-31)

[Luluameh]

Hi, I’m a frontend developer with experience in TypeScript and React Router. I’ve reviewed the requirements for the Profile Navigation Enhancement and am confident I can implement the necessary changes to improve user navigation.

Plan to Solve the Issue:

Profile Navigation Button:

Create a clearly visible button that redirects users to the main profile page (/profile).
Ensure the button is styled to match the existing UI and is accessible from relevant pages.
My Apartments View:

Improve the current view for the /profile/my-apartments route.
Implement route handling using React Router and create the necessary components to display apartment listings.
Style the view according to the existing design system and ensure it’s responsive.
Interested People View:

Enhance the /profile/interested-people route by implementing route handling and creating components to display interested users/offers.
Ensure proper layout, styling, and responsiveness.
Error Handling and State Management:

Implement state management and error handling for invalid routes and loading states.
Ensure smooth navigation between routes without page refreshes.
Additional Considerations:

Add breadcrumb navigation and animations for smooth transitions between views.
Make sure all views are responsive and work well on mobile devices.
Ensure proper authentication for route protection.
Estimated Completion Time: 3 days

[kayceeDev]

I'd be happy to do this.

[Jonatan-Chaverri]

Can I try solving this issue?

[CoderPrime99]

Hi! I'm Carlos, a Software Developer with over 2 years of experience. I've worked with C++, Java, and JavaScript, and I'm excited to make my first contribution to OnlyDust. It would be great to contribute to the project's sucess.

I would start by checking the current project structure and how navigation is set up. Then, I’d use React Router to add routes for /profile/my-apartments and /profile/interested-people, making sure they require authentication. I’d create or update components for displaying the apartments and interested people, keeping them responsive and styled like the rest of the app. I’d add a "Profile" button to go to /profile with proper styling. To improve the experience, I’d add loading states and handle errors for broken routes. Finally, I’d test everything to make sure navigation works smoothly.

[pablomadrigal]

I'm Pablo Madrigal.

I'm a Fullstack Developer with more than 5 years of experience primary on React and Node.js and now learning web3, I'm also part of Dojo Coding ⛩️

Problem

Profile Navigation Enhancement

Solution

I would create the following components

1. Profile Navigation Button
2. My Apartments View
3. Interested People View

Following the current pattern in the code and based on the Figma file

I'm going to use React Router to make all the navigation, adding breadcrumb navigation, loading states, transitions, and make it mobile friendly.

Also I'm going to make sure that all the pages are secure and require the proper authentication and redirect to home page in case of having an invalid route

[Supa-mega]

Can I start working on this?

[mariocodecr]

Hii! My name is Mario Araya, I’m a Software Developer with 2+ years of experience. I have worked with backend technologies such as Cairo, Java, and C#, as well as frontend development using React, NextJS, and JavaScript/TypeScript. I’ve made contributions to open-source projects, completed a Starknet Bootcamp, exercises on NodeGuardians, finished Starklings, and participated in multiple hackathons. I’m also a member of the Dojo Coding community here in Costa Rica.

To address this task, navigation buttons and views should be implemented within the profile section to improve user access to apartments and offers. This involves adding a "Profile" button that redirects to the main profile page at http://localhost:3000/profile with styling consistent with the current UI. The My Apartments and Interested People views should be enhanced to include proper routing using React Router, as well as components for displaying apartment listings and offers. All components must maintain consistent styling, be responsive across devices, and include loading states and error handling. Routes should be protected with authentication, and navigation should be smooth, avoiding full page refreshes. Additional features like breadcrumb navigation and animations can be added to enhance user experience.

[ShantelPeters]

Could I be assigned to this?

[Jemiiah]

Hello @zleypner i'm jeremiah I'm a frontend developer in web3 I have contributed in previous OD Hacks to different projects. i have made over 85+ contribution in past OD Hacks Here's my OD Hack profile: https://app.onlydust.com/Jemiiah I intend to resolve this issue within an ETA of 48 hours

[Amarjeet325]

Can I take care of this issue?

[vestor-dev]

hey sir i would love to work on this issue
i'm a blockchain dev and i would love to handle this issue
assign me and i'll get to work

[TheSQLguy]

I am new to open-source
To address this issue, I would improve the navigation through the profiles by adding a button for redirection to /profile with proper styling. Create views at /profile/my-apartments and /profile/interested-people by using React Router, securing routes appropriately, and making it seamless in navigating. Use responsive components for every view as per the design system; include error handling, loading states, and breadcrumbs are optional to enhance user experience.

[SimplementeCao]

Hi, I'm Leandro, Front-end developer.
I would solve the issue first by reviewing the code and adjusting to the component-based development guideline to maintain consistency and scalability of the project.
Estimated delivery time: 20 hours.

I have contributed before to other projects like:

Cairo Book
Starknet Book
Starknet Docs
Starknet Security Challenges Factory
Starkane
Can I work on this issue?

Check my OnlyDust, I've contributed to many projects: OnlyDust Profile,
and my GitHub

[zleypner]

👋 Thank you everyone for showing interest and applying! I truly wish I could assign an issue to each one of you!! Hopefully in a next OD you will contribute in our project.

@armandocodecr , you've been assigned to this task! 🎉 Looking forward to your contribution! 💻 ✨
Let me know if you need any clarification or support as you work on this. 🤝