[feat] Add Users Profile page

adrianvrj commented 2 days ago

This issue will be part of ODHack8.0, please apply via Onlydust app

Create a new page which route will be: /app/myprofile/{useraddr}, this page should be the users profile page, please do not add the navbar since the navbar will be created separately in another issue. This page should take the users address as a param.
Take a look at the figma to see how the dashboard page looks like. Figma prototype
Do not worry about functionality yet, we only want to develop the design.
Knowledge in Nextjs and typescript are recommended.
Please read contributors guide before asking for an issue.

Jemiiah commented 2 days ago

@adrianvrj i would love to work on this issue

onlydustapp[bot] commented 2 days ago

Hi @Jemiiah! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

onlydustapp[bot] commented 2 days ago

Hi @MariangelaNM! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

onlydustapp[bot] commented 2 days ago

Hi @MariangelaNM! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

Joy-Adah commented 2 days ago

Hi @adrianvrj I'd love to work on this.

onlydustapp[bot] commented 2 days ago

Hi @Joy-Adah! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

Dprof-in-tech commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, i am Dprof-in-tech, an experienced Full Stack Blockchain Developer and I am excited to contribute my skills to this project in this ODHACK 8. With a strong background in Next.js, TypeScript, JavaScript, React, Node.js, Rust 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 34 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 begin ODHACK 8, I'm eager to leverage my hackathon experience and technical skills to push the boundaries of what's possible in blockchain development.

Below is a link to my OnlyDust public profile. https://app.onlydust.com/u/Dprof-in-tech

How I plan on tackling this issue

I will create the /app/myprofile/{useraddr} route:

This page will represent the user's profile page, and I will ensure that it accepts the user's address (useraddr) as a parameter to identify which profile is being accessed.

I will reference the Figma prototype: I’ll review the Figma prototype to understand how the profile page should look in terms of layout, font, colors, and component arrangement. I will develop the page without the navbar: As with the dashboard, I will not include the navbar here. The focus will be on the core profile design.

I will ensure the page is strictly design-focused: At this stage, I won’t handle any logic or API integration. I’ll only work on the design and layout based on the prototype, ensuring it’s ready for functionality to be added later.

My estimated time of delivery would be within 2 days of being assigned so i can focus on giving a pixel perfect design.

jimenezz22 commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am an active member of the Dojo Coding community in Costa Rica, with experience in Cairo, having built onchain games like ByteBeasts and contributed to open-source projects such as CairoLint, where I implemented tests for Cairo lints. Additionally, I taught Cairo during the Starknet Bootcamp for Dojo Coding. I also have experience with TypeScript, contributing to Starknet Quest by developing components like ComboBoxes, among others.

How I plan on tackling this issue

Approach for the Issue:

Analyze the Figma Design: I will use the design from the Figma prototype to guide the layout and structure of the profile page. The goal will be to replicate the visual elements without adding any functionality for now.
Set Up the Profile Page Route: I will create the route /app/myprofile/{useraddr} in the Next.js project, which will dynamically receive the user's address as a parameter.
Page Layout and Structure:
- Profile Information: The page will display the user's Ethereum address (e.g., 0x038...327CE8), total donations, current level, and a progress bar towards the next level.
- Progress Bar: A styled progress bar will be implemented to show the user’s progress (e.g., 200/500) based on the mockup.
Styled Components: Using Next.js and TypeScript, I will build the page using styled components or CSS modules to ensure the page looks exactly like the Figma mockup. The profile page will be responsive and will focus on proper alignment and styling of elements.
Leave Out the Navbar: As per the instructions, I will not add the navbar. I will focus only on building the profile page with the correct layout for user information and the progress bar.
Testing Layout Responsiveness: I will ensure that the page is responsive across different screen sizes and maintains the correct styling as seen in the design.

Estimated Time to Completion: 1-2 days

evgongora commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Erick and I'll be working on issue #92. I have experience working with Next.js and TypeScript, which aligns with the requirements of this issue. I have also worked on developing UI components and integrating design elements from Figma into web applications. My background as a web development student part from Dojo Coding will help ensure that the page is implemented efficiently and follows best practices. I estimate this will take around 2 days to complete.

How I plan on tackling this issue

This is how I would tackle this issue:

Review the Figma prototype to understand the layout and design of the user's profile page. Set up the route /app/myprofile/{useraddr} in the Next.js project to handle the dynamic user address. Create the profile page layout by adding the components but ensuring no functionality is added at this stage while following the design guidelines from Figma. Focus on styling and ensuring that the design matches the Figma prototype as closely as possible. Perform a self-review of the design for consistency and responsiveness before submitting the PR for review.

lauchaves commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey! I'm Lau Chaves, and I would like to contribute to this issue! I have over 5 years of experience working with JavaScript, React, and TypeScript, ruby... Im also part of Dojo Coding Costa Rica! My primary role has been as a front-end developer, and I have a keen eye for detail and a strong focus on mobile-first approaches. I ensure the quality of my work through rigorous self- QA processes. I have a solid knowledge of CSS, Sass, and styled-components. Feel free to check my onlydust profile here and github profile: lauchaves!

How I plan on tackling this issue

I’d follow this steps

-Id check the figma file to start developing the page

-Id create the route and setup the files for it taking into consideration the user address as param

-Id develop the page as it is on figma, Id confirm if styled components a as or plain css is needed and Id make sure it’s responsive

Jemiiah commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @adrianvrj I would love to work on this issue I'm a frontend web 3 developer with 50 + contribution I have contributed previously to previous OD hack and other repository and would the opportunity to contribute to this repo as well here's my only dust profile: https://app.onlydust.com/u/Jemiiah

How I plan on tackling this issue

Approach for the Issue:

Analyze the Figma Design: I will use the design from the Figma prototype to guide the layout and structure of the profile page. The goal will be to replicate the visual elements without adding any functionality for now.
Set Up the Profile Page Route: I will create the route /app/myprofile/{useraddr} in the Next.js project, which will dynamically receive the user's address as a parameter.
Page Layout and Structure: Profile Information: The page will display the user's Ethereum address (e.g., 0x038...327CE8), total donations, current level, and a progress bar towards the next level. Progress Bar: A styled progress bar will be implemented to show the user’s progress (e.g., 200/500) based on the mockup.
Styled Components: Using Next.js and TypeScript, I will build the page using styled components or CSS modules to ensure the page looks exactly like the Figma mockup.
The profile page will be responsive and will focus on proper alignment and styling of elements.
Leave Out the Navbar: As per the instructions, I will not add the navbar. I will focus only on building the profile page with the correct layout for user information and the progress bar.
Testing Layout Responsiveness: I will ensure that the page is responsive across different screen sizes and maintains the correct styling as seen in the design. Estimated Time to Completion: 1-2 days

Ayoazeez26 commented 2 days 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

Use the figma design as a guild to build the users profile page to pixel perfect details

I would ensure that the page takes the user's address as a param

Make use of nextjs and typescript

pablomadrigal commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’m Pablo Madrigal, I have 7+ years of experience working with React and NextJs. I’m pretty new in the web3 world, I just joined Dojo Coding a couple of weeks ago and have been learning a lot about Cairo and web3 development. Pretty excited to start contributing on Only Dust

How I plan on tackling this issue

Already review the Figma File:I already reviewed the Figma file and I'm pretty sure that is going to be as it is needed
Create the new route: I'm going to create the new route /app/myprofile/{useraddr} in the Next.js project
Work the progress bar: Create a component for the progress bar as needed on the Figma design
Make it responsive: I'm going to ensure the page is responsible and it look great on all the different screen sizes

Benjtalkshow commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @adrianvrj, I’m Benjamin, a JavaScript developer with 4 years of experience and over 18 contributions on OnlyDust | https://app.onlydust.com/u/Benjtalkshow. I specialize in building responsive and user-friendly interfaces using Next.js, Svelte, and more. I’ve previously worked on the transaction details page and blocks details page on the Opscan project, and I’m excited to take on the task of creating the user profile page.

How I plan on tackling this issue

I’ll start by checking out the Figma prototype for the user profile page. This will help me get a clear picture of how everything should look and feel. I plan to set up the route at /app/myprofile/{useraddr}, which will allow us to pull in the user's address as a parameter and display their profile.

For now, my focus will be on nailing down the design. I want to make sure it’s fully responsive and captures the essence of the Figma prototype, including both light and dark modes for a polished look. I’ll also skip adding the navbar for the moment since I know that’s going to be handled separately.

Throughout the process, I’ll stick to the project’s style guide to keep everything consistent with the overall application. I’m planning to use Next.js and TypeScript to ensure the code is clean and easy to maintain, setting us up nicely for any functionality we might want to add later.

Once I’ve wrapped up the design, I’ll share it for feedback. I’m really looking forward to creating a user profile page that not only meets the project requirements but also enhances the user experience. Thanks for the opportunity, and I can’t wait to get started!

Mario-Araya commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

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.

How I plan on tackling this issue

I will create the user profile page at the route /app/myprofile/{useraddr}, ensuring it accepts the user's address as a parameter and excludes the navbar, which will be handled in a separate issue; my focus will be solely on implementing the design based on the Figma prototype without adding any functionality for now.

josephchimebuka commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, 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 follow the decription criteria and ensure that the Add Users Profile page is added. I will conclude it in 2-3 days time

MariangelaNM commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Mariangela. I'm a software developer specializing in front-end development.

How I plan on tackling this issue

Create the Route:
- In the pages/app/ directory, I will create a new dynamic route for the user profile page. This route will capture the user's address from the URL to enable dynamic content loading.
Design the Profile Page:
- I will implement the design of the user profile page based on the Figma prototype provided. My focus will be on accurately reflecting the layout and styling as outlined in the design guide.
Test the Page:
- After the implementation, I will thoroughly test the page to ensure it functions correctly. I will also check for responsiveness across various devices and screen sizes to ensure an optimal user experience.

melnikga commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Can I take this? I’ve participated in almost every ODHack. I have extensive experience in frontend development. I can handle this task.

How I plan on tackling this issue

In all the projects I worked on during ODHacks, I used Next.js, so implementing this page will be easy for me.

My profile on OD: https://app.onlydust.com/u/melnikga

ShantelPeters commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am frontend / blockchain developer with experience in the field UI/UX , i will like to work on this issue kindly assign

How I plan on tackling this issue

i will approach this issue by creating a new page at the route /app/myprofile/{useraddr in the Next.js application, ensuring it serves as the user’s profile page without the navbar, as it will be added separately. The page should accept the user's address as a parameter and focus exclusively on replicating the design elements from the Figma prototype, without implementing any functionality. Familiarity with TypeScript and adherence to the contributor's guide are required for this task.

BDCoy commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I’m Brayan. With over 3 years of experience in development, I am passionate about contributing to open-source projects and currently expanding my skill set with Rust, Cairo, and Solidity as part of my involvement with Dojo Coding. My recent role as a Full Stack Developer allowed me to specialize in a range of technologies including React, NextJs, Node.js, JavaScript, TypeScript, Docker, among many others. I am eager to apply my extensive experience and newly acquired skills to new challenges and innovative projects.

How I plan on tackling this issue

I'll use locofy.ai to quickly replicate the design by converting the Figma layout into code, following the project’s CSS for consistency. This will streamline the process while ensuring design fidelity.

After implementing the design, I’ll focus on making the page responsive by applying media queries and optimizing for all screen sizes. I’ll also test the page across multiple devices and browsers to confirm that it matches the design and functions as expected.

By utilizing locofy.ai and ensuring responsiveness, I’ll efficiently deliver the new fund page aligned with the project’s requirements.

abdegenius commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a skilled fullstack developer with a wealth of experience in both frontend and backend JavaScript as well as my knowledge of Rustlang, With a solid foundation in testing,I have mastered frameworks like Mocha, Chai, and Jest to ensure robust, reliable code in every project. In addition to traditional web development, I have a strong background in blockchain technology, with hands-on experience in Solidity for Ethereum-based smart contracts. Moreover, I have delved into the emerging world of StarkNet, working with Cairo, a cutting-edge language tailored for STARKs, making them a versatile developer capable of bridging both traditional and decentralized web applications.

How I plan on tackling this issue

I will complete the replication of the provided figma design into a nextjs page using typescript, making sure to use component based design and write well documented, commented and bug free code.

chibokaxavier commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm a Full-Stack Developer with over 4 years of experience in building web applications. I specialize in Next.js, React.js, Node.js, Tailwind CSS, and TypeScript, and I've spent the past few years developing everything from sleek, responsive frontends to powerful, efficient backend systems.

What sets me apart is my passion for delivering clean, well-structured code and user-friendly interfaces. I love turning complex problems into elegant, practical solutions. Whether it's crafting dynamic, high-performance applications or integrating robust APIs, I bring a balance of technical know-how and creativity to every project.

How I plan on tackling this issue

Create the Profile Page Component "I will create a new file named UserProfile.tsx inside the pages/app/myprofile directory. This file will serve as the user profile page."

Dynamic Route Setup "Next.js supports dynamic routing, so I will set up the file name as [useraddr].tsx to allow for dynamic user address parameters. This will enable us to access the user address using useRouter() from next/router."

Design the Page Structure "I will refer to the Figma prototype to structure the page layout, including sections for user information such as:

User avatar User details (name, email, etc.) Additional information or actions related to the user's profile." Add Dummy Data for Testing "Since the functionality is not the focus at this stage, I will use dummy data to populate the user profile information, allowing us to visualize the design before implementing the backend logic."

Styling the Page "Using CSS modules or Tailwind CSS, I will style the user profile page to ensure it aligns with the overall design of our application and follows the Figma prototype guidelines."

Render the UserProfile Component "In the UserProfile.tsx file, I will render the profile structure and include the dynamic user address in the page title or header for clarity."

Review and Feedback "Once the design is implemented, I will seek feedback from the team to ensure it meets the design requirements and user expectations."

Rayan9064 commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer and Cairo Developer. I have good experience building web application. I am new to Open Source and want to begin with this project. I am good in React, Next.js, Typescript, Redux and Context APIs. I can leverage the same to make this a better application for the users.

How I plan on tackling this issue

1) Checking the structure of the project and understanding the codebase. 2) Knowing the tech stack required 3) Finding the area of the problem. 3) Understanding the Figma design. 4) Implementing into code. 5) Testing the code by inspecting in different screen size. 6) Modify the code when not working as expected. 7) After successful review, create a pull request.

JoelVR17 commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Create a User Profile Page

Hello Go Stark Me team,

I am Joel Vargas, and I'm a member of Dojo Coding. I also come from OnlyDust.

I would like to request the assignment of the issue to Create a new page which route will be: /app/myprofile/{useraddr}. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Implementation Plan

STEP 1: Review the Figma prototype.
Description: I will analyze the provided Figma prototype to understand the design elements and layout of the user profile page. This will ensure that the new page aligns with the overall design of the dashboard.

STEP 2: Set up the new page route.
Description: I will create a new file [useraddr].tsx in the /pages/app/myprofile/ directory to handle the dynamic route /app/myprofile/{useraddr}. Here’s a basic structure for the new page:

// /pages/app/myprofile/[useraddr].tsx
import React from 'react';

const UserProfilePage: React.FC = () => {
  return (
    <div className="p-6 bg-gray-100">
      <h1 className="text-2xl font-bold">User Profile</h1>
      {/* User profile content will go here */}
    </div>
  );
};

export default UserProfilePage;

STEP 3: Structure the profile page content.
Description: I will layout the structure for displaying the user's profile information, which may include the user's address, profile picture, and other relevant details. Here’s a sample layout:

// /pages/app/myprofile/[useraddr].tsx
import React from 'react';

const UserProfilePage: React.FC = () => {
  const userAddress = "0x123..."; // Placeholder for the user address

  return (
    <div className="p-6 bg-gray-100">
      <h1 className="text-2xl font-bold">User Profile</h1>
      <div className="border rounded-md p-4 bg-white shadow-md">
        <h2 className="text-xl font-semibold">Address: {userAddress}</h2>
        {/* Additional user profile details */}
      </div>
    </div>
  );
};

export default UserProfilePage;

STEP 4: Review and iterate.
Description: After implementing the design, I will conduct a thorough review to ensure that all elements align with the Figma prototype and the overall application style. Feedback will be sought from the team for any necessary adjustments.

Goal

The goal is to create a visually appealing and well-structured user profile page that displays the user’s address and relevant information, while leaving room for future functionality development.

I look forward to your feedback on my approach!

od-hunter commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Please can I be assigned this issue? This would be my first time contributing to this ecosystem and I’d love to be given the opportunity. I am a blockchain Developer, and my experience includes html, css, react, JavaScript,TypeScript and solidity, python and Cairo.

How I plan on tackling this issue

To solve this issue, I'd:

create a new Next.js page at /app/myprofile/[useraddr].tsx
use dynamic routing to extract useraddr from the URL.
design the layout following the Figma prototype, without adding the navbar. I'll focus more on styling and layout, and ignore functionality for now.

Please assign me.

web3wagers / gostarkme