Create a form to upload a product

[danielcdz]

📘 Issue Description

Add a Design for Product Upload Feature

We want to introduce a design for uploading new products on the marketplace page. At this stage, the functionality is not required; the focus is solely on creating the UI.

Task Details:

1. Button Design: Create a button on the marketplace page. Place it in a visible and intuitive location, such as the top-right corner or near the product listings.
2. Modal Form: When the button is clicked, it should open a modal containing a form layout for uploading a new product.
   • Include placeholder fields in the form for product details such as:
     • Product Name
     • Description
     • Price
     • Category
     • Image Upload
3. Ensure the modal design matches the existing marketplace theme and is responsive.

[EmeteZ]

Hello, can I work on this? @danielcdz

[khayss]

Let me handle this issue!

Background and Relevant Experience

I specialize in frontend development using TypeScript and Next.js, with experience designing modals and forms. I’m skilled at creating intuitive and responsive user interfaces, ensuring a seamless experience for users.

Plan for Tackling the Issue

• Add a "Upload Product" button in a prominent location.
• Design a modal with placeholders for product details: name, description, price, category, and image upload.
• Ensure responsive styling to match the marketplace’s theme.

[0xdevcollins]

Can I attempt this issue?

[KevinLatino]

Hello @danielcdz! My name is Kevin Latino, and I'm a frontend developer and active open-source contributor. I'm a member of Dojo Coding, a thriving Web3 community in Costa Rica. I have experience with React, Next.js, and TypeScript, also I have experience in data fetching and API integrations and I recently won the LATAM Hackathon hosted by Base. I've also contributed to projects in ecosystems like Starknet and Stellar.

I will focus on creating the UI for the product upload feature. I will design a button on the marketplace page in a prominent, intuitive location, such as the top-right corner or near the product listings. Upon clicking the button, a modal will open with a form layout for uploading a new product. The form will include placeholder fields for product details such as name, description, price, category, and image upload.

[KevinLatino]

Hello @danielcdz! My name is Kevin Latino, and I'm a frontend developer and active open-source contributor. I'm a member of Dojo Coding, a thriving Web3 community in Costa Rica. I have experience with React, Next.js, and TypeScript, also I have experience in data fetching and API integrations and I recently won the LATAM Hackathon hosted by Base. I've also contributed to projects in ecosystems like Starknet and Stellar.

I will focus on creating the UI for the product upload feature. I will design a button on the marketplace page in a prominent, intuitive location, such as the top-right corner or near the product listings. Upon clicking the button, a modal will open with a form layout for uploading a new product. The form will include placeholder fields for product details such as name, description, price, category, and image upload. I will ensure the modal design aligns with the existing marketplace theme and is fully responsive for different screen sizes.

I think I can finish this in 4 hours

[lauchaves]

Hey! I'm Lau Chaves, and I would like to contribute to this issue! I have over 5 years of experience with JavaScript, ReactJS,React Native TypeScript, and Ruby. I’m now enthusiastic about web3 and eager to learn more! I’m also a member of Dojo Coding Costa Rica.

Id follow these steps:

First Id follow the steps mentioned on the issue, I created a button on the market place page, make a modal with the form and the required fields, id make sure it matches the existing styles and its responsive! I can add error handling if needed!

[starknetbrother]

I'd be happy to do this.

GM GM! I’m a frontend developer excited to join in as a new contributor—looking forward to collaborating!

Button Design

I’ll create an "Upload Product" button and position it intuitively, like the top-right corner or near the product listings for visibility.

Modal Form

Clicking the button will open a modal with a placeholder form layout. The form will include fields for:

• Product Name
• Description
• Price
• Category
• Image Upload

Styling & Responsiveness

The modal design will align with the marketplace’s theme and be fully responsive for desktop and mobile users.

A clear "Close" button will be added, and smooth transitions will ensure the UI feels intuitive and seamless.

Let me know if anything needs adjustment! 🚀

[starknetbrother]

GM GM! 🌟 I’m a frontend developer excited to join in as a new contributor—looking forward to collaborating!

---

Adding a Design for Product Upload Feature

Button Design

I’ll create an "Upload Product" button and position it intuitively, like the top-right corner or near the product listings for visibility.

Modal Form

Clicking the button will open a modal with a placeholder form layout. The form will include fields for:

• Product Name
• Description
• Price
• Category
• Image Upload

Styling & Responsiveness

The modal design will align with the marketplace’s theme and be fully responsive for desktop and mobile users.

User Experience

A clear "Close" button will be added, and smooth transitions will ensure the UI feels intuitive and seamless.

[BrunoAmbricca]

I would like to work on this issue

[abdegenius]

I’d like to help with this.I can comfortably handle this issues

[0xNgoo]

Hello, I am a frontend developer with 2+ years of experience, I love to contribute to safeswap and solve this issue. i would be:

1. creating a button on the marketplace page.
2. creating a modal containing a form layout for uploading a new product.
3. including placeholder fields in the form for product details such as:
   • Product Name
   • Description
   • Price
   • Category
   • Image Upload
4. ensuring the modal design matches the existing marketplace theme and is responsive.

EDT: 24 hours

[Benjtalkshow]

I'd like to handle this task. I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 45 contributions to over 15 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

MY ETA is 48hrs. Thanks

[jimenezz22]

Hello sir! Can I help with this issue?

[Kom02]

Hi, My name is Kevin Obando, a full stack junior developer with 2 years of experience from Costa Rica. I am starting in this community and I want to help in this project.

[coxmars]

Hi @danielcdz, 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. Likewise, I’m a Cairo developer working in ByteBuildersLabs creating on-chain games using the Dojo framework.

This is my approach:

• I will review the project structure to put all code and sections correctly.
• I’m going to use the input fields you mentioned and I will send a PR or draft to validate the design is fine.
• If you need me I can setup all is needed to apply unit test for the components, looking for maintenance for the future and clean code.
• Finally, I will test the modal, responsive design and theme as expected for this task.

ET: 2 days.

[martinvibes]

Can I take care of this issue? i'm a frontend dev and a blockchain dev kindly assign :)

[Supa-mega]

I’m interested in this one.

[Villarley]

I’m Santiago Villarreal Arley, a proactive and communicative developer with experience in both front-end and back-end Web3 development. I’m a proud member of Dojo Coding and have worked on various projects built on StarkNet and Stellar, where I actively contributed to creating scalable and efficient solutions. I also won a Web3 hackathon Buildathon for my work on BuildMyEvent, an open-source blockchain project focused on solving real-world challenges and integrating useful features.I’m Santiago Villarreal Arley, a proactive and communicative developer with experience in both front-end and back-end Web3 development. I’m a proud member of Dojo Coding and have worked on various projects built on StarkNet and Stellar, where I actively contributed to creating scalable and efficient solutions. I also won a Web3 hackathon Buildathon for my work on BuildMyEvent, an open-source blockchain project focused on solving real-world challenges and integrating useful features. I already contributed to this project, so i would be able to deliver faster, and with a better understanding of how the repo works. PLs feel free to reach out

[Ayoazeez26]

Is this issue still available? I would add a button on the marketplace page, preferable on the top-right corner for uploading a product and make the button trigger a modal display on click. the modal will have the contain a form with fields mentioned above. I will make sure the design matches the theme and is responsive before making a PR

ETA - 3 days

[ShantelPeters]

I'd like to handle this task.

[SudiptaPaul-31]

May I take care of this?

[jancris100]

I'm from dojo coding I have 2 years of experience as full stack developer and also Im actually work in Spa app with angular and asp.net I have a lot of experience using form so I can handle this

[Michaelkingsdev]

Can I be assigned to this? I am an experienced frontend developer with 3 years of experience.

[emmz3230]

I am a front-end developer specializing in responsive web design, device-compatible email templates, 3D web integration, and technical writing on programming topics. I also contribute to open-source documentation and help build documentation sites.

creating a form that sends data to the backend by click of a button that is in the top right corner and respoonsive will be glad to work on this Thanks