[feat] Add fund details page

adrianvrj commented 2 months ago

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

Create a new page which route will be: /app/fund/{fundid}, this page should be the fund details page, please note that there are two different scenarios for this page depending on the funding state, please handle both scenarios.
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.

martinvibes commented 2 months 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 2 months 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.

Jemiiah commented 2 months ago

I’d love to contribute to this issue @adrianvrj

onlydustapp[bot] commented 2 months 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.

vickiddev commented 2 months ago

hello @dmirgaleev please can i work on this issue :) and would love to be a contributor

wugalde19 commented 2 months 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/fund/{fundid}, on that new page I’ll add the two different scenarios depending on the funding state.

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

sasasamaes commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

JavaScript developer with 5+ years of experience involved in the full software development lifecycle. My experience includes providing IT solutions for enterprises using JavaScript, React, TypeScript, Node.js, and MongoDB. Additionally, I am expanding my knowledge in Web3 technologies, particularly in Cairo and Solidity.

I am also a community leader and sensei at Dev.f, where I mentor and lead a vibrant community of developers and am a Dojo Coding Member.

My areas of interest include Web3, frontend, backend, and full-stack development.

How I plan on tackling this issue

Hi, please can I be assigned to this issue, practically the steps are in the description I am a Member of Dojo Coding and this could be my first issue

Ayoazeez26 commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer with 6 years experience building applications

How I plan on tackling this issue

With my existing knowledge of react and typescript, I will follow the design and implement to pixel perfect details ETA - 48hours

martinvibes commented 2 months 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

To tackle the add fund details page issue:

Review Requirements: Understand the page should be at /app/fund/{fundid} and handle two scenarios based on funding state.

Check Figma Prototype: Refer to the Figma design for layout and visual elements.

Set Up the Page: Create a new Next.js page using dynamic routing ([fundid].tsx).

Develop Layout: Implement the design structure and styles as per the Figma prototype.

Handle Scenarios: Add conditional rendering for the two funding states, using placeholders for now.

Test the Design: Ensure the page renders correctly and matches the design.

0xdevcollins commented 2 months 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

Create the Route: Set up a new Next.js page at /app/fund/[fundid].
Design the Layout: Refer to the Figma prototype for the dashboard design. Implement the structure using nextjs components and styled appropriately.
Handle Funding States: Define two components or conditional rendering within the page to display the fund details based on its state.
TypeScript Integration: Ensure proper TypeScript types are used for props and state management.
Review Guidelines: Before starting, review the contributors' guide for any specific coding standards or practices.

Benjtalkshow commented 2 months 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 nextjs, svelt etc, I have implemnted transaction details page and blocks details page on opscan project and I’m excited to take on the development of the fund details page.

How I plan on tackling this issue

I’ll start by thoroughly checking out the Figma prototype to understand how the dashboard and fund details page should look for both funding states. My goal is to make sure everything aligns perfectly with the design.
I’ll create the new route at /app/fund/{fundid} in Next.js, making sure to handle the dynamic fundid so we can display the right details for each fund.
Build the Fund Details Page :

Since there are two different states for the page depending on the funding status, I’ll design it to adapt to each scenario. I’ll implement conditional rendering to ensure both states are clearly represented and visually appealing, just like in the Figma design. I’ll create a fully responsive and polished UI that incorporates all the necessary elements for both funding states, without worrying about functionality just yet.

I’ll closely follow the project’s style guide to ensure that the new page matches the overall look and feel of the application, providing a seamless user experience.

evgongora commented 2 months 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 #94 as part of ODHack8.0.

I have experience working with Next.js and TypeScript, which aligns well with this issue's requirements. I also have experience integrating Figma designs into web applications and am confident in translating the design to code efficiently. My background in web development and previous work with similar UI components will allow me to ensure that the page meets expectations while following best practices.

How I plan on tackling this issue

I estimate this will take around 2 days to complete. Here's how I will approach the task: Review the Figma prototype to thoroughly understand the layout and visual design of the fund details page. Set up the route /app/fund/{fundid} in the Next.js project to dynamically handle the fund ID. Design the page for both funding states, ensuring that both scenarios are visually implemented based on the Figma design. Focus on styling and layout to ensure the page is responsive and consistent with the Figma prototype, without adding functionality. Self-review for consistency and ensure all design elements are correctly implemented before submitting the PR for review. Excited to start working on this issue!

josephchimebuka commented 2 months 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 fund details page is added. I will conclude it in 2-3 days time

melnikga commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

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 commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Fullstack developer 3+ years

How I plan on tackling this issue

Create the components and style it using the figma design as guideline, then route it to /app/fund/{fundid}

BDCoy commented 2 months 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 2 months 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 2 months 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

Step 1: Set up Routing I will create a new page with a dynamic route:

I will create a file called pages/app/fund/[fundid].tsx. This file will handle the dynamic fundid parameter in the URL for specific fund details.

Step 2: Basic Layout I will use the common dashboard layout as per the Figma design:

I will ensure this page inherits the layout with navigation and the top bar, following the dashboard structure from the Figma design.

Step 3: Design for Two Scenarios I will create two different layouts for the fund details page based on the funding state:

Scenario 1 (Active Fund): I will display a progress bar showing the amount contributed so far. I will show details like the fund’s name, current funding, target amount, etc. I will include a button for users to contribute more (following the Figma styling). Scenario 2 (Closed Fund): I will display the final summary (total amount raised). I will not show the contribution button. I will add any relevant statistics or closing statements about the fund.

Step 4: Conditional Rendering Based on Fund Status I will use conditional rendering to switch between the two layouts based on the fund’s state (active or closed).

I might mock or eventually fetch the fund’s status from an API, but for now, I will focus only on displaying the UI.

Step 5: Follow Figma for Styling I will ensure that the design matches the Figma prototype in terms of spacing, colors, typography, and layout.

I will use Tailwind CSS (or any other styling method I prefer) to match the design elements.

Step 6: Skip Functionality for Now I will not worry about making the buttons or other elements functional yet. My focus will be purely on getting the design and layout as per the Figma file.

Rayan9064 commented 2 months 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.

ShantelPeters commented 2 months ago

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 , coupled with my other experiences working with next.js'app router , i can deliver this issue well and in good timing also .

How I plan on tackling this issue

I will begin by creating a new page with the route /app/fund/{fundid} in Next.js. And then use the Figma design to implement two scenarios based on the funding state, focusing only on the UI. No functionality is needed at this stage. Lastly i will follow the contributor guidelines for the project.

JoelVR17 commented 2 months 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 fund details page. This will ensure that the new page aligns with the design of the dashboard.

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

// /pages/app/fund/[fundid].tsx
import React from 'react';

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

export default FundDetailsPage;

STEP 3: Handle different funding states.
Description: I will create a component to manage the different scenarios based on the funding state (e.g., active, completed). This component will be included in the FundDetailsPage. Here’s an outline of how this might look:

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

interface FundDetailsProps {
  state: 'active' | 'completed'; // Example states
}

const FundDetails: React.FC<FundDetailsProps> = ({ state }) => {
  return (
    <div className="border rounded-md p-4 bg-white shadow-md">
      {state === 'active' && (
        <div>
          <h2 className="text-xl font-semibold">Active Fund</h2>
          {/* Active fund details go here */}
        </div>
      )}
      {state === 'completed' && (
        <div>
          <h2 className="text-xl font-semibold">Completed Fund</h2>
          {/* Completed fund details go here */}
        </div>
      )}
    </div>
  );
};

export default FundDetails;

STEP 4: Integrate the component into the fund details page.
Description: I will integrate the FundDetails component into the FundDetailsPage, passing the appropriate funding state as a prop.

// /pages/app/fund/[fundid].tsx
import React from 'react';
import FundDetails from '../../components/FundDetails';

const FundDetailsPage: React.FC = () => {
  const fundState: 'active' | 'completed' = 'active'; // Placeholder for the example

  return (
    <div className="p-6 bg-gray-100">
      <h1 className="text-2xl font-bold">Fund Details</h1>
      <FundDetails state={fundState} />
    </div>
  );
};

export default FundDetailsPage;

STEP 5: 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 fund details page that accommodates different funding states, setting the stage for future functionality development.

I look forward to your feedback on my approach!

adrianvrj commented 1 month ago

Close as completed by #97

web3wagers / gostarkme