frontend-challenge.md

Challenge: Patient Management System with React, Next.js, and UI Libraries

Description:

Create a Patient Management System using React and Next.js. This system allows healthcare professionals to list patients, search for patients by various criteria, view patient details, and securely share documents and images related to patient care.

Requirements:

1. Build a Next.js application that includes the following main components:

   • Patient List: Display a list of patients with basic information such as name, age, and gender.
   • Patient Details: Show detailed information about a selected patient, including medical history, contact information, and recent appointments.
   • Patient Search: Implement a search feature that allows users to search for patients by name, age, gender, or any other relevant criteria.

2. Fetch and display patient data from a mock API or JSON file. You can use the fetch function or a state management library like Redux for this purpose.

3. Implement a document and image sharing feature:

   • Allow healthcare professionals to upload and associate documents and images with specific patients.
   • Enable viewing and downloading of shared documents and images for each patient.

4. Utilize UI libraries such as Material-UI or Ant Design for styling and user interface components.

5. Ensure a responsive and mobile-friendly design.

6. Use routing in Next.js to navigate between patient list, patient details, and search components.

7. Include a user-friendly and intuitive interface for a seamless user experience.

Bonus (Optional):

1. Implement user authentication for healthcare professionals, and ensure that only authenticated users can access and modify patient data.

2. Add a feature to schedule and manage patient appointments.

3. Use a local database or mock-api for storing and retrieving patient data and uploaded documents/images.

4. Include role-based access control for different levels of healthcare professionals (e.g., nurses, doctors, administrators).

5. Deploy the application to a platform like Vercel, Netlify, or AWS for real-world accessibility.

Resources:

• Next.js documentation
• Material-UI or Ant Design for UI components.
• Firebase, AWS S3, or a similar service for managing and serving documents and images.

Resources:

• Sample Patient Data
• Sample Patient Listing

This challenge encompasses creating a healthcare-specific patient management system that integrates patient data, document sharing, and image sharing. It combines various aspects of frontend development, including user interface design and functionality.

Best of luck!