Solve the following business problem to be considered for an interview for the 10-week Frontend Developer internship.
Eligible Applicants:
Graduate or Post-graduate students in Frontend Engineering, Web Development, or related fields.
The Challenge:
We're developing a schema mapper tool built with React that helps users seamlessly integrate data from various sources into a unified target model. This challenge focuses on designing the user interface (UI) for a specific part of the tool: validating and confirming the schema mapping.
Challenge Steps:
You've used our schema mapper to connect to different data sources (databases, spreadsheets, etc.) and automatically map their data structures to a pre-defined target model in React. Now, it's time to review and finalize the mapping before integrating the data.
Your Mission:
Leverage the provided Figma mockup as your design foundation. Craft a user-friendly UI using React that allows users to: Clearly see the proposed mapping between source data elements and their corresponding elements in the target model. Easily navigate and review details of each mapping suggestion. Override the system's recommendations and manually select alternative target elements for any source element (if needed). Confirm the final mapping configuration, highlighting any user-made changes. Execute the mapping process with confidence. Requirements:
React & Material Design Mastery: Build the UI using React and adhere to Material Design principles to create a consistent, user-friendly experience that leverages Google's design language. Focus on Clarity and Efficiency: Prioritize clear information hierarchy, intuitive interactions, and a streamlined workflow for validating and confirming the mapping. Embrace Responsiveness: Ensure the UI adapts flawlessly across various screen sizes and devices (desktop, tablet, mobile). Prioritize Accessibility: Follow WCAG guidelines to create an interface accessible to users with disabilities. Optimize for Performance: The UI should be responsive and perform well even when dealing with complex data structures. Handle Errors Gracefully: Implement clear and informative error messages to guide users through any potential issues during interaction.
Submit the below files via email (to recruitment@synapselabs.ai
Deliverables:
Interactive React prototype showcasing the functionality of validating, overriding, and confirming the mapping. Documentation outlining your design decisions and thought process. Bonus points
Go the extra mile by incorporating features like comparison views to highlight differences between source and target elements, search functionality within the list of mapped elements, or the ability to revert to the system's original mapping suggestions.
We're excited to see your creative solutions for this UI design challenge! By crafting a user-centric interface with React and Material Design, you'll help us empower users to confidently refine and finalize their data integration workflows.
Design Challenge: Schema Mapping