[feat] Add footer component

adrianvrj commented 1 month ago

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

Create a new component which will be shown in the root page of the project, this footer should include:
- Discord channel link
- Github repo link
- Web3 wagers X profile link
All of the links in the footer should be shown with their respective icons.
Knowledge in Nextjs and typescript are recommended.
Figma prototype
Please read contributors guide before asking for an issue.

mexes20 commented 1 month ago

Hello @adrianvrj Can I be assigned to work on this?

onlydustapp[bot] commented 1 month ago

Hi @mexes20! 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.

martinvibes commented 1 month ago

hello @dmirgaleev i am a frontend dev and blockchain developer please can i work on this issue :) and would love to be a contributor

onlydustapp[bot] commented 1 month ago

Hi @martinvibes! 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.

wugalde19 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi team, I’m William from Costa Rica 🇨🇷 and a member of the Dojo Coding community. I am interested in contributing to this issue and believe my skills and background make me well-suited for the task. I’ve worked over 7 years as a Full-Stack engineer in several technologies including the ones used on this project Typescript and NextJs (NextJs mostly on web3 projects that I’ve contributed in both Hackathons and OD Hacks)

Profiles: https://app.onlydust.com/u/wugalde19 https://github.com/wugalde19

How I plan on tackling this issue

The way I’d approach this is by checking the Figma file to understand how to footer should look like. Once I know what needs to be built, then I’ll go and create the new shared component following the figma design specs, add the new links and icons. Once I have it I can put it on the layout file of the site to appear in all the pages

I’m interested in learning more about your team and looking forward to contributing to this project.

martinvibes commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello i am a frontend dev and blockchain developer please can i work on this issue :) and would love to be a contributor

How I plan on tackling this issue

i have experience in this field kindly assign

0xdevcollins commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Collins Ikechukwu. I'm a full stack developer. Nextjs, Cairo, nodej, react.

How I plan on tackling this issue

I will create a footer component, and implement the designs

ridwanalaps commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer with 2 years experience building applications

How I plan on tackling this issue

I will follow the figma design to implement to pixel perfect details and also implement the animations

evgongora commented 1 month 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 #88 as part of ODHack8.0.

I have experience working with Next.js and TypeScript, and I’ve worked on creating components for web applications, including integrating icons and external links. With my background, I’m confident that I can build the footer as per the design specifications from the Figma prototype and ensure that the links are displayed with their respective icons.

How I plan on tackling this issue

I estimate this will take around 1 day to complete. Here’s how I plan to approach the issue:

Review the Figma prototype to get an understanding of the footer design and layout. Create a footer component in Next.js and TypeScript that includes the links for: Discord channel GitHub repo Web3 Wagers X profile Add the appropriate icons next to each link, ensuring the layout and design match the Figma prototype. Focus on responsiveness to make sure the footer displays well across different screen sizes. Perform a self-review to ensure the component is consistent with the design and functions as expected before submitting the PR.

lauchaves commented 1 month 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

d follow this approach

review figma to check how the footer should look ( btw right now there’s no footer component on that figma link ) so id confirm with maintainers how it should look
I’ll confirm if styled components scss or plain css should be used for styling
I’ll develop the component following designs or according to discussions with maintainer
I’ll make sure it’s responsive
Will test everything when finished share demo and screenshots

mexes20 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello I'm a Software Developer with 6 years experience in contributing to Open Source.

I Want to work on this.

ETA: 1 day

mariocodecr commented 1 month 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 implement a new footer component for the root page, which will feature links to the Discord channel, GitHub repo, and Web3 Wagers X profile, each with their corresponding icons, based on the design specified in the Figma prototype, focusing solely on the design aspect for now.

Benjtalkshow commented 1 month 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 and Svelte. I’ve had the chance to contribute to projects like the transaction details page and blocks details page on Opscan, and I’m really ready to take on the challenge of creating a new footer component for Go Stark Me project.

How I plan on tackling this issue

For this task, I’ll be developing a footer that will be displayed on the root page of our project. This footer will include links to our Discord channel, GitHub repository, and the Web3 Wagers X profile, all accompanied by their respective icons to ensure a visually appealing and user-friendly experience.

I’ll start by checking out the Figma prototype to get a clear idea of how the footer should be designed. My focus will be on creating a component that not only looks great but also functions seamlessly, enhancing the overall user experience.

I’ll make sure to adhere to the project’s style guide to maintain consistency with the existing design. Using Next.js and TypeScript will allow me to write clean, maintainable code, setting the stage for any future enhancements.

Once the footer component is ready, I’ll share it for feedback. I’m really looking forward to contributing to ODHack 8.0 and creating a footer that will serve as a helpful resource for our users in this Go Stark Me project. Thank you. I can’t wait to get started.

josephchimebuka commented 1 month 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 footer component is added. I will conclude it in 2-3 days time

melnikga commented 1 month 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

wheval commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

GM, I'm wheval a frontend developer with multiple experience converting figma designs into pixel perfect responsive websites. I have a design background before i became a developer. Coupled with my other experiences working with nextjs' app router, i will deliver this issue perfectly well and on time.

How I plan on tackling this issue

Following the contributors' guide, I will begin by forking the repository and creating a new branch using a command like git checkout -b feat/footer from the dev branch.

In the gostarkme-web directory, under the components folder, I will create a new folder named footer and within it, a Footer.tsx file for the footer component. I will reference the Figma files to extract the brand colors and import the logo from public/icons/starklogo.png.

The footer design will be responsive, adhering to the brand’s colors. I will source the icons (in SVG format) for Discord, X, and GitHub, placing them in the public/icons folder. To ensure optimal performance, I will use next/image for the icon imports. I will also reach out to the maintainers to confirm the correct URLs for each link.

I estimate that completing this task will take one day. I will make regular commits for every change and push the final version to my forked repository, submitting a pull request to the dev branch once done.

For any further clarifications, I will reach out to Adrian on Discord. Thank you.

Solomonsolomonsolomon commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

FULLSTACK developer, 3+ years, I have contributed on various open source projects and i have developed a footer for starkludo

How I plan on tackling this issue

I will create a pixel perfect footer component following the figma design,ensuring footer is always at the bottom of the screen irrespective of content size.ETA 24h

abdegenius commented 1 month 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.

fabrobles92 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 engineer with experience in Next Js, Vue and plain react, also I have plenty of contribution to web3 projects where that experience can help me deliver a quality solution

How I plan on tackling this issue

Create a footer component

chibokaxavier commented 1 month 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 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 Footer Component "I will create a new file named Footer.tsx within the components directory of our Next.js project. This will serve as the footer for the root page."

Add Links and Icons "In the Footer component, I will include the following links:

Discord channel link GitHub repository link Web3 Wagers X profile link Each link will be paired with its respective icon for visual clarity." Use Icon Libraries "I’ll utilize an icon library such as Font Awesome or React Icons to ensure that the icons are visually appealing and easily recognizable."

Style the Footer "Using CSS modules or Tailwind CSS (if applicable), I’ll style the footer to match our project’s overall design aesthetic, ensuring it is responsive and visually aligned with the Figma prototype."

Render the Footer in the Root Page "I will include the Footer component in the index.tsx file (or the main layout file) to display it on the root page of the project."

Review and Test "After implementing the footer, I will test the links to ensure they redirect correctly and verify that the icons are displayed properly."

Mobarak786 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a mern stack developer having 2 years of experience. I built many projects from scratch from figma. I have developed backend that can be scale using docker, aws. Recently i am doing contribution to blockchain projects.

How I plan on tackling this issue

1) create a Footer.tsx page in the src directory. 2) Add the link using respective icons. 3) make the components responsive in all device. 4) making the component scalable for future.

Rayan9064 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 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 game 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) Observe 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 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Create a Footer Component for the Root 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 component for the footer. 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 examine the provided Figma prototype to understand the design and layout of the footer component, ensuring that my implementation aligns with the overall design.

STEP 2: Create the Footer component.
Description: I will create a new file Footer.tsx in the /components/ directory. This component will include links to the Discord channel, GitHub repository, and Web3 Wagers X profile, along with their respective icons. Here’s an example of how the component might look:

// /components/Footer.tsx
import React from 'react';
import { FaDiscord, FaGithub, FaGlobe } from 'react-icons/fa';

const Footer: React.FC = () => {
  return (
    <footer className="flex justify-around items-center p-4 bg-gray-800 text-white">
      <a 
        href="https://discord.gg/example" 
        target="_blank" 
        rel="noopener noreferrer" 
        className="flex items-center space-x-2"
      >
        <FaDiscord />
        <span>Discord</span>
      </a>
      <a 
        href="https://github.com/example/repo" 
        target="_blank" 
        rel="noopener noreferrer" 
        className="flex items-center space-x-2"
      >
        <FaGithub />
        <span>GitHub</span>
      </a>
      <a 
        href="https://web3wagersx.com/example" 
        target="_blank" 
        rel="noopener noreferrer" 
        className="flex items-center space-x-2"
      >
        <FaGlobe />
        <span>Web3 Wagers X</span>
      </a>
    </footer>
  );
};

export default Footer;

STEP 3: Integrate the Footer component into the root page.
Description: I will import and include the Footer component in the main layout or root page of the project (e.g., in pages/_app.tsx or pages/index.tsx), ensuring that it appears consistently across the application.

// /pages/_app.tsx
import React from 'react';
import Footer from '../components/Footer';

const MyApp = ({ Component, pageProps }) => {
  return (
    <div className="flex flex-col min-h-screen">
      <Component {...pageProps} />
      <Footer /> {/* Adding the Footer here */}
    </div>
  );
};

export default MyApp;

STEP 4: Review and iterate.
Description: After implementing the Footer component, I will review the design and functionality to ensure all links and icons are displaying correctly. Feedback will be sought from the team for any necessary adjustments.

Goal

The goal is to create a functional and visually appealing footer that includes links to important resources with icons, enhancing the overall user experience.

I look forward to your feedback on my approach!

web3wagers / gostarkme