Skip to content

Latest commit

 

History

History
141 lines (78 loc) · 7.33 KB

README.md

File metadata and controls

141 lines (78 loc) · 7.33 KB

Namaste 🙏 Coders

Netmeds_Full-Stack App

Netmeds.com, India Ki Pharmacy, is one of India’s most trusted pharmacies, with over 10 years’ experience in dispensing quality medicines.Netmeds.com,help you to look after your own health effortlessly as well as take care of loved ones wherever they may reside in India. You can buy and send medicines from any corner of the country - with just a few clicks of the mouse.

Netmeds Clone is an collabrative project in Masai, which we have built it in 4 days in our construct week.Our objective was to complete all the main functionality of this Pharmacitical E-commerce website starting with Sign-up to till the buying a products from the website.We used React.js, React-Redux, JavaScripts,HTML,CSS & Chakra UI for building the pages. And we created our own api for all the content as well.

To see the preview of the Project,first run the localhost in your system & then - Click here

Home Page

We have created the navigation bar which has dropdown menus on hover, a cart section where the user can see the total number of products in the cart in real-time, and a login/signup button. image

The Homepage of Netmeds website shows the various medicines of different categories like diabetic, ayurvedic, homeopathy and treatments, etc.

image

A user can see the Navbar on the top section, and in the middle section of the website, the user will be able to see some carousals and some popular products which are listed on the home page of the website. These products are dynamic, which means all the CRUD ( Create, Read, Update, Delete ) are available for these products.

image

We have also included the responsiveness to our site for all the screens.

Login Page

On the home page, there is an option for signup on the right top of the page clicking that option will redirect the user to the signup/login page.

image

On the Signup page, the mobile number is asked for along with the email address and name after submitting the user will get an OTP in the mail. After the successful submission of OTP, the user will be logged in.

image

##Product Page The product page of the website contains all the products with their respective category and price.

image

A user can easily sort those products according to their will or choice.

image

A user can see the products page and add or remove products from there. Choosing the product will redirect the user products details page, where all the data related to the product like price, manufacturer, and country of origin are shown.

image

Clicking on the add to cart button will add the product to the cart and then after clicking on the cart icon of the navigation bar, the user will be redirected to the cart page.

Cart Page

image

After going to the cart page user can change the quantity and also can remove the item if he/she wants to remove it.

image

Finally, the cart page will give the user the option to proceed with the payments by clicking proceed.

Payment Page

image

After successfully adding the product and if the user is signed in already then he/she will be redirected to the signup page or else to the payment page.

image

On the payment page, the user will be informed about the order details and asked about the payment methods to proceed further. On the payment page user will be asked to fill in the basic payment details i.e, card number, expiry date, and CVV, which includes validation also.

image

After filling in the card details, on a successful transaction user will be redirected to the home page of netmeds.

Original Credits

Tech Stack Used

  • Javascript
  • React.js
  • Chakra UI
  • Redux
  • Mongo Db
  • Express

Features

All the Functionalities are getting executed using Backend

  • Sign-in/Sign-up Authentication
  • You can see variety of products of different categories using sliders
  • Built the wellness page with all cateogories products which has the filter, search, sort functionality.
  • Add to cart option is there in all pages.
  • Built the cart page.

Collabrators

Conclusions

learning technology is a different thing and showing what you have learned is a different thing. This project has given us the confidence to showcase whatever we have learned so far. This project also help us to learn those concepts, which can be gained only by practically doing, that can’t be taught during class. Lastly, I would like to thank all the team members of the group who coordinate remotely and let the project go smoothly.

Edited by - Vikas Dwivedi

Thank You For Visiting