[feat] Add Dashboard 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, this page should be the dashboard page, please do not add the navbar since the navbar will be created separately in another issue.
Take a look at the figma to see how the dashboard page looks like. Figma prototype
Add a component called funds which will be the component used to display the funds as cards. Add dummy data to see the actual output of this component.
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 1 month ago

@adrianvrj i would love to work on this issue I’ma frontend web3 developer I have contributed to previous OD Hack and would love to contribute to this repo

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.

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.

MPSxDev commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I am Manuel, a process engineer and web3 developer. I have participated in Starknet Bootcamps and am an Elite winner of Speedrunstark. I have a high capacity to solve problems. I am a member of the DojoCoding community. I hope this issue is assigned to me. I am available to work immediately to achieve what is required in the shortest time possible.

How I plan on tackling this issue

To accomplish the required tasks, the following will be done:

Review the Figma prototype to understand the dashboard page design.
Create a new page at the /app route that will serve as the dashboard.
Create a component called Funds that will display the funds as cards.
Add dummy data to visualize the design of the Funds component.

Dprof-in-tech commented 1 month 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 new /app route:

This will be the dashboard page as specified in the issue. I'll ensure the route is set up within the Next.js project following the standard Next.js routing conventions. I will confirm that no navbar is included in this page since it's being addressed separately.

I will review the Figma prototype: I’ll study the provided design on Figma to ensure the dashboard's layout and styling match the expected outcome. I'll take note of the structure and components outlined.

I will add a Funds component: The Funds component will be responsible for displaying the funds on the dashboard. For now, I will hardcode some dummy data to visualize how the funds will be displayed. This will help ensure the design elements are functioning correctly.

I will focus solely on design: At this stage, I will not worry about functionality or data integration. The priority is to get the look and feel of the dashboard page as close to the design as possible, using placeholder content where necessary.

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

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

Create a dashboard page in the app directory. Make sure the page matches the figma design. Work on the responsiveness. ETA: 42hrs

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

Create the Route: Set up a new Next.js page at /app/page.tsx.
Design the Layout: Reference the Figma prototype to structure the dashboard page accordingly.
Develop the Funds Component: Create a Funds component that displays fund cards. Use dummy data to simulate the card display.
Styling and Structure: Ensure the component styling matches the Figma design while keeping it responsive.
TypeScript Types: Implement TypeScript for props and dummy data to maintain type safety.
Review Guidelines: Check the contributors' guide for any relevant instructions before starting.

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 love creating responsive and user-friendly interfaces, particularly with Next.js and Svelte. I’ve previously worked on the transaction details page and blocks details page for the Opscan project, and I’m really excited about the opportunity to develop the dashboard page.

How I plan on tackling this issue

I’ll be setting up a new page at the route /app, which will serve as our dashboard. I’ll dive into the Figma prototype to get a solid understanding of how the dashboard should look and feel. My goal is to bring that design to life while ensuring it’s fully responsive across different devices.

I’ll also be adding a component called Funds that will display the funds as cards on the dashboard. To help visualize how this component will come together, I plan to use some dummy data so we can see how everything will look in action. For this initial phase, I’ll focus purely on the design aspect, leaving the functionality for later.

I’ll try as much as possible to follow the project’s style guide to keep everything uniformed with the rest of the application. By utilizing Next.js and TypeScript, I aim to write clean and maintainable code that sets us up well for future development.

wheval commented 1 month ago

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 multiple experience converting figma designs into pixel-perfect and responsive websites. Recently, I worked on a project where I built a dashboard UI for a web3 startup from their figma design using react and tailwindcss. I have also participated in a X/Twittter challenge where I built an interactive dashboard using Nextjs and typescript. Coupled with my other experiences workig with nextjs' app router, I can deliver this issue perfectly well and also with within short time.

How I plan on tackling this issue

To create the dashboard page, I would follow these simple steps. Step 1: I will fork the repository and create a new branch using git checkout -b feat/dashboard from the dev branch.

Step 2: I will create a new route for /app by adding an app folder in the app directory. Inside this folder, I will create a page.tsx file, which will contain the code implementation for the dashboard.

Step 3: I will create the Fund.tsx component in the components/ui/ folder to display funds as cards. The component will accept tag, title, description, and isPromoted as arguments, and I will pass dummy data because functionality would be handled later.

Step 4: I will import the Funds component into the dashboard component inside the app directory to ensure it integrates seamlessly. I will not implement the navbar, as it will be handled by another issue.

Step 5: I will obtain the necessary design images and icons from the Figma file and store them in the public/images and public/icons directories. I would ensure to perfectly replicate the figma design.

Step 6: I will test the page to ensure the dashboard renders correctly with the dummy data and is responsive.

I estimate this will take one day to complete. I will commit every change incrementally and push the updates to my fork. Once completed, I will submit a pull request to the dev branch. For any further questions, I will reach out to Adrian on Discord. Thank you.

josephchimebuka commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @lukaspetrasek 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 Dashboard page is added. I will conclude it 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 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 Add Dashboard page:
- I will implement the design of the Add Dashboard 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.

Solomonsolomonsolomon commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Fullstack ts dev

How I plan on tackling this issue

I'll style based on figma design and route to /app,I'll use dummy data where necessary since we are not implementing functionality just yet

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 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 , I’d love to work with you on your next big challenge.

How I plan on tackling this issue

Step 1: Create the Dashboard Page "I will create a new file named app.tsx within the pages directory of the Next.js project. This will serve as the entry point for the /app route."

Step 2: Set Up the Funds Component "Next, I’ll create a new component called Funds.tsx in a suitable directory, such as components/ or modules/, depending on the project structure."

Step 3: Add Dummy Data "In the Funds component, I’ll define some dummy data representing funds. This will allow us to visualize how the cards will appear on the dashboard."

Step 4: Style the Components "Using CSS modules or Tailwind CSS (if applicable), I’ll style the dashboard and the Funds component according to the Figma prototype to ensure it matches the visual requirements."

Step 5: Render the Funds Component "I’ll render the Funds component within the app.tsx page, ensuring the layout adheres to the design specifications."

Step 6: Review and Test "After implementing the page and component, I’ll test the output to ensure the dummy data displays correctly and matches the design."

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 Dashboard Page with Fund Cards

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. 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 dashboard page, ensuring that my implementation aligns with the overall design.

STEP 2: Set up the new page route.
Description: I will create a new file index.tsx in the /pages/app/ directory to handle the /app route. Below is a basic structure for the new dashboard page:

// /pages/app/index.tsx
import React from 'react';
import Funds from '../../components/Funds'; // Import the Funds component

const DashboardPage: React.FC = () => {
  return (
    <div className="p-6 bg-gray-100">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <Funds /> {/* Rendering the Funds component */}
    </div>
  );
};

export default DashboardPage;

STEP 3: Create the Funds component.
Description: I will create a new component called Funds in the /components/ directory. This component will display fund information as cards using dummy data. Here’s an example of how the component might look:

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

const dummyFunds = [
  { id: 1, name: "Fund A", description: "Description for Fund A" },
  { id: 2, name: "Fund B", description: "Description for Fund B" },
  { id: 3, name: "Fund C", description: "Description for Fund C" },
];

const Funds: React.FC = () => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {dummyFunds.map(fund => (
        <div key={fund.id} className="p-4 bg-white rounded-md shadow-md">
          <h2 className="text-xl font-semibold">{fund.name}</h2>
          <p>{fund.description}</p>
        </div>
      ))}
    </div>
  );
};

export default Funds;

STEP 4: Review and iterate.
Description: After implementing the dashboard page and the Funds component, I will conduct a thorough review to ensure all elements match the Figma design. Feedback will be sought from the team for any necessary adjustments.

Goal

The goal is to create a visually appealing dashboard page at the /app route that displays fund information using cards, while leaving room for future functionality development.

I look forward to your feedback on my approach!

od-hunter commented 1 month 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, Nextjs, solidity, and Cairo.

How I plan on tackling this issue

To solve this issue, I'd:

Create the /app route in pages/app/index.tsx for the dashboard layout, following the Figma design (excluding the navbar).
Create a Funds component in components/Funds.tsx to display fund cards, using dummy data to simulate fund details.
Style the dashboard page and fund cards to match the Figma prototype.
Render the Funds component on the dashboard page to display the dummy data .

please assign me

AnoukRImola commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi guys! I have experience in Frontend, I’m part of Dojo Coding, and I’d like to take this issue :)

How I plan on tackling this issue

I will create a /app page in Next.js without the navbar, following the Figma design. I will add a Funds component that displays cards with dummy data, all implemented in TypeScript to ensure correct typing.

sanieni6 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 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, i'm gonna be happy to help

How I plan on tackling this issue

’ll begin by creating a new page at the /app route in the Next.js project structure to serve as the dashboard page. I’ll refer to the Figma prototype to accurately replicate the design and layout. Then, I’ll create a Funds component to display the funds as cards, using dummy data to visualize the design. This component will be modular, making it easy to integrate with real data in the future. This is one of the dashboard that i previously working on:

LazarusAA commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey, I'm Alvaro Lazarus a passionate blockchain developer with a bunch of experience with frontend development, Ive worked with a few projects using Next.js and TypeScript which makes me confident I can complete this issue perfectly.

How I plan on tackling this issue

Id implement the dashboard based on the Figma design and add the funds component with its corresponding dummy data so we can display the funds as visually appealing cards

Best regards, Lazarus

web3wagers / gostarkme