We have given the project to clone the official site of Netmeds.
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.
- Reactjs
- CSS3
- JavaScript
- Chakra UI
- JSON server(Back-end)
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.
The Homepage of Netmeds website shows the various medicines of different categories like diabetic, ayurvedic, homeopathy and treatments, etc.
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.
We have also included the responsiveness to our site for all the screens.
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.
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.
##Product Page The product page of the website contains all the products with their respective category and price.
A user can easily sort those products according to their will or choice.
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.
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.
After going to the cart page user can change the quantity and also can remove the item if he/she wants to remove it.
Finally, the cart page will give the user the option to proceed with the payments by clicking proceed.
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.
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.
After filling in the card details, on a successful transaction user will be redirected to the home page of netmeds.
- 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.
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.
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.
We have deployed the application on netlify and the link is below -Here is the deplyed link : https://teamnetlifyclone.netlify.app
