I made this E-Commerce site for a college project in my 2nd semester (Computer Science and Engineering). I'd appreciate any suggestions, which in turn might help me develop this site to a better scale :)
Functionalities/Features:
Welcome page: a. Glassmorphism effect behind the main text. b. Animations added in the “Welcome” text. c. Linear gradient effect on button hover. d. Website logo set as the background image. e. “onclick()” function used on the button to redirect to the main page.
Login page: a. Can sign in using different platforms. b. Glassmorphism effect behind the main text. c. Slight transitions on hovering over the icons. d. fontawesome API was used for icons. e. 4 usernames and passwords of the creators have been made already. The login form is fully validated.
Social handles: a. Retractable icons. b. Hover effects over the icons.
Newsletter: a. Automatically appears from the left side of the screen after 15s. b. If the user doesn’t want to subscribe to the newsletter, then and there, the user can close the pop-up and a small icon regarding the same appears on the bottom left corner of the screen for future usage. c. The background is blurred when the popup is in use.
Chat box: a. Is available on the bottom left corner of the screen. b. On clicking the button, a popup window appears from the bottom to chat. c. The background is blurred when the popup is in use. d. If the user types nothing and presses the send button, an alert box appears.
Cookie policy: a. Automatically appears from the left side of the screen after 7s.
Navigation bar (responsive): a. The navigation bar consists of different links to other sections of the site for easy accessibility. b. A hamburger menu appears when the screen resolution of the device is small enough, so that the elements in the navigation bar can be stacked vertically.
Slideshow: a. A slideshow of pictures is visible on the main page and keeps changing automatically after 2s. b. Some transitions are added if the user hovers on the images.
Cart: a. A brief list of the items which are about to be bought by the user can be seen here. b. An order summary is available at the end. c. An option to remove the item from the cart or add it to the wishlist is available.
Wishlist: a. A wishlist allows the user to create a collection of products they want to buy and save them in their user account for future reference. b. Icons to move a specific item to the cart is available or to remove it from the wishlist.
Gift Cards: a. A spin the wheel mini-game is available that gives the user a chance to win exciting prizes. b. Various coupons are available for the user to avail during checkout. c. The user can browse different gift-cards for different occasions.
Downloads: a. A progress bar is shown that tracks the progress of the development of the app. b. A button is added so the user can be notified as soon as the app launches. c. Some transitions are added on the button.
Categories: a. Three categories consisting of Men, Women and Kids can be found on the category page. b. The user can browse through any section as per their requirements. c. Each section has a vast collection of brands and products. d. Every product is categorized for the users’ convenience and a pleasurable experience whilst surfing through the website. e. A video regarding the section can be found on the top of the page. f. Feel free to explore it!
Feedback: a. After the user has surfed through the website, he/she can give their feedback which will be forwarded onto us. b. The feedback option is available on the right side of the main page. c. A popup box appears from the right. d. On selecting a particular option, the feedback is recorded and the user is alerted that their response is submitted.
COVID-19 guidelines: a. An information panel appears on the top of the main page when the website is loaded.
About-Us: a. A brief information about the website can be found here. b. Glassmorphism effect was used. c. The message gets scaled when the user hovers over it.
Get in touch: a. A form is attached where the user can input their email address and send their response to us. b. For their convenience, we have provided our location (google maps), email and contact number.
Go to top: a. A go to top button has been made for the users’ convenience to visit the upper portion of the website if they have scrolled enough to the bottom section.
Interchangeable themes: a. A light and dark theme has been added to the page. b. The user can change it from the icon present at the bottom left corner of the page.
Responsiveness: a. The website is fully responsive. The user can access it through any device and have a great experience.
Payment Gateway: a. Appropriate details must be entered by the user. b. Various information such as name, address, card details, etc. must be provided.
References: a. The images used were downloaded from google. b. The icons used on the site are from fontawesome.com c. The logo of the site was made using Wix Logo Maker.
The tech-stack used was: a. HTML b. CSS c. JS d. jQuery