REACT Developer

Clinic Management software that makes booking and rebooking multiple appointments simple and pain free.

Welcome

Hey, your profile fits everything we need for us to move you forward to the next stage of the interview, Now it’s time for some action. With the following assignment, you can show us what you got. The case tests your competencies regarding development and gives us an idea of how well you come up with solutions.

- You have 24 to 48 hours to complete the assignment.

- Create a PR, message in #pabau-2-dev for a developer to code review your work.

- Send the vercel link (generated off the back of the PR) to @William.

*This task assumes you are already setup on Bitbucket & Slack and you have pulled the code and setup your environment.

ASSIGNMENT

Create a demo page that integrates Pabau Appointment API. You should loop through and display some appointments.

You need to only list the data displayed in the image below 'The Design'

The Design:

https://www.figma.com/file/LB6EcEaus1yDAZ6U41durP/Pabau-Core?node-id=15251%3A287237

You should convert from FIGMA in order to achieve the design, only do the Appointment List part on a empty demo page in /pages/demo-page-[your_name]:
https://www.figma.com/file/LB6EcEaus1yDAZ6U41durP/Pabau-Core?node-id=15251%3A287237

For the Backend Setup:

In order for you to start using the backend you will need to follow these steps:

- Follow the complete README.md file and fully set up and install the project locally,
- After you set up the project you will need to run yarn mysql:start(To install the Mysql Database)
- Then you in a new terminal you run yarn dev which will run the whole Pabau 2 App locally on your system including the Hasura instance
- To login into your local application use these login details
user: pabau@local.com pass: test
- Navigate to localhost:4000/graphq where you will find the the appointment api exposed
You will need to use graphql to fetch && display the appointment details on a demo page as as per the design

Hint: The query for getting appoinments:
query getAppoitments{
findManyBooking(take:10){
id
end_date
start_date
service
CompanyBranch{
id
name
city
address
}
User{
id
image
full_name
}
Contact{
ID
Fname
Lname
}
}
}

*Be creative, if a variable is missing but on the UI, try to find it ;)

Bonus Points For

- Using atomic design principles
- Integrate ant. design or MaterialUI to make its looks of better
- Add Skeleton loader from ant.design
- Search input for the bookings by patient name

Super Bonus Points For

Using typescript and provide type definitions
Adding pagination

#
#

Book a demo

Leave your details and a member of our team will be in touch shortly. Signing up to a demo allows you full access to learn about our software and the features that are key to business growth.

Thank you for choosing Pabau CRM

Thank you for requesting a demonstration of our software, we are really excited to show you what we have to offer. One of our team will call you shortly on the number you provided to arrange your demo.

Schedule your demo

This site is protected by reCAPTCHA and the GooglePrivacy Policy andTerms of Service apply.
processing...