[feat] Add app navbar

[adrianvrj]

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

• When going to the funding application, there will be a common navbar for all routes, add the necessary code to create the component that will be used as the navbar. The navbar should look like this:

  Please do not add any functionality since this will be part of another story once the full design of the web application is finished.

• Knowledge in Nextjs and typescript are recommended.

• Please read contributors guide before asking for an issue.

[raizo07]

Hello I want to work on this

ETA: One day max.

[onlydustapp[bot]]

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

[Jemiiah]

I would love to work on this @adrianvrj

[onlydustapp[bot]]

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.

[martinvibes]

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]]

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.

[onlydustapp[bot]]

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

[sanieni6]

Hey @adrianvrj. i'm gonna be glad to work on this😄 I work as a React developer and I use Next.js in my daily basis My approach: I’ll start by creating a reusable Navbar component using Next.js and TypeScript, following the design provided. I will ensure that the component structure is modular and adheres to best practices, making it easy to integrate functionality in the future.

[onlydustapp[bot]]

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

[coxmars]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a software developer with 2+ years of experience and I have worked with backend technologies such as Cairo, Java, C# and frontend with React, NextJS, JS/TS. Also, I'm a member of the Dojo Coding community here in CR and I have made contributions in Cairo VM Go, Cairo VM TS, Cairo Lints etc.

How I plan on tackling this issue

1- I’ll review the contributor guide and any existing components to ensure the navbar follows the project’s structure and styling conventions. 2- I’ll create a reusable Navbar component using Next.js and TypeScript, ensuring it matches the design provided in the image. 3- I’ll make sure the component is responsive and can be easily integrated into all routes, without adding any functionality as specified. 4- Finally, I’ll test the component across different routes to verify that it works as intended visually.

[sanieni6]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi! My name is Luis Sanchez, and I’m a Frontend Developer with 3 years of experience, specializing in TypeScript, React, and Next.js. I am a Dojo coding member and i would be happy to contribute to this project. I work as a React developer and I use Next.js in my daily basis

How I plan on tackling this issue

I’ll start by creating a reusable Navbar component using Next.js and TypeScript, following the design provided. I will ensure that the component structure is modular and adheres to best practices, making it easy to integrate functionality in the future.

[martinvibes]

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

this issue is easy to tackle please kindly assign :)

[sanieni6]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Note: TRYING AGAIN BECAUSE OF A ONLYDUST ISSUE

Hi! My name is Luis Sanchez, and I’m a Frontend Developer with 3 years of experience, specializing in TypeScript, React, and Next.js. I am a Dojo coding member and i would be happy to contribute to this project. I work as a React developer and I use Next.js in my daily basis

How I plan on tackling this issue

I’ll start by creating a reusable Navbar component using Next.js and TypeScript, following the design provided. I will ensure that the component structure is modular and adheres to best practices, making it easy to integrate functionality in the future.

[raizo07]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @adrianvrj I'll like to be assigned to work on this.

I'm a software Dev with over four years experience and have worked on a couple of projects here.

I estimate this will take 6-8 hours to complete.

How I plan on tackling this issue

•   I will set up a new Navbar component.
• I'll also ensure it is compatible with all routes in the funding application.
•   Then I'll create a responsive layout using CSS or a suitable styling framework (e.g., Tailwind CSS, styled-components).
•   The Navbar will be a static component with no dynamic functionality, based on the issue’s requirements.

then finally make sure that the Navbar component renders correctly across various routes.

[CollinsC1O]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello I'm a front-end and a blockchain developer and i will love to work on this

[Benjtalkshow]

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’m really passionate about creating responsive and user-friendly interfaces, especially with tools like Next.js and Svelte. Having worked on the transaction details and blocks details pages for Opscan, I’m excited about the chance to help out with the navbar for Go Stark Me Project.

How I plan on tackling this issue

For this task, I’ll be putting together a common navbar that will be used across all routes in our application. I’ll take a good look at the design you provided in the image to ensure it looks just right. My goal is to make it visually appealing and seamless with the rest of the site. I’ll also focus solely on the design aspect for now, so I won’t be adding any functionality just yet. That’ll come later, once we have the full design laid out.

I’ll make sure to stick to the project’s style guide so that everything stays consistent. Using Next.js and TypeScript will help me keep the code clean and easy to maintain, which I know is important for future updates.

[GoSTEAN]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience in frontend development using Next.js and TypeScript, along with a solid understanding of component-based architecture. I've built reusable components and styled them according to design specifications in various web applications. This experience will allow me to create a scalable and efficient navbar for your project while following best practices.

How I plan on tackling this issue

I would begin by reviewing the contributor's guide to ensure alignment with project standards. Next, I would create a reusable and responsive Navbar component in Next.js using TypeScript. I would follow the provided design closely to match the visual layout and ensure that it can be easily extended in future tasks. Functionality will be left out, as per the requirement, and I will focus purely on structure and design.

[wheval]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I’m Wheval, a frontend developer with extensive experience in translating Figma designs into pixel-perfect, responsive websites. Recently, I developed a dashboard UI for a web3 startup, converting their Figma design using React and TailwindCSS. I also participated in a challenge on X (formerly Twitter), where I built an interactive dashboard leveraging Next.js and TypeScript. Coupled with my experience working with Next.js' app router, I am confident in delivering this task efficiently and within a short timeframe.

How I plan on tackling this issue

To address this issue, I will follow the contributors' guide meticulously. I will begin by forking the repository and creating a new branch using a command such as git checkout -b feat/navbar from the dev branch.

In the gostarkme-web directory, under the components folder, I will create a new folder named navbar. Inside this folder, I will create the Navbar.tsx file, which will serve as the navbar component. The logo will be imported from the public/icons/starklogo.png directory, and I will import the LinkButton component from the components/ui/ directory for the "Connect Wallet" button.

I estimate this task will take one day to complete. I will make frequent commits for every significant change. Once finished, I will push the updates to my fork and submit a pull request to the dev branch.

If there are any questions or clarifications needed along the way, I will reach out to Adrian on Discord. Thank you for the opportunity.

[josephchimebuka]

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 app navbar is added. I will conclude it in 2-3 days time

[MariangelaNM]

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

My first step will be to thoroughly review the contributor’s guide to ensure I adhere to the project’s coding standards, design principles, and best practices. Once aligned, I will proceed to develop a reusable, responsive Navbar component in Next.js using TypeScript. This component will be crafted to ensure it integrates seamlessly with the rest of the application while maintaining a high degree of modularity for future scalability. I'll pay close attention to responsiveness and adaptability across different screen sizes, following the provided design meticulously to capture the exact visual appearance and user experience.

In addition, I will document the component's structure and styling choices, making it easier for other developers to understand and extend its functionality in subsequent iterations. Since the current focus is solely on the layout and design, I will omit any interactive features or dynamic functionality, as per the project’s requirements. My goal is to deliver a well-structured, visually accurate component that can be effortlessly enhanced in the future.

[melnikga]

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

[Solomonsolomonsolomon]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Fullstack typescript developer

How I plan on tackling this issue

Easy issue,I will create a Navbar component and style it accordingly

[abdegenius]

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]

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 qulaity solution

How I plan on tackling this issue

I would add the necessary tailwind classes to create the component and then create a pluggable react component and then add it in page.tsx so it always appear in different screens

[chibokaxavier]

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

Step 1: Create the Navbar Component I will create a new component for the navbar:

I will create a file called components/Navbar.tsx. This will house the navbar component that will be used across all routes.

Step 2: Define the Structure I will outline the structure of the navbar according to the design:

I will analyze the provided image to determine the layout, such as the placement of the logo, navigation links, and any icons. I will create a basic HTML structure within the component, using semantic elements like

,

, and
• to represent the links.

  Step 3: Style the Navbar I will ensure the navbar matches the visual design:

  I will apply CSS classes, likely using Tailwind CSS (or my preferred styling method), to achieve the look and feel depicted in the image. I will consider aspects like spacing, colors, hover effects, and font styles to ensure consistency with the overall design.

  Step 4: Add Placeholder Links While I will not implement any functionality, I will add placeholder links:

  I will create components for navigation, providing dummy paths that reflect the intended routes (e.g., Home, My Funds, etc.). I will ensure these links are visually represented as buttons or menu items in the navbar.

  Step 5: Responsive Design I will make sure the navbar is responsive:

  I will implement responsive design practices, ensuring the navbar adjusts correctly on different screen sizes. I might include a hamburger menu icon for mobile views, though without functionality for now.

  Step 6: Follow Best Practices I will ensure the code follows best practices:

  I will use TypeScript to type any props or state if necessary, although it may be minimal for this component. I will adhere to any coding standards outlined in the contributors' guide to maintain consistency in the project.

  Step 7: Embed in Layout File If there is a layout file in Next.js, I will embed the navbar there:

  I will look for an existing layout file, typically located in pages/_app.tsx or a similar structure. I will include the component within the layout file so that it appears consistently across all pages.

  Step 8: Skip Functionality for Now I will refrain from adding any functionality:

  The focus will be solely on the design and structure of the navbar, deferring any interactive elements or routing logic to a later development stage.

[Rayan9064]

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]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Create a Navbar Component for the Funding Application

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 common Navbar component for the funding application. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Implementation Plan

STEP 1: Review the design specifications.
Description: I will analyze the provided image to understand the layout, colors, and styles required for the navbar component, ensuring that my implementation aligns with the intended design.

STEP 2: Create the Navbar component.
Description: I will create a new file Navbar.tsx in the /components/ directory. The component will include the necessary structure and classes from Tailwind CSS to match the design. Here’s an example of how the component might look:

// /components/Navbar.tsx
import React from 'react';

const Navbar: React.FC = () => {
  return (
    <nav className="flex justify-between items-center p-4 bg-gray-900 text-white">
      <div className="text-lg font-bold">Logo</div>
      <div className="space-x-4">
        <a href="/app" className="hover:text-gray-400">Home</a>
        <a href="/app/newfunding" className="hover:text-gray-400">New Funding</a>
        <a href="/app/myprofile" className="hover:text-gray-400">My Profile</a>
        <a href="/app/fund" className="hover:text-gray-400">Fund</a>
      </div>
    </nav>
  );
};

export default Navbar;

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

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

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

export default MyApp;

STEP 4: Review and iterate.
Description: After implementing the Navbar component, I will review its appearance and ensure it matches the design specifications. I will seek feedback from the team for any necessary adjustments.

Goal

The goal is to create a visually appealing and responsive Navbar that will serve as a consistent navigation element across the funding application without any added functionality at this stage.

I look forward to your feedback on my approach!