At Wellspring, we’re building tools to supercharge our families’ ability to provide care throughout their journey with us. Whether it’s through training or care, we’re here to tackle the bottlenecks that affect our families’ experience.
This project aims to build a front-end web experience for our electronic health record system. The interface will help our clinical team to easily access patient data and track how to best support our families.
- Side navigation panel
- Recent patients table
- Upcoming visits table
- Clone this repository to your local machine
- cd into wellspring-take-home
- Run npm install to install the necessary dependencies
- Run npm start to start the application
- Open your web browser and navigate to http://localhost:3000 to view the application
This project comes with two API endpoints that you can use to fetch data for your front-end application:
-
GET
/api/patients
Returns an array of patients. -
GET
/api/appointments
Returns an array of appointments.
This project was originally built using JavaScript, but candidates are free to add TypeScript to the existing codebase. To do so, simply run the following command in your terminal:
npm install --save-dev typescript
After installing TypeScript, create a tsconfig.json file in the root directory of your project with the following configuration:
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"esModuleInterop": true,
"strict": true,
"jsx": "react",
"moduleResolution": "node",
"resolveJsonModule": true,
"declaration": true,
"outDir": "./dist",
"sourceMap": true
},
"include": ["./src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
- React.js
- HTML/CSS
Link to Figma design: (https://www.figma.com/file/oUQ510tObMV24neUboZKuD/Take-home-Design-V2.0?node-id=0-1&t=RT5tZiHAUQTip1rw-0)
Link to download the assets is here (optional): https://drive.google.com/file/d/1-Gi7yLZMxclh_ld8M3LTSQkfExkzKBLl/view?usp=sharing
Q: How should the coding challenge be submitted?.
- Zip the directory containing your code and email the zipped file back to us.
- Alternatively, you can create a public repository and share the repository URL with us.
Q: Do you have renders for the kebab menu on the appointments table?
- No, you don't need to worry about implementing an interaction for the kebab menu on the appointments table. Clicking on the menu should not trigger any action or behavior.
Q: Will the tabs under Upcoming visits be functional?.
- Yes, the tabs (Today, Tomorrow, This week) should be fully functional. They should filter the upcoming visits based on the selected day. You can choose a random date as the "today" date to build upon.
Q: Will the side navigation tabs be functional? Should clicking on the Patients tab bring up a list of patients?.
- While there is no specific requirement for a patients page, it is expected that the side navigation tabs change the state and/or route away from the home page. You have flexibility in implementing the behavior and appearance of the patients page.
Q: If I click the "View all" tab in the Recent Patients section, should it bring up the same page as the "Patients" button?.
- Yes, clicking the "View all" tab in the Recent Patients section should navigate to the same page as the "Patients" button. However, the design and content of this page are not specified, and it can be left blank or simply display a title such as "Patients" for the purpose of this take-home project.
Q: Can I use libraries or other technologies?.
- Absolutely! We encourage you to use any libraries or technologies that you are comfortable with and that will help you showcase your skills effectively in completing the assessment.
Note: We understand that not every detail may be fully provided, mimicking a real-world front-end engineering scenario where you may need to take the initiative to provide the optimal user experience. Feel free to demonstrate your problem-solving skills and make informed decisions to enhance the usability and functionality of the application.
If you have any additional questions, please do not hesitate to reach out to us.