Skip to content

A clone of netmeds.com, a online pharmacy, where you can search products from predefined database then add them to cart and login in order to checkout them.

Notifications You must be signed in to change notification settings

nidhishpareek/NetMeds-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

Clone of Netmeds

image

Question statement

We have given the project to clone the official site of Netmeds.

Introduction

Hello, we are learning Full stack Web Development at Masai School. During Unit 6 on this web development journey, we got a group project with our batchmates to clone the website of Netmeds, which is a pharmaceutical company that offers medicines at a reasonable price. We have tried to clone the website in the time span of 10 days only. Its a FrontEnd centric  pixel perfect netmeds.com clone app, which is developed to showcase the skills of React.js, Redux, Axios, email.js and basic understanding of collaborating a React app. UI is fuled with Chakra UI,.  One o f the special feature is, we merged the UI of m.netmeds.com too in this projecis a dedicated website for mobile view. The backend is backed with Jsoneerver and  is deployed on render.com.

Tech Stack Used

  • Reactjs
  • CSS3
  • JavaScript
  • Chakra UI
  • JSON server(Back-end)

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.

Roles and Responsibilities

  • On the first day of the project, we decided the role of every member of the team.
  • We have divided the task wisely among the team members.
  • We organize a meeting daily to know the progress and error if any.

Challenges

The main challenge of the whole project was to manage the state of the application and avoid infinite re-rendering. We have solved it wisely. The second challenge was to merge the different files in the same final folder.

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.

Deployment

We have deployed the application on netlify and the link is below -Here is the deplyed link : https://teamnetlifyclone.netlify.app

🔗 Team members

Nidhish Pareek

  • portfolio
  • linkedin
  • twitter

Ramzan Khan

  • portfolio
  • linkedin
  • twitter

Akshay Pareek

  • portfolio
  • linkedin
  • twitter

Gulshan Sharma

  • portfolio
  • linkedin
  • twitter

About

A clone of netmeds.com, a online pharmacy, where you can search products from predefined database then add them to cart and login in order to checkout them.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •