#Project Toy Marche Clone
With 5 team members. we collaboratively developed a clone website of Toy Marche. and deployed it to the Github account of Prathyush Nair This is the first project in our entire coding journey.
My teammates are:
- Akash Mondal (fw16_515).
2. Prathyush Nair (fw17_0417).
3. Dev Ashish Saurabh (fw17_0219).
4. Ravi Singh (fw17_0989).
- Raghav Shukla (fw17_1044).
The Journey:
It was a challenging task for my team as this is our first project and also we had to clone the website within a week, we had never built a project with such extensive collaboration, it was like we were the Product Manager and the developers as well. With this great team, planning, and teamwork continued during Zoom meetings. Each of us handled different tasks to ensure the successful submission of our work. Project Details: We are given a task to make a functional clone website of an e-commerce company ToyMarche. Toymarche is an Indian startup that sells all kinds of toys and offers people from across India to sell their products on the platform itself. Both buyers and sellers can use the website for their needs. The website has lots of functionality such as login, signup, homepage, add to cart, add to wishlist, delete from cart, delete from the wishlist, coupon code, purchase, address book, payment verified with OTP, and the order success, etc. We tried our best to clone the website from scratch based on the knowledge gained from unit 2 at Masai School. We have imparted the majority of functions that the Toymarche website has. We used Git hub to collaborate, HTML for page structures, CSS for styling, and Javascript for functionality. Glimpse and Screenshots of our cloned website:
🅐 Navbar:
• This is the landing page of our website. Clicking an option on the Navbar will redirect to the respective page. NavBarNavbar with synced pages such as Home page, Shop page, More page, Cart page, Login page, Signup page, etc.
Navbar
🅑 Home Page:
• The images on the home page are linked to the shop page. Hence clicking on it will ensure successful redirection to the shop page. • We also have a feature like hovering around any product two hidden cart and wish buttons will pop up and he/she can add the product to the Cart or Wishlist. Content page with Product category pages, youtube videos, Toymarche official social media link, contacts, policies, and information. account, and address.
Home page
• Footer bar: Here we have functions such as Toymarche's official social media link, contacts, policies, and information. account, and address. Toymarche's official social media link, contacts, policies, and information. account, and address
Footer
🅒 Signup:
Here we have a separate page for signing up, if someone is not registered with the website he/she can either register by filling in the respective details or he/she can also log in with the page by clicking login it will also redirect to the respective pages.
Signup page
🅓Login page: If the user is registered with the website, only then he/she can log in with their respective email id & password. After successful login, the user is redirected to his/her home page.
Login page:
Shop Page:
Here people can check the product, and add it to a cart or wishlist.
Shop Page
🅔 Product Sorting:
Users can sort products by their preferences with 4 options.
1. Price: high to low.
2. Price: low to high.
3. Name sorting: ascending A to Z.
4. Name sorting: descending order Z to A.
Product Sorting
🅕 Display Product Descriptions:
•Product Descriptions Here we have divided the page into three pages, the parts are: 1. Product descriptions: •Here people can check product descriptions for a better understanding of the product before buying. People can achieve that by a just single click on any product. • Users also can buy the product, can add it to a cart, or add it to a wishlist. Clicking on the buy now option will automatically add the product to the cart and redirect the user to the cart page. Sharing the product on the social media platforms such as Facebook, Twitter, E-mail, and Printest is also functional.
Display Product Descriptions.
Delivery Date of the product:
On the 2nd part of the page, people can see the product minimum to the maximum delivery date. Minimum to the Maximum delivery date
Delivery Information of the product.
Review the Product:
In the bottom section which is also the 3rd part of the page, people can write a review of the product.
Review the Product
🅖 Wishlist page:
On the wishlist page, people can add their favorite products for future buying also and they can add the product to the Cart directly from their wishlist. The wish list can be directly accessed by clicking on the heart button on the top right of the screen.
WishList Page
🅗 Cart Page:
We include a few useful features on the cart page such as remove from cart, add to wish list, order summary, gross pay, net pay, go home, apply coupon code, and place an order, along with the number of items, images of the products, name of the products.
Cart Page
🅘 Payment and Address Page:
Both are different pages but both are related to each other after clicking on the payment page it will lead to the address page where the user has to fill in the address of the preferred delivery address. and have to double click on the buttons to pay or cancel by clicking their respective buttons.
Address Page
🅙Payment Page:
Here people have to pay using a debit card or credit card and have to fill in their card details such as the Number, owner of the card, Cvv, Owner Name of the card, & most importantly OTP. If entered OTP is wrong it will show the OTP in alert ( Otp shown for website testing only. Will be hidden on deployment) with valid information order will be placed and it will redirect to the Homepage.
Payment Page
🅚 Sell page:
The sell page is under Maintenance by our teammates It will be updated with some features for Retail Traders to Wholesalers and also for our Partnered vendors. Sell page Retail Traders to Wholesalers and also for our Partnered Vendors. Sell PageTechnically Payment success is the last page our team developed for the best User Interface UI smooth Operations.
Sell page
< - - - - - - - - - - - - Links and Acclaim - - - - - - - - - - →
‣ WebPage deployed link:
Github Repo LINK: https://github.com/PrathyushNair/ToyMarche_clone
Github Site Deployment link: https://github.com/PrathyushNair/ToyMarche_clone
Netlify Link: https://62488c87db897540a8152398--subtle-centaur-57e7a8.netlify.app/
A video link for an explanation of a Small Part of the Website:
https://drive.google.com/file/d/1gH_MGk2uwhmAu1ILNl0DoQA59RmmWtA3/view
Blog link : https://medium.com/@info.coldfired/project-toy-marche-clone-9a66fee38079
‣ Acclaim for team members' Contributions:
⁍ Akash Mondal:
Linkedin: https://www.linkedin.com/in/akash-mondal-859b4b228/ Contribution:
• Created Content functions Category of the Products and features such as hidden add to cart button & wishlist button which is visible when someone hovers over the product.
• Footer for all pages with some effects and by clicking any items to route their respective linked pages
• Add to WishList with functions such as add to cart the product, delete the product, item summary display go to the home page, and go to cart page from the wishlist page.
• Address input taking page for user preferred location for delivery.
• Payment page with features such as having the valid OTP otherwise it will show an alert & with valid OTP, if Otp is correct it will place an order with a confirmation alert and redirect to the homepage.
• Most Importantly assessment of team members' daily schedule tasks, daily morning and evening scrum for dividing the task, taking daily assessment reports jointly contributing with team members @PrathyushNair and @DevAshishSaurabh, and arranging team meetings to rectify bugs and fix the bugs.
⁍ Prathyush Nair:
LinkedIn: https://www.linkedin.com/in/prathyush-nair-113774195/
Contribution:
• Creation of functional navigation bar which includes the hovering and routing.
• Creation of shop page. Invoked functionalities like sorting, adding to the cart, and adding the products to the wishlist. Routing from shop page to add to cart, add to wishlist.
• Create a Product Display Description Page that can add to the cart, add to the wishlist, or buy now.
•Visible user name in user profile section after login.
•Enabled functionalities with extensive use of JavaScript.
•Integrated all the pages received from my teammates into a fully functional ⁃ page to deliver a seamless experience to the user.
My most satisfying contribution was building a transparent, inclusive, and very effective communication environment for my teammates.
⁍ Dev Ashish Saurabh:
Linkedin:https://www.linkedin.com/in/dev-ashish-saurabh/
Contribution:
• I developed a Login page, a Signup page.
• Created routed pages for More option pages such as
⁃ Piggybank page.
⁃ Contact us page.
⁃ Shopping Guide page.
• Created routed pages for Footer Section such as
⁃ Terms of sales.
⁃ Buyback & sell Policy Page.
⁃ Payment Policy page
⁃ Return, Cancelation,& Refund Page.
• I've also managed the team and project as a Co-leader.
⁍ Ravi Singh:
Linkedin:https://www.linkedin.com/in/ravi-prakash-singh-293645195/
Contribution:
•Helped the team to understand the Features of the Offical Website.
• Helped my team member solve any bugs or issues.
⁍Raghav Shukla:
LinkedIn Profile: https://www.linkedin.com/in/raghav-shukla-8b0288162/
Contribution:
•I developed an array of objects with 100+ data for the products having respective Names, Images, brands, Prices, Strikedprice.
• I have also contributed to More Option pages.
• I have also helped my team member solve any bugs or issues.
• Created routed pages for More option pages such as
⁃ Donate page.
⁃ Recycle page.
⁃ About us page.