swag-of-india https://mdsaquibmdafzal.github.io/swag-of-india/
-
Description: Swag of India is a responsive e-commerce website. The technologies used in this project are HTML, CSS, Vanilla JavaScript and Bootstrap. There are a few important modules in the project like home page, image carousel, product listing page, product page, cart page, wishlist page etc. For cart-page we are using localstorage to temporarily storing data before clicking on the checkout button.
- Skills used: HTML, CSS, Vanilla JavaScript and Bootstrap
- This is my portfolio project, and it demonstrates my ability to create a fully responsive front-end for an e-commerce website using popular tools like HTML5, CSS3, Bootstrap, JavaScript, jQuery, AJAX, and JSON.
- Working on this project helped me solidify my understanding of the above-mentioned tools and implement them in different segments of this e-commerce project.
- When the user clicks on the country, it allows them to select from various countries, and the contact number and flag change accordingly.
When the user clicks the Shop Now or View More button, they are taken to the All-Products page, where the information for various products is loaded from a database via a bogus server. This feature was implemented using AJAX calls and JavaScript. The product information on the server was stored In JSON format.
- Hovering Over The Mouse In The Latest Section Of The Homepage, Where Different Products Are Displayed, Users Can Click On The Cart Icon And Add Multiple Products To Cart. The Cart On The Top Navigation Bar Increments As The User Adds Products, And Upon Clicking On It, It Takes Them To The Cart Page. Here.
- Users can choose their preferred size for various products and change the quantity of their order as needed.
- Users can also permanently remove products from their carts by clicking the remove button, or add a specific product to their wishlist by clicking the add to wishlist button. When satisfied, the user can click on the “proceed to checkout” button to go to the checkout page.
- Users can add products to their wishlist by hovering over them and clicking on the heart icon, similar to how they add items to their cart.The Wishlist On The Top Navigation Bar Increments As The User Adds Products, And Upon Clicking On It, It Takes Them To The Wishlist Page. Here. Users can add items from their wishlist to their cart by clicking the Add to Cart button, or they can permanently remove items from their wishlist by clicking the Remove From Wishlist button.
- When users arrive at the Checkout page, they must go through three stages before placing their order. First, they need to sign in successfully; second, they will have to enter their address and contact information; and finally, they will have to choose a mode of payment. After that, the user can click the Place Order button to successfully place the order, and the Thank-You page will appear. If users want to go back to any stage, they need to click on the change button to make any changes.
- Users can access the my-profile page by clicking the profile link in the top navigation bar.Here, the user is shown their information like name, gender, email, location, etc., among others.
- The user can edit these details by clicking on the edit button, which takes them to the edit profile page. Here, users can change the entire information or edit previously saved information and click on the Save Details button to save the details. After doing so, the user is returned to the My-Profile page, where the updated information is displayed.
- Some generic features implemented are: login module, scroll-to-Top button, banner image with carousel effect, product tabs, dropdown menus, FAQ page with accordion, clickable side menus on all pages, seller page, related products. Carousel Effect and Hamburger Menu for Small Screens and Tablets.
- DRY stands for Do Not Repeat Yourself.
- Clean, Readable, and Organized Code
- Comments: Describing Functions and Code Blocks
- Re-use the code as much as possible.
- Password Hide/Show Function
- Using Buttons Instead of Hovering Icons for Cart, Wishlist, and Product View on Phones and Tablets
- Connecting Facebook, Twitter, and Gmail APIs for Login
- Creating a backend and database, as well as connecting it to the front end, to create a full-fledged e-commerce website