[feat] Add New Fund page

adrianvrj commented 1 month ago

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

Create a new page which route will be: /app/newfunding, this page should be the new fund page, please note that there are two different stages in this form like page, please develop both of those stages.
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.

Ayoazeez26 commented 1 month ago

Hi @adrianvrj can I work on this?

onlydustapp[bot] commented 1 month ago

Hi @Ayoazeez26! 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 commented 1 month ago

I’d love to contribute to this @adrianvrj

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 @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 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 the components and how the page should look like. As you guys mentioned in the issue description, the implementation will be pure UI components without any functionality yet. Once I know what needs to be built, then I’ll go and create the new route (folder and page.tsx) for /app/newfunding, on that new page I’ll add the two stages of the form.

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

BernalHQ commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, my name is Bernal, and I’m a software developer with four years of experience. I’m passionate about contributing to projects and learn, and I would love the opportunity to contribute to this project

How I plan on tackling this issue

First, I will verify the design in the Figma file to ensure alignment with the project’s requirements. Then, I’ll build the Fund page in the project. Afterward, I’ll run UI tests to confirm that everything is working as expected.

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 an app/newfunding/page.tsx Implement the UI, making sure develop the two stages on the form and following best practices.

addegbenga 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 engineer with over 5 years experience building web apps.

How I plan on tackling this issue

I will tackle this problem by creating a newfunding page.

creating the form stages based on the figma design.
Also adding basic frontend validation
Make sure this pages are responsive across all screen size.
The styling of this pages will follow the existing UI component. ETA: 42hrs

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

I already review the Figma file. So I will create a new page on Next with the form using the 2 steps shown on the design, using tailwind

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 would approach this task by creating a new page with the route /app/newfunding, which will serve as the new fund page featuring two distinct stages as outlined in the Figma prototype for the dashboard. My focus would be solely on replicating the design elements without implementing any functionality at this stage. Given the requirement for knowledge in Next.js and TypeScript, I would ensure that the page is built using these technologies while adhering to the project's contributor guidelines before seeking further assistance or clarification on the issue.

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 crafting responsive and user-friendly interfaces using Next.js and Svelte, and I’m excited about the chance to work on the new funding page for Go Stark Me project.

How I plan on tackling this issue

For this task, I’ll be creating a page at the route /app/newfunding, which will be our new fund page. I see that there are two different stages in the form layout, and I’ll make sure to develop both of those stages to match the design you provided in the Figma prototype.

Right now, my main focus will be on nailing the design no need to worry about functionality just yet. I want to ensure that the layout looks great and is user-friendly before we add any interactive elements. I’ll be keeping the Figma design close by to make sure I capture all the details just right.

With my experience in Next.js and TypeScript, I’m confident I can set up a clean and organized structure for the code. I’ll also stick closely to the contributors guide to ensure everything aligns with our project’s style.

Once I wrap up the design for the new funding page, I’ll share it with you for feedback.

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 ensure that all the desccriptions are met by adding the required page in 2-3 days time

MariangelaNM commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Mariangela, a software developer specializing in front-end development. I have a passion for creating intuitive and dynamic user interfaces that enhance the user experience

How I plan on tackling this issue

Create the Route:
- In the /app/newfunding directory, I will create a new dynamic route for the New Fund page . This route will capture the user's address from the URL to enable dynamic content loading.
Design the New Fund page:
- I will implement the design of the Fund 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 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

ShantelPeters commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a blockchain developer, i am also an active contributor, i am avaliable to work kindly assign me.

How I plan on tackling this issue

I will approach the problem by creating a new page at the route /app/newfunding in the Next.js application, implementing the design for both stages of the funding form as outlined in the Figma prototype. Focus solely on the visual aspects without implementing functionality, ensuring the design aligns with the existing dashboard layout. Familiarity with TypeScript and adherence to the contributor's guide are essential for this task.

Solomonsolomonsolomon commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Fullstack typescript developer 3+ years

How I plan on tackling this issue

I will create a new page and route it to /app/newfunding using next ts. I'll use the figma design to ensure pixel perfect designs

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

Design Implementation: I'll use locofy.ai to quickly replicate the design by converting the Figma layout into code, ensuring I follow the project’s CSS. This will speed up the process and help maintain consistency with the existing styles.
Responsiveness: Once the design is implemented, I will ensure that the page is responsive across all devices by adding media queries and optimizing for different screen sizes.
Testing: Finally, I'll thoroughly test the page on various devices and browsers to ensure that everything matches the design and works as expected.

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.

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 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 New Funding Page Component "I will create a new file named NewFunding.tsx inside the pages/app directory. This file will serve as the new funding page."

Multi-Step Form Structure "I will implement the two stages by using state management in React. I will create a local state, like currentStage, to track which stage of the form is currently active and render different components accordingly."

Design the Two Stages "Based on the Figma prototype, I will design the layout for both stages:

Stage 1: This stage might include input fields for entering basic funding details such as fund name, amount, or investment type. Stage 2: This stage will likely include more detailed information about the fund or confirmation of the input provided in the first stage." Dummy Data for Visualization "Since functionality is not the focus yet, I will use dummy data to simulate user input, ensuring that the design renders correctly for both stages."

Stage Navigation "I will implement 'Next' and 'Back' buttons to allow users to navigate between the two stages. These buttons will update the currentStage state to show the appropriate stage."

Styling the Form "I will use either CSS modules or Tailwind CSS for styling, following the design guidelines in the Figma prototype to ensure visual consistency."

Mobile Responsiveness "I will ensure the page is mobile-responsive, following modern design best practices to provide a good user experience across devices."

Component Breakdown "To keep the code clean and maintainable, I will break down the stages into separate components, like StageOne and StageTwo, and then conditionally render them based on the current stage."

Review and Feedback "Once the design is implemented, I will seek feedback from the team to ensure it aligns with the Figma prototype and meets the design expectations."

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 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) 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 New Funding 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/newfunding. 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 dashboard page. This will ensure that the new funding page is visually consistent with the rest of the application.

STEP 2: Set up the new page route.
Description: I will create a new file newfunding.tsx in the /pages/app/ directory to handle the /app/newfunding route. Here’s a basic structure for the new page:

// /pages/app/newfunding.tsx
import React from 'react';
import NewFundingForm from '../components/NewFundingForm';

const NewFundingPage: React.FC = () => {
  return (
    <div className="p-6 bg-gray-100">
      <h1 className="text-2xl font-bold">New Funding</h1>
      <NewFundingForm />
    </div>
  );
};

export default NewFundingPage;

STEP 3: Create the funding form component.
Description: I will develop a reusable component named NewFundingForm to handle the two stages of the funding process. The component will be placed in /components/NewFundingForm.tsx. Here’s an outline of how the component structure might look:

// /components/NewFundingForm.tsx
import React, { useState } from 'react';

const NewFundingForm: React.FC = () => {
  const [stage, setStage] = useState(1); // 1 for stage one, 2 for stage two

  const handleNext = () => {
    if (stage < 2) setStage(stage + 1);
  };

  return (
    <div className="border rounded-md p-4 bg-white shadow-md">
      {stage === 1 && (
        <div className="stage-one">
          <h2 className="text-xl font-semibold">Stage One</h2>
          {/* Stage One Fields */}
          <input type="text" placeholder="Funding Amount" className="border rounded-md p-2 mt-2 w-full" />
          <button 
            onClick={handleNext} 
            className="mt-4 bg-blue-500 text-white rounded-md p-2 hover:bg-blue-600"
          >
            Next
          </button>
        </div>
      )}
      {stage === 2 && (
        <div className="stage-two">
          <h2 className="text-xl font-semibold">Stage Two</h2>
          {/* Stage Two Fields */}
          <input type="text" placeholder="Project Name" className="border rounded-md p-2 mt-2 w-full" />
          <button 
            className="mt-4 bg-green-500 text-white rounded-md p-2 hover:bg-green-600"
          >
            Submit
          </button>
        </div>
      )}
    </div>
  );
};

export default NewFundingForm;

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 new funding page that aligns with the existing design of the application, laying the groundwork for future functionality development.

I look forward to your feedback on my approach!

jsandinoDev 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 fullstack developer from Costa Rica, member of Dojo Coding I have experience working with JavaScript, React, TypeScript, Cairo, Next.js, Node.js.

How I plan on tackling this issue

I will create the new component based in the Sigma prototype.

web3wagers / gostarkme