Project Details:
- Project Name: Wrist Wise
- Starting Date: July 6, 2023
- End Date: August 21, 2023
Wrist Wise is a fully functional wristwatch selling website developed as part of my 1st-year 2nd-semester module, SE102.3 (Web Application Development).
With a stylish dark theme, it offers seamless shopping, secure user login, stock management, and an admin panel for effortless control.
- From July 6, 2023 -
Upeksha Indeewara
Computer Science Undergraduate
Project Overview:
For my university's SE102.3 Web Application Development module, I collaborated with my teammates to create Wrist Wise, a comprehensive wristwatch e-commerce platform. We employed a tech stack consisting of HTML, CSS with Bootstrap 4.0 for the frontend, and PHP with MySQL for backend development and database management. Our website features a sleek dark theme, and we meticulously designed every element, including containers, input fields, login/signup forms, and other sections to align with this theme. We also integrated JavaScript to enhance the user experience.
Languages / Frameworks and Libraries:
- PHP
- HTML
- CSS
- Bootstrap 4.0
- MySQL
- JavaScript
Functionality of the website:
Wrist Wise serves as an online marketplace for wristwatches. Users can browse and purchase products, add items to their cart, and view prices, discounts, and the total order amount. To make a purchase, users must be logged in. If an unauthenticated user attempts to add items to their cart, a popup prompts them to log in. New users can easily create an account through the signup portal. Once registered and logged in, users can place orders, update their account details, access their order history, and explore and purchase new products.
User Login:
The website offers a secure user authentication system. Users can log
in through the designated login section, and authentication is managed
through PHP sessions, backed by a MySQL database. Users can also log
out. To enhance security, I implemented the
mysqli_stmt_prepare() function to safeguard against SQL
injection attacks, significantly bolstering the site's overall
security posture.
Product Functionality:
Each product on the platform has a specified stock count to manage inventory. If a user attempts to order more items than are available in stock, a popup will inform them of the maximum quantity they can purchase. When a user successfully completes a purchase, the stock count for that product is updated accordingly. If a product is out of stock, a message appears, indicating its unavailability, and the "add to cart" button is disabled. Additionally, products with discounts display both the original price and the discounted price calculated as per the percentage reduction. The PHP backend seamlessly manages all these functionalities through interactions with the MySQL database.
Admin Panel:
To enhance administrative control, I developed an admin panel that enables product updates, additions, order management, user administration, and the ability to change order states. Admins can complete orders or send custom messages through this feature. Access to the admin panel is restricted to authorized administrators; regular users cannot access this section.
Design and User Experience (UX):
The website was designed with responsiveness in mind, ensuring that it functions seamlessly across various devices. We incorporated smooth animations, transitions, and engaging hover effects to enhance the overall user experience.
Summary:
This project was a transformative experience in my web development journey. It broadened my perspective, allowing me to learn and apply a wide range of web development concepts and techniques. Building Wrist Wise not only improved my technical skills but also provided valuable insights into creating user-friendly and secure e-commerce platforms.