/outnetclone

It is a clone of The OutNet B2C website. We have used HTML, CSS and JavaScript to develop it.

Primary LanguageJavaScript

TheOUTNET.com

This website is luxury discount shopping website. It was launched in 2009. It offers over 350 designers fashion brands at exceptional prices of up to 70% off. The OUTNET offers seamless shopping experience across mobiles, tablet and desktop, inspiring editorial content, express worldwide shipping to over 100 countries. 

About this project.

This project is built by us (6 team members) during construct week of unit 3 at Masai School. Netlify link:- https://theoutne-e7f2b5.netlify.app/

Team Members.

  1. Mr. Aifanul Islam.
  2. Mr. Jyoti Kamal Singh.
  3. Mr. Prajjwal Pal.
  4. Mr. Anurag Pawar.
  5. Mr. Sumit Bokshi.
  6. Mr. Piyush Narkhede.

Pages and Features:

Landing Page: It contains two sections (men and women) with different categories beneath it.
Home Page: It contains Navigation bar with different categories and search tab where customer can search for the required product. Also footer which provides some information about the company and links to social media handles. Also it shows images of some latest products.
Just in: It shows latest products such as shirts, trousers, bags etc. Also it has sorting and filter options.
Best Seller: This page has the products which are sold most number of times.
Clothing: This page shows products such as clothes such as shirts, Trousers, Jeans, t-shirts etc.
Shoes: This page contains footwear options such as shoes, flip-flops, sandals, sleepers, boots, etc.
Accessories: This page has products such as ties, caps, bags, bracelets etc.
Product: On clicking any of the product it will redirect to the products page which shows detail information of the product along with buttons such as add to bag and add to wish list.
Wish list: This page shows the products which customer add to the wish list from product page. From here we can add product into bag or customer can also remove it from the wish list.
Cart: On cart page customer can see the order summary and also customer can increase and decrease the quantity of the product. Also there is promo code section where customer can apply promo code and avail discount.
Checkout: Here customer have to provide address details and select payment option. And after that he/she can review and place the order.
Payment: Here customer has to enter the OTP which he/she receives on mobile in a minute. And after that he will get the confirmation message of placed order.

Tech Stack:

  1. HTML
  2. CSS
  3. JavaScript - ES6, local Storage, DE-bouncing, Fetch API, Import / Export, Set Interval / Set Timeout.
  4. API - for signIn and signUp functionality we used https://github.com/masai-school/api-mocker/wiki/Authentication-API
  5.    for search functionality we used https://api.unsplash.com
    

Roles and Responsibilities:

• GitHub is managed by Mr. Prajjwal Pal and REDME.md done by Mr. Aifanul Islam and Mr. Piyush Narkhede.
• The signup and sign in pages are designed and its functionality done by Mr. Jyoti Kamal Singh.
• The Landing page, navigation bar, Footer and product page is designed and its functionality is done by Mr. Aifanul Islam.
• Men’s home Page, Women’s home Page, Wish List and cart page is build and its functionality is done by Mr. Anurag Pawar.
• Women’s page and functionality such as sort and filter is done by Mr. Sumit Bokshi.
• The Men’s Page and pages for categories such as Justin, Clothing’s, Accessories, shoes, and best seller are designed and its functionality is done by Mr. Prajjwal Pal.
• Checkout and Payments Page is build and its functionality is done by Mr. Piyush Narkhede.
• Code optimization and debugging done by Mr. Jyoti Kamal Singh.

Learning:

• We all became proficient in reading the code of team members.
• Our code writing style became cleaner as we had to think while writing code that other team members will be reading.
• And also we all learnt to optimise the code with the help of import / Export. We get proficient in using ES6.
• Also we learned about how to conduct meetings efficiently and most importantly how to manage time and we are able to motivate every team member to make him participate actively.
• All the above learning outcome takes us to the result and eventually we complete our task within a week.

Feedback:

If you want to suggest us anything or want to give us feedback then please connect us at boby150499@gmail.com, aifanislam50@gmail.com, piyushnarkhede02@gmail.com, anuragpawar.me@gmail.com, palprajjwal143@gmail.com, bokshisumit@gmail.com