Task for Esterox candidates.
Adding, editing and deleting of posts with uploading images
- We need to have a container where we keep our cards
- Last item-card always should be a card with “+” icon inside
- Each row shouldn’t contain more than 3 cards
When we click “+” icon a modal should open with fields, where we can fill in the information and upload an image, and after validating fields and existence of the image submit it and create a card. The same action is expected when we click on the “Edit” button, only in this case modal should be opened with the data of the current item.
When we click “X” button at the top, the item should be removed.
- The code should be written with React
- Use Redux Toolkit for state management
- Use Tailwind CSS for markup
- Using Typescript will be considered as an advantage
- Well-Structured Code: Ensure that the code follows best practices, is modular, and easy to understand. Maintain a clear folder structure and use meaningful variable and function names.
- Reusable Components: Design components in a way that encourages reusability. This not only reduces redundancy but also enhances maintainability and scalability.
- Responsive Design: Implement a responsive layout to ensure a seamless user experience across different devices and screen sizes.
- Efficient State Management: Leverage Redux Toolkit effectively for state management, ensuring that the application's state is well-organized and updated efficiently.
- Validation and Error Handling: Implement good validation for form fields, handle errors gracefully, and provide meaningful error messages to users.
- User-Friendly Modals: Design the modals to be user-friendly, ensuring a smooth and intuitive experience when adding or editing posts. Consider providing feedback on successful actions or error handling within the modals.
- Documentation: Provide clear and concise documentation for the codebase, including instructions for setup and usage. This helps developers understand and contribute to the project easily.
Please push the completed code to a public GitHub repo and share the URL. Thanks and good luck!
Here is the link to Figma design file https://www.figma.com/file/r10PqAmQm2CY4WKETIUmmA/Esterox-Task?node-id=0%3A1