Component 1:
Create a React component that contains a list of items on the left side. This list of items should be populated from an array of JSON objects. Name in the JSON object will be displayed on the item.
Create 2 Droppable Areas on the right side of the component. The Droppable areas need to be represented by an empty array for each area.
Upon dropping an item into the droppable area that item needs to be added there and the corresponding array updated.
We should be able to remove the other item from the droppable area.
Component 2:
Create a component with a container where items can be added. The container should have a width of 300px and height of 1000px. This container needs to be logically divided in vertical direction into 25 slots, each of height 40px and width 300px.
The item that we add needs to be initially added to the top vacant slot. The item should vertically draggable up and down along the container. While the item is being dragged, its left and right edges should be on the left and right borders of the container. Upon dropping it needs to be put in the nearest slot.
Component 3:
A display component serves as a droppable area. There needs to be thumbnails of profile photos on the top of the component.
These thumb items containing profile photos should be droppable, draggable and resizable into the display area.
The data related to position and size of the item needs to be captured.
We should also be able to remove the item from the display component.
Component 4:
Data field of the array of objects should be editable through a screen.
Convert a given set of objects into a delimiter separated string. Input output format is provided below.
Input:
{
"1": [
{ row: "rowId1", data: "data-row1-col1" },
{ row: "rowId2", data: "data-row2-col1" },
{ row: "rowId3", data: "data-row3-col1" }
],
"2": [
{ row: "rowId1", data: "data-row1-col2" },
{ row: "rowId2", data: "data-row2-col2" },
{ row: "rowId3", data: "data-row3-col2" }
],
"3": [
{ row: "rowId1", data: "data-row1-col3" },
{ row: "rowId2", data: "data-row2-col3" },
{ row: "rowId3", data: "data-row3-col3" }
]
}
Output:
rowId1 ; data-row1-col1 ; data-row1-col2 ; data-row1-col3 \n
rowId2 ; data-row2-col1 ; data-row2-col2 ; data-row2-col3 \n
rowId3 ; data-row3-col1 ; data-row3-col2 ; data-row3-col3 \n
Above code needs to be implemented in React Redux.
Data needs to be maintained in the Redux store and updated by use of actions.
Components, Actions and Reducers need to be defined in separate files.
Write Test cases using Jest to test important scenarios.
Git access will be provided to checkin the code.
Hi,
I understand the requirements you've described, and I am confident in my ability to fulfill them. I have successfully completed multiple projects, each consisting of 13 to 15 modules, implementing high-quality solutions. These projects are showcased on my portfolio website.
Timeline -
I aim to complete all tasks within 1 to 2 weeks, provided that the codebase is ready.
If you have any doubts or need further clarification, feel free to contact me at 8530842830. All my skills and projects are presented on my portfolio website.
Thank you.
Best regards,
Omkar
We understand that developing drag-drop React components is a challenging task. That is why we have brought together a team of experienced developers who have the skills required to complete the project. Our team has extensive experience in using ReactJS, AngularJS and other similar frameworks to develop components that are suitable for user interface development. Additionally, we maintain a portfolio of projects that showcase our range of skills.
As part of the project, we would like to convert a given set of objects into a delimiter-separated string so that data related to position and size can be captured. Additionally, we would also be required to write test cases using Jest to ensure the successful completion of the project.
We believe that our combination of experience and skills make us the ideal choice for this project and we look forward to hearing from you soon!
Regards,
Danyal
Hi there! I'm Talha, a web developer with over 10 years of experience in the field. I understand that you're looking for someone to create drag drop React components that can be used to create components 1 through 4.
I believe I am the perfect candidate for this project because of my expertise in React, Redux and other important aspects of developing drag drop components. Additionally, I have extensive experience writing tests for important scenarios so that bugs don't slip through during development. All of this makes me well-suited to produce quality code for your project.
If you're interested in having me develop your project please don't hesitate to reach out. I look forward to hearing from you!
Hello, I am Hayk, I am a highly skilled React developer with extensive experience in building drag-and-drop components. I have successfully developed a variety of complex drag-and-drop interfaces, including sortable lists, resizable elements, and droppable containers.
Detailed Project Breakdown
Component 1: Drag-and-Drop Lists
I will create a React component that displays a list of items on the left side and two droppable areas on the right side. Items can be dragged from the list and dropped into the droppable areas.
Component 2: Vertically Draggable Items
I will develop a React component with a container where items can be added. The container will be divided into 25 vertical slots, each with a fixed height and width. Items added to the container will initially be placed in the topmost vacant slot. Items can be vertically dragged up or down within the container, and upon dropping, they will be placed in the nearest slot.
Component 3: Droppable Display Area with Resizable Items
I will create a React component that serves as a droppable area for profile photo thumbnails. These thumbnails will be draggable, droppable, and resizable within the display area.
Component 4: Editable Data Fields and Data Conversion
I will implement a React component that allows for editing the data field of the array of objects.
I will provide Git access to review and contribute to the code throughout the development process...
As you may have noticed, your project description lists the requirements for developing Drag Drop React components. This sounds like just the kind of project that I can help you with - especially given my extensive experience in both frontend and backend development. As a Full Stack Developer, I have the expertise to architect and deliver end-to-end solutions that seamlessly integrate user-centric interfaces with robust, scalable server-side functionalities.
I understand that the task at hand is to create component 1: Create a React component that contains a list of items on the left side. This list of items should be populated from an array of JSON objects. Name in the JSON object will be displayed on the item.
2 Droppable Areas on the right side of the component. The Droppable areas need to be represented by an empty array for each area. Upon dropping an item into the droppable area that item should be added there and the corresponding array updated.
Additionally, component 2: create a component with a container where items can be added . The container should have a width of 300px and height of 1000px . This container needs to be logically divided in vertical direction into 25 slots, each of height 40
Hello, I am a programmer with more than 4 years of experience with React/NextJs. I did similar features to your work. Contact me to discuss further. Thank
I understand how difficult it can be to develop a drag drop react component. With my extensive experience in web development, I am confident that I can craft a UI solution that meets your needs. My professional background in Full Stack Development has given me the knowledge necessary to develop components that are adaptable and responsive to changing user needs.
Furthermore, I have written tests for important scenarios so that you don't have to worry about any issues during the development process. Additionally, I provide git access so that you can checkin your code whenever needed without restriction.
I believe that I am the perfect fit for this project and would love to discuss further how my skillset could benefit your project!
Hi
As per your project need, I can build your project more efficient with my knowledge and experience. I'm looking to work with you and I'm very sure that you'll feel great to work with me.
Along with your project requirement, I'll provide you clean source code with free bug fixing and maintenance.
I Have 6 years of work experience in web and mobile Apps development. I have worked on so many projects. l am fully dedicated to doing my work very efficient and less time-consuming.
"Looking forward to your positive response please open your chat window to more details"
Thanks.
regard,
Vivek
I understand how difficult it can be to develop a drag drop react component. With my extensive experience in web development, I am confident that I can craft a UI solution that meets your needs. My professional background in Full Stack Development has given me the knowledge necessary to develop components that are adaptable and responsive to changing user needs.
Furthermore, I have written tests for important scenarios so that you don't have to worry about any issues during the development process. Additionally, I provide git access so that you can checkin your code whenever needed without restriction.
I believe that I am the perfect fit for this project and would love to discuss further how my skillset could benefit your project!
