Browse hundreds of doctors specializing in certain categories and find the one that's right for you!
In this project i want to code the Mobile Web Application designed in this Figma project.
The app, is a simple Doctor Consultation that work online and allow the user, to find the best doctor!
HTML, CSS, Javascript
After the project analysis, i've used Trello for organize tasks with Agile metodology.
So, i start coding! 🤓
The first step was to check the used device (The app, in fact, works only on mobile!): so i have done a desktop page (look at it, 'cause it's beautiful) to invite the user to switch to mobile device.
[x] MOBILE PAGE
And than i can start to work on mobile!
For this, i've install browsersync package (via npm), so i can watch the mobile version while i'm codin' it!
For the mobile version i create 4 different pages:
- Homepage
- Login page
- Dashboard Page
- Doctor Page
Simple, classic (maybe boring) homepage.
Here you can log with your data. I provide the login page cause in the dashboard page was present an user icon.
I provide a simple form validation that check only if inputs aren't empty.
Let's split this page into sections:
- Dashboard menu: here you can find two clickable icons (menu, and user avatar) that show user informations.
- Search box: here the user can search and filter doctors by name.
- Categories slider: here the user can find all the categories, and filter doctors by them.
- Top Doctors: Here you can find all the top doctors.
This page appear when the user click on a doctor (could be a filtered doctor, or one in Top Doctors list) and show the selected doctor informations.
I wanted also to provide a simple user navigation experience between pages, so, with some CSS and JS, i made some cool animations when you change the page or when you click buttons or links! 😏