Licious-clone

This is our first project at Masai School Unit-2 construct week after learning HTML, CSS & JAVASCRIPT.

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

• Our Licious Clone demo: https://bit.ly/3pkeqgM

• Here is Our Blog Post: https://bit.ly/3vmNzou

Contributors

The Contributors for this project are:

• Arpit Surana : https://github.com/suranaarpit

• Sagar Kothadiya : https://github.com/kothadiyasagar

• Shilajit Paul : https://github.com/iShilajit

• Rohit Mahajan : https://github.com/R4rohitm

• Atul Kumar Panigrahi : https://github.com/AtulKumar69

• Sachin Kumanache : https://github.com/sachinkumanache

• Rajan Kumar : https://github.com/raobaba

Tech Stack

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

Description

Home Page:-

• This is the main landing page of our website. Here clicking on any option on the Navbar will redirect the user to the respective Product Page.

• Clicking on select city will select city of your choice and we have a search bar where anybody can search their respective products easily.

• Clicking on Login will display an animated Login/SignUp window for login and sign up. Clicking on Cart will display a cart window where all the products added to cart will be shown.

• Now coming on landing page products. We have put our top selling products which generally Customers tend to prefer. User can directly purchase it from here also.

• All of these functions are working properly.

Screenshot

Login Window :-

• Here we have a login windows which slides from right when user click on login button near cart.

• From here user can easily register to our website.

• User simply needs a mobile number to SignIn/SignUp in account and and a valid otp (which comes on user screen).

• Than after login that Login Button will change in Logout button.

• Buy clicking on that user can easily Logout from our Website.

Screenshot

Product Page (Today's Deal) :-

• This is one of the product pages of our website.

• In this user gets an regular update about new deals, reducing of product Price and offers coming in Licious.

• Clicking on the Add To Cart Button will add products to the cart.

Screenshot

Cart Window :-

• Here all the products added to the cart will be shown. At the bottom there is total price of the cart and the proceed to Checkout button. Clicking on that button will redirect the user to the Address Page .

Screenshot

Address Page :-

• Here the user has to fill in his Location or shipping details and click Proceed to Checkout button.

• Clicking on that button will redirect the user to the Payment Page.

Screenshot

Payment Page :-

• This is the payment page where the user has to give card details like Name, CVV, Card Number, Card Expiry. After that user have to click on Confirm button to confirm Payment.

Screenshot

Payment Successfull :-

• After the payment has been done a next page will be appear in which your Dilevery timing, Order ID is mentioned. Clicking on Keep Shopping button will redirect the user to the Landing Page.

Screenshot

Roles & Responsibilities :-

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

• The Landing Page is designed & functioned by Arpit, Sagar, Shilajit.

• The Searchbar is designed by Arpit.

• Searchbar Data & its function is done by Shilajit and Sagar.

• The Login sidebar is designed by Arpit, function is done by Shilajit.

• Add to Cart and Placing orders functions are done by Sagar and Arpit.

• Categories layout and Fish, Combo, Spread Pages are designed & functioned by Shilajit.

• The Today's deals and Eggs pages data collection and functioned by Atul.

• The Chicken Page data collected, Address Page is designed & functioned by Sachin.

• The Mutton, Ready to cook & Super Saver data collection and functioned by Rohit.

• Payment Page is created by Atul.

• The Footer Part is designed by Rajan.

Challenges :-

• We had faced a lot of issues in cloning the website. First of all, we were not used to reading the code of other people.

• I and Sagar were working on the Landing Page and its functionality which was on the Landing page. There we faced some issues in its search. We also sometimes had to fix some issues related to merging our code through GitHub.

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.