mujhe ye image jesa same Ui chaiaye
Using the Coalition Technologies Patient Data API, you are to make a GET request to fetch the information that will be used to populate the UI to be created
curl --location 'https://fedskillstest.coalitiontechnologies.workers.dev' \
--header 'Authorization: Basic [ENCRYPTED AUTH KEY GOES HERE]'
The API provides static data designed for testing front-end implementations - it is not uniquely generated on each API call.
Display information only for Jessica Taylor; displaying other patients' data is unnecessary and will not yield extra points in the skills test.
In some instances, data will need to be manipulated to match the design mockups accurately. This manipulation is crucial, so please pay close attention to the mockups.
The data in the API for Diagnosis History, Diagnostic List and Lab Results will not match the designs exactly. This will not be counted against you.
Hard coding the encrypted Basic Auth will be counted against you, we expect that you encrypt the key yourself using the proper methods.
Username
coalition
Password
skills-test
Patient Dashboard UI Recreation
I'll create a Next.js application that recreates the Tech.Care patient dashboard UI from the image, fetching data from the Coalition Technologies Patient Data API.
Features Implemented
- Responsive Layout: The UI adapts to different screen sizes with a sidebar for patient list, main content area, and patient profile section.
- API Integration: The application fetches data from the Coalition Technologies Patient Data API using proper Basic Auth encryption.
Interactive Components:
- Patient list with active selection
- Diagnosis history with charts for blood pressure
- Diagnostic list with status indicators
- Lab results with download options
- Data Visualization: Used Recharts to create the blood pressure chart matching the design.
- Authentication: Properly implemented Basic Auth by encoding the credentials instead of hardcoding the encrypted key.
How It Works
- The application fetches patient data when it loads using the
fetchPatientDatafunction. - The API credentials are properly encrypted using Base64 encoding.
- The UI displays Jessica Taylor's information as specified in the requirements.
- The data is processed to match the design mockups, even when the API data might not exactly match.
To run this application, you would:
- Create a new Next.js project
- Copy these files into your project structure
- Install dependencies:
npm install recharts lucide-react class-variance-authority clsx tailwind-merge tailwindcss-animate - Run the development server:
npm run dev
The application will fetch data from the API and display it in a UI that matches the provided design.
Tech.Care Patient Dashboard (HTML & Bootstrap Version)
I'll convert the UI into a pure HTML and Bootstrap solution that matches the design in the image.
index.html
Key Features of the HTML & Bootstrap Implementation
- Responsive Layout: Uses Bootstrap's grid system to create a responsive layout that works on all screen sizes.
- Bootstrap Components: Utilizes Bootstrap's built-in components like cards, tables, and navigation.
- Chart.js Integration: Implements the blood pressure chart using Chart.js.
- API Integration: Includes JavaScript to fetch data from the Coalition Technologies Patient Data API with proper Basic Auth.
- Custom Styling: Adds custom CSS to match the exact design from the image, including colors, spacing, and card styles.
- Bootstrap Icons: Uses Bootstrap Icons for all icon elements in the UI.
- Interactive Elements: Includes hover states and active states for interactive elements.
The implementation closely matches the design in the image while using standard HTML, CSS, and Bootstrap. The JavaScript section handles the API authentication and data fetching, as well as initializing the Chart.js visualization.
style the header section with black color font and make the Ui with API patient list scrobale bna do taki scroll ho ske niche tk
curl --location 'https://fedskillstest.coalitiontechnologies.workers.dev' \
--header 'Authorization: Basic [ENCRYPTED AUTH KEY GOES HERE]'
[
{
"name": "Jessica Taylor",
"gender": "Female",
"age": 28,
"profile_picture": "https://fedskillstest.ct.digital/4.png",
"date_of_birth": "1996-08-23",
"phone_number": "(415) 555-1234",
"emergency_contact": "(415) 555-5678",
"insurance_type": "Sunrise Health Assurance",
"diagnosis_history": [
{
"month": "March",
"year": 2024,
"blood_pressure": {
"systolic": {
"value": 160,
"levels": "Higher than Average"
},
"diastolic": {
"value": 78,
"levels": "Lower than Average"
}
},
"heart_rate": {
"value": 78,
"levels": "Lower than Average"
},
"respiratory_rate": {
"value": 20,
"levels": "Normal"
},
"temperature": {
"value": 98.6,
"levels": "Normal"
}
}
// Additional months of diagnostic history
],
"diagnostic_list": [
{
"name": "Hypertension",
"description": "Chronic high blood pressure",
"status": "Under Observation"
}
// Additional diagnostics
],
"lab_results": [
"Blood Tests",
"CT Scans"
// More lab results
]
}
]