{"id":25564617,"url":"https://github.com/wamiq319/react-patients-dashboard","last_synced_at":"2026-04-19T14:32:02.514Z","repository":{"id":270370848,"uuid":"906081019","full_name":"Wamiq319/React-Patients-Dashboard","owner":"Wamiq319","description":"A responsive React-based patient dashboard, developed from a client-provided XD design and API endpoint. The task was to convert the design into a responsive UI, ensuring it adapts to various screen sizes, and populate it with data from the API for displaying single patient details, all while adhering to industry standards.","archived":false,"fork":false,"pushed_at":"2025-01-02T10:09:46.000Z","size":560,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-01T08:49:41.732Z","etag":null,"topics":["adobe","api","apiintegration","dashboard","medical-application","react","tailwindcss","xd"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wamiq319.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-20T05:59:06.000Z","updated_at":"2025-02-18T04:06:59.000Z","dependencies_parsed_at":"2025-02-20T21:25:18.925Z","dependency_job_id":"0fef67fd-23d4-4b9c-a0bf-8582c3337755","html_url":"https://github.com/Wamiq319/React-Patients-Dashboard","commit_stats":null,"previous_names":["wamiq319/patients-dashboard","wamiq319/react-patients-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Wamiq319/React-Patients-Dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wamiq319%2FReact-Patients-Dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wamiq319%2FReact-Patients-Dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wamiq319%2FReact-Patients-Dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wamiq319%2FReact-Patients-Dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wamiq319","download_url":"https://codeload.github.com/Wamiq319/React-Patients-Dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wamiq319%2FReact-Patients-Dashboard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259755053,"owners_count":22906495,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe","api","apiintegration","dashboard","medical-application","react","tailwindcss","xd"],"created_at":"2025-02-20T21:22:23.520Z","updated_at":"2026-04-19T14:32:02.479Z","avatar_url":"https://github.com/Wamiq319.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Patient Dashboard\n\n## Overview\nA responsive React-based patient dashboard developed from a client-provided XD design and API endpoint. The task was to convert the design into a responsive UI using React and Tailwind CSS, while dynamically populating patient details from an API.\n## View Demo\n\nThis is a live demo of the **Patients Dashboard** application. It provides a visual interface to display Data\n\nYou can view the live demo at the following URL:\n\n### [Patients Dashboard Demo](https://wamiq319.github.io/Patients-Dashboard/)\n\n## Features\n- **Responsive Design**: The dashboard is fully responsive, ensuring a seamless experience across desktop, tablet, and mobile devices.\n- **Dynamic Data Population**: Fetches and displays patient data using API calls for a single patient detail.\n- **Industry Standards**: Built with best practices in mind, adhering to modern web development standards.\n\n## Technologies Used\n- **React**: JavaScript library for building the user interface.\n- **Tailwind CSS**: Utility-first CSS framework for styling.\n- **Axios**: For making API calls to populate patient data.\n- **HTML/CSS**: For the overall structure and styling of the dashboard.\n\n## API Documentation\n\nThe patient data is fetched using the following API endpoint. You can find the full API documentation and endpoints for the project at:\n\n- [API Documentation](https://documenter.getpostman.com/view/11861104/2sA35G42ve)\n\n## Design\n\nThe design for the dashboard was provided through Adobe XD. You can view the full design layout and specifications here:\n\n- [Adobe XD Design](https://xd.adobe.com/view/121254c9-532f-4772-a1ba-dfe529a96b39-4741/)\n\n## Installation\n\n### Prerequisites\n- Node.js and npm (Node Package Manager) installed on your local machine.\n\n### Steps to Run the Project Locally\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/your-username/patient-dashboard.git\n   cd patient-dashboard\n   ```\nInstall dependencies:\n```bash\nnpm install\n```\nCreate a .env file in the root directory and add the API Credentials:\n```bash\nVITE_API_USERNAME=YOUR API-USERNAME\nVITE_API_PASSWORD=YOUR API-PASSWORD\nVITE_API_BASE_URL=YOUR API-BASE-URL\n```\nStart the development server by \n```bash\nnpm run dev\n```\n  AND ENGOY THE PROJECT\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwamiq319%2Freact-patients-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwamiq319%2Freact-patients-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwamiq319%2Freact-patients-dashboard/lists"}