Task 1:
Create a react app and a Flask API for the following design
(Image attached separately)
(Feel free to use medingen logo from the internet and random tablet and other asset images
from the internet)
Interview Task Guidelines
Design the above screen using React and implement Flask API to load the same. Keep the
following guidelines in mind while developing it.
No data should be hardcoded in the frontend. The data should be dynamically loaded from the
backend (from database). Use dummy values for the data, ensure the elements required in the
design are present as columns in the database tables.
Keep it simple, do not overcomplicate. It's just 1 page. Evaluation will be primarily based on
design thinking, and how effective the codebase is. Sustainability and best practices are the key.
Give a basic inline documentation. No need for writing paragraphs explaining the code.
Frontend Development (React)
1. Component Structure
○ Split the page into several reusable and meaningful React components to ensure
a modular and maintainable architecture.
○ Follow best practices for naming and structuring components, ensuring clarity
and purpose for each component.
○ Only CSS should be used, no SCSS. Structure CSS well and reuse as much as
[Link] meaningful class names.
○ The design should be responsive (for mobile and web up to 1366 px width, need
not be specific to tablets) and responsiveness is an important criteria for
shortlisting.
2. Dynamic Rendering
○ Render components dynamically based on the data fetched from the backend.
○ Use state management (e.g., React Context or third-party libraries like Redux) to
manage application state effectively.
3. Asynchronous Data Loading
○ Use asynchronous API calls to fetch data from the backend dynamically.
○ Implement proper error handling and loading states for improved user
experience.
Backend Development (Flask API)
1. Local Flask API
○ Develop a Flask API that runs locally to serve the required data to the frontend.
2. Authentication Mechanism
○ Implement JWT-based authentication to secure the API endpoints.
○ Provide a dummy login system with a basic username and password textbox (no
complex authentication logic is required). Develop a dummy login page with
username and password obtained via prompt.
3. API Endpoints
○ Create endpoints to handle requests for product data, salt content, reviews, and
descriptions.
○ Ensure proper structuring and documentation of the API.
Database (MySQL)
1. Database Design
○ Use a local MySQL database to store the application data.
○ Design multiple tables for entities such as product content, salt content, reviews,
and descriptions.
2. Normalization
○ Break the database tables into appropriate normalization forms to avoid
redundancy and maintain data integrity.
3. Data Fetching
○ Use Flask SQLAlchemy or MySQL connector to interact with the database.
○ Optimize database queries for performance and scalability.
For Backend developer role:
- Only these 2 requirements are required for a backend developer role and tasks related
to these items alone are sufficient for that role.
- Backend Development (Flask API)
- Database (MySQL)
- Knowledge in AWS is recommended
How to Share the output?
- 3 deliverables:
- React APP code base (with src and build)
- Flask API python script (that can run on localhost and also include
[Link])
- MySQL database export (containing all the tables SQL export with sample data)
- Deliverables should be uploaded to a public git repository under a personal account.
Name the repository medingen-<your_full_name>
- Have readme explaining the structure of the repo
- Deadline: Within 48 hours of receiving the task.
- Share the link of the public repo.
Record a 5 mins video introducing yourself and attach a google drive link in the
submitted github repo