santosh2740 / liciuous-clone

An online shop platform where users can purchase wide verity of meats functions. Licious is a meat and seafood brand. The company serves the best, fresh and clean fish, chicken, meat, and eggs online.

Liciuous-Clone

An online shop platform where users can purchase wide verity of meats functions. Licious is a meat and seafood brand. The company serves the best, fresh and clean fish, chicken, meat, and eggs online.

This is individual Project. Its takes Two weeks with the help of HTML, CSS , JAVASCRIPT, JSON-Server, Heruko & vercel.

• Here is the link of our website live on Vercel: https://liciuous-clone-github-io.vercel.app/

Tech Stack

• HTML
• CSS
• Javascript - (DOM Manipulation, Local Storage)
• JSON-Server -(Creating Database)
• Heruko -(Deploy JSON data)
• vercel -(GO TO LIVE OUR WEBSITE)

Features

• SignUp/Login
• Landing page with carousels
• Product pages with sort & filter function
• Searching product with there names
• Add to cart func with Add/Remove/Quantity option
• Payment with applied coupon option

🔗 Links

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

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

Product Deatils 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

Filter data Page :-

• 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.

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.