Rodan + Fields clone

Rodan & Fields, LLC, known as Rodan + Fields or R+F, is an American manufacturer and multi-level marketing company specializing in skincare products. Katie Rodan and Kathy A. Fields, creators of Proactiv, started the Rodan + Fields brand in 2002 and sold it a year later. They relaunched the brand in 2007 as a multi-level marketing firm.

About this project: 🙌

This is a team project, built by us in the Construct Week - Unit 2 at Masai School.

• Here is the link of our website live on netlify: https://rodanfields.netlify.app/

Our Team Members ❤️

• Akshit Rana
• Bhushan Wagh
• Jagrati Rawat
• AYUSH KUMAR
• Prabhat Bhardwaj
• Akshay Thakur

Pages & Features 👇

• Home Page: Nav Bar with drop downs, sliding banners & slider for Products.
• Sign-In: User authentication to check whether user email and password match with details existing in the database.
• Search: User can search for any of the products present in the website.
• Product Category Page and Regimen page: Skin products created dynamically with filter by category, name and price.
• Cart: User can see or remove products added in the cart.
• Checkout Page: Users can increase, decrease the quantity of the product and can apply discount coupons.
• Payment Page: Users can add their payment details, address and can create their account.
• Order Successful: cart gets empty automatically in local storage, once the user lands on this page.
• Additional Features: Kept the branding, fonts, colors and favicon and titles consistent throughout the whole site to give a feel like the original site.

Tech Stack

• HTML
• CSS
• Javascript - (DOM Manipulation, Local Storage)

Screenshots :

Home Page

Sign-in DropDown

Search Page

Cart Bag

Footer

All Products Page

Regimens Page

Checkout Page

Payment Page

Roles & Responsibilities :-

• GitHub is Managed & Readme.md done by Akshit.

• The Landing Page, navbar, footer is designed & functioned by Akshit.

• The Searchbar, sign in dropdown and cart sidebar is designed and functioned by Akshit.

• All products page and filter data is designed & functioned by Ayush.

• Regimens page, order confirmed page and all products array is designed & functioned by Bhushan.

• Checkout page is designed & functioned by Prabhat.

• Payment Page is designed & functioned by Jagrati.

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.

• We had to learn about many CSS properties that we didn't know before.

• Our skills in JavaScript and DOM manipulation became better.

• We all learned how to plan a project and execute that.