Practo_Clone

About practo

Practo is on a mission to make quality healthcare affordable and accessible for over a billion+ Indians. We believe in empowering our users with the most accurate, comprehensive, and curated information and care, enabling them to make better healthcare decisions.

In this project we have tried to enhance the cloning of “Practo” website using frontend with React Js, Chakra UI, Bootstrap, redux and backend with validations, authentications and much more. We had build up all our efforts to do our best in this project. As, the Masai School's Mentorship was specifically to build up our skills and we also accordingly implemented all that teachings in our project to look it at its best. Team collabration was the most crucial part to get successfully completed on time.

Technology We Used 💻

Tech Stack in Frontend:

1. React Js
2. Bootstrap
3. CSS3
4. HTML
5. Redux
6. Chakra UI

Tech Stack in Backend:

1. Mongo DB
2. CSS3
3. Node JS
4. Express JS

Features

1. You will get fitness and health care related products.

2. Online consulting with doctors for any kind of health problems.

3. Order health products to your address.

4. Get information of any disease or health issue along with preferred doctors.

Roles and Responsibilities

Login and Sign up Page:

User need to login before purchasing products from “lybrate”. If user's are existing user they can login and if they are not existing user then they can register using sign up.

login page:

To login User has to enter their Phone number and password to log into the website.

Sign Up page:

To signup User has to register the by entering their name , email, phone number, password and then click on the "create account" button. You are now succesfully logged In.

Landing Page:

You are on our Landing page now. you get to see what are things our website provides you like exploring Find Doctors, Video Consult, Medicines, Lab Tests and etc.

Search tab:

we have used debouncing that helps to search the information.

Medicines:

You can see the GoodKart page by just clicking on the "GoodKart icon" on the navigation bar. On cliking you can get yourself the latest stuff of health products. click on the item and by selecting the quantity, just add to cart by clicking on "add to cart icon".

As, you can see the below grid which allows you to choose any categories from here to shop and explore further.

shop by Categories:

On clicking on shop by categories. You are re-directed to the products page having filters like price high to low and vice-versa.

Cart Page:

Now you are on the cart page. After adding to cart you are now able to see the order summary. you can here increase the item quantity as well as use coupon code to get discount on selected products. Thereafter, click on the "proceed to checkout" to go further.

Add Address:

You can enter your location accordingly now and then place the order.

Order placed:

After successful payment,your order is placed.

Instructions to Run the Code

Note:

We created cloud database using MongoDb Atlas. So, if you want to run our code then please read the instructions below :

• Clone our repository ``
• Open terminal in your VS Code and run the command npm install which will install all packages.
• Open terminal in your VS Code and run the command npm start
• Open corresponding terminal in your VS Code and run the command json-server db.json --port 5001 --watch
• It will redirect to browser
• Now you can see landing page
• Then you can Navigate through other pages from Landing page to Medicine tab, Lab tab etc