Senior Full-Stack Engineer Task: Product Management System Enhancement

Objective: Enhance an existing Product Management System (PMS) to allow users to add, edit, and manage product listings seamlessly. We're expecting a mobile-first, responsive design, with a polished user experience and optimized performance.

1. Initial Setup:

A boilerplate has been provided which is pre-configured with Next.js, Flow, and a GraphQL server. The home page with the list of products is already set up. Your task is to build upon this.

2. Define Routes and Data Structure:

Products should consist of: ID, name, a brief description, price, and category.

Implement a new route:

• "/create" - for adding new products.

3. UI Enhancement with Material-UI:

Homepage: A user should be able to go to the product creation page. Implement it as you think is the best.

Product Creation Form: Craft a form to allow users to add new products. Ensure the form is intuitive, featuring fields for all product attributes and error handling for incorrect or missing inputs.

4. Enhance Data Management using React-Relay and GraphQL:

Design GraphQL mutations and query to add a new product. Utilize React Relay to manage data, ensuring efficient communication between the GraphQL server and React components, especially for the mutation you implement.

5. Prioritize Responsive Design:

Ensure a mobile-first approach and that components adapt elegantly to desktop sizes. Test your solution across varied devices: iPhone X, MacBook 13”.

6. Advanced Testing:

Implement unit tests for components, hooks, and other functionalities you introduce. As a senior role, comprehensive tests are crucial; ensure both primary scenarios and edge cases are considered.

Tech Stack

This project uses the following technologies:

• Next.js for the framework.
• Flow for static type checking.
• GraphQL for the API.
• React Relay for efficient data fetching.
• Material-UI for the UI components.

Note: Given your senior position, we're keen on evaluating not only the features you implement but also your coding approach, design decisions, and problem-solving skills. Strive for clean, maintainable code that embodies advanced engineering best practices. Wishing you success!

P.S. If you are new to Flow Type then we highly recommend to go to Editors section to install the plugin https://flow.org/en/docs/editors/