JosueBrenes commented 6 days ago

Implement New Apartment Registration View

A view is required to register new apartments on the platform, following the design provided in the mockup.

Problem

Currently, there is no interface for property owners to register new apartments in the system. We need a standardized and user-friendly way to capture this information.

Solution

Create a form for the project following the design in the provided mockup: Mockup SafeTrust.

Required Fields

[ ] Text field for apartment name
[ ] Location field
[ ] Numeric field for payment amount
[ ] Promotion percentage selector
[ ] Numeric selector for the number of bedrooms (1-n)
[ ] Numeric selector for the number of bathrooms (1-n)
[ ] Checkbox to indicate if pet friendly
[ ] Text area for apartment details
[ ] Section to upload multiple images (1 main + 3 additional)

Technical Specifications

Create reusable components for inputs
Implement form validations
Ensure responsive design
Follow the provided UI design in the mockup
All data should be hardcoded, with no backend connection or API integration necessary.

UI/UX Considerations

[ ] Maintain the two-column layout from the mockup
[ ] Implement image preview functionality
[ ] Add indicators for required fields
[ ] Include validation messages
[ ] Design hover and focus states for inputs
[ ] Ensure the "Register" button is prominent and clear

Acceptance Criteria

The form must validate all required fields
It must be possible to upload multiple images
The interface must be responsive
The design must be consistent with the provided mockup
The form must handle errors appropriately
It must function on major browsers

When you submit, this won't be connected to the backend yet. It should just console log the form values on submission

0xdevcollins commented 5 days ago

May I pick this up?

Kingsuite commented 5 days ago

Can I tackle this one?

khayss commented 5 days ago

Mind if I try this one?

Background

I have experience building forms with Next.js and TypeScript, ensuring good UI/UX and handling form validations.

Plan

Develop a form with required fields (apartment name, location, price, etc.).
Implement image upload with preview.
Validate inputs and ensure responsiveness.
Log form data on submission and validate form functionality.

Benjtalkshow commented 5 days ago

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

Yunusabdul38 commented 5 days ago

I'd love to work on this issue. and make sure it meets the requirements

ShantelPeters commented 5 days ago

Could I take a shot at this? I am a frontend web3 developer and I am excited to bring my expertise to this community

mimisavage commented 5 days ago

Can I be assigned to this?

joeperpetua commented 5 days ago

GM, Joel from Dojo Coding. I would love to work on this issue, I have 3+ years doing Full Stack development and worked in other projects in OD as Starknet.quest and ByteBuilders.

josephchimebuka commented 5 days ago

Can I take this from here?

KevinLatino commented 5 days ago

Hello @JosueBrenes 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’ll implement a new apartment registration view with fields for apartment name, location, payment amount, promotion percentage, number of bedrooms/bathrooms, pet-friendly option, details, and image uploads. The form will include validation, reusable components, and a two-column responsive layout. I’ll add image previews, required field indicators, and clear hover/focus states. The "Register" button will be prominent, and all data will be hardcoded.

Here is an example of a Frontend Project that I have made:

https://buildmyevent.xyz/

Michaelkingsdev commented 5 days ago

Mind if I try this one?

chibokaxavier commented 5 days ago

Hi, i am Chiboka Emmanuel a full-stack web developer who enjoys creating solutions and applications that look great and work smoothly. This would be my first time contibuting to this project and i would provide a solution by I’ll set up a two-column form layout one side for details like apartment name, location, and payment, and the other for image uploads and extra features. I’ll create reusable input components (text fields, number selectors, checkboxes, and file uploads) to keep things consistent and easy to update. Real-time validation will handle required fields, showing clear error messages if something’s missing. and as for images, users will see a preview before submitting. I’ll use Tailwind to make sure the design looks great on any screen. Once the form is submitted, I’ll log the data to the console to simulate a backend. .i would really love to be assigned this issue and work on this project.

Tzienom commented 5 days ago

Hi, my name is Gabriel and I'll be working on issue #77.

I am specialized in frontend development and I am well-skilled to build the interface and functionality for New Apartment Registration, whilst ensuring that it is well responsive across all devices.

Unickhub commented 5 days ago

Let me handle this issue!

emarc99 commented 5 days ago

Mind if I take this issue?

Let me do this, my recent commit to nofail app in my repo prove my capability . ETA 2hours

chibokaxavier commented 5 days ago

Hi, i am Chiboka Emmanuel a full-stack web developer who enjoys creating solutions and applications that look great and work smoothly. This would be my first time contibuting to this project and i would provide a solution by setting up a two-column form layout one side for details like apartment name, location, and payment, and the other for image uploads and extra features. I’ll create reusable input components (text fields, number selectors, checkboxes, and file uploads) to keep things consistent and easy to update. Real-time validation will handle required fields, showing clear error messages if something’s missing. and as for images, users will see a preview before submitting. I’ll use Tailwind to make sure the design looks great on any screen. Once the form is submitted, I’ll log the data to the console to simulate a backend. .i would really love to be assigned this issue and work on this project.

OWK50GA commented 5 days ago

I'd like to take this issue.

amJoe-dev commented 5 days ago

May I try my hand at this? Ill really love to solve this issue to make it my first contribution to the community

mariocodecr commented 5 days ago

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.

To implement the apartment registration view, I will create a responsive, user-friendly form based on the mockup, using reusable input components for all fields. The form will include validation with clear error messages, image upload and preview functionality, and a two-column responsive layout. It will follow the mockup design, with hover/focus states for inputs and a prominent "Register" button. On submission, validated form data will be logged to the console, meeting all requirements without backend integration.

Steph3097 commented 5 days ago

Hello! My name is Sttef and i have over 5 years of experience in front end development, with experience on typescript, react, javascript and using tools like figma and zeplin

I’m part of the Dojo team ⛩️

I would like to be part of this issue! I will create the form and ensure that it matches your design!

Thank you!

martinvibes commented 5 days ago

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

Aditya-040 commented 5 days ago

Mind if I try this one? I have experience building frontend.

evgongora commented 5 days ago

Hey! My name is Erick, I'm part of the Dojo Coding community.

I'm a software engineering student working on fullstack web development, I have experience building different views with responsive layout using Next.js/TS/React. I have experience as a contributor and as a maintainer. You can check my work here: https://app.onlydust.com/u/evgongora

I'll follow the figma instructions, create reusable components and all data to be hardcoded.

Let me know if I can hop on this, I would love to contribute to this project.

deeseeker commented 5 days ago

Hi, I'm Qudus Adeyemi, a front-end developer with 2 years of experience in react, nextjs and typescript. I am solid experience designing and creating forms over the years.

This is an example of the app I have worked on recently:

https://app.myrevva.com/

kimcascante commented 5 days ago

Hello! I'm Kimberly Cascante a Dojo Coding member :) Looking for my first contribution. I estimate this will take me around 72 hours to complete. I will start reviewing the mockup, create the new component according to the structure of this project, create validations, test the solution and share. Happy to contribute!

Amarjeet325 commented 5 days ago

Hi , I am a proficient MERN stack developer with experience in full-stack development. I believe I can contribute effectively to this project. Could you kindly assign this issue/task to me?

vestor-dev commented 5 days ago

hey sir I'd like to handle this task. i'm a frontend developer and a blockchain dev i would really love to contribute to your project please kindly assign :)

JoelVR17 commented 5 days ago

I'm Joel Vargas, and I'm a Frontend Developer

Dojo Coding 🔥

New Apartment Registration View

Problem

Currently, there is no interface for property owners to register new apartments on the platform. We need a standardized and user-friendly way to capture this information.

Solution

Create a form to register new apartments based on the provided mockup: Mockup SafeTrust. The form will include all required fields, follow a two-column layout, and feature responsive design.

Steps to Resolve

1. Form Layout

Create a two-column layout for the form to match the mockup.
Divide the fields evenly between columns where applicable.

2. Create Reusable Components

Build reusable components for inputs, including:
- Text fields
- Numeric selectors
- Checkboxes
- Text area
- Image uploader with preview functionality

3. Add Required Fields

Apartment name: Text field.
Location: Location picker (hardcoded dropdown or text input for simplicity).
Payment amount: Numeric field.
Promotion percentage: Dropdown with percentages.
Bedrooms: Numeric selector (1-n).
Bathrooms: Numeric selector (1-n).
Pet friendly: Checkbox.
Apartment details: Text area.
Image uploads: Include the ability to upload one main image and three additional images with preview functionality.

4. Validation

Add validation for all required fields:
- Show error messages for empty required fields.
- Validate numeric inputs for proper range (e.g., payment amount, number of bedrooms/bathrooms).
- Ensure at least one image is uploaded.

5. Form Submission

On form submission:
- Validate all fields.
- If validation passes, log the form values to the console.

6. UI/UX Enhancements

Highlight required fields visually.
Add hover and focus states for all inputs.
Ensure the "Register" button is prominent.
Display error messages inline for user convenience.

7. Responsive Design

Test the form on different screen sizes.
Adjust the layout to maintain usability and readability.

Technical Details

Data Handling: All data should be hardcoded with no backend connection.
Framework: Use the current frontend framework (e.g., React with TypeScript if applicable).
Styling: Follow the design from the mockup and ensure consistency with the platform's existing styles.

Acceptance Criteria

The form validates all required fields.
It supports uploading and previewing multiple images.
The interface is fully responsive.
All fields are styled per the mockup.
Form values are logged to the console upon submission.
Works on major browsers.

Deliverables

A functional registration form meeting the above specifications.
Reusable components for form inputs and the image uploader.
Console logging of form values on submission.

Additional Notes

If you encounter any issues or require clarification regarding the mockup, please reach out to the project manager or designer.

JosueBrenes commented 5 days ago

Hi @JoelVR17 have assigned the issue to you

JoelVR17 commented 5 days ago

Hi @JoelVR17 have assigned the issue to you

Thanks a lot, I'll work on it soon.

safetrustcr / Frontend