Skip to content

cjdebug/techtronics-ecommerce-frontend

Repository files navigation

TechTronics

TechTronics is a frontend e-commerce website developed as an individual university coursework project for the Web Application Development module. The website is designed for selling electronic products such as smartphones, smart watches, and earphones from Apple, Samsung, and Google Pixel brands.

This project focuses on frontend design, user interface development, and basic client-side interactivity using HTML, CSS, and JavaScript.

Live Demo

View TechTronics Website

Project Overview

The main purpose of TechTronics is to provide users with a simple and user-friendly online shopping interface where they can browse products by brand, view product cards, and add items to a shopping cart.

The project was created to practise web development fundamentals, including page layout, navigation, forms, product display sections, and JavaScript-based cart functionality.

Project Category

University Coursework Project
Module: Web Application Development
Project Type: Frontend E-commerce Website

Features

  • Home page with a product slider showcasing latest products
  • Login page with a user input form
  • User registration page with a data collection form
  • Separate product pages for:
    • Apple products
    • Samsung products
    • Google Pixel products
  • Product cards for displaying items clearly
  • Sliding shopping cart panel from the right side of the screen
  • Cart updates when products are added
  • Automatic total price calculation in the cart
  • Simple and user-friendly interface

Pages Included

  • Home Page
  • Login Page
  • User Registration Page
  • Apple Products Page
  • Samsung Products Page
  • Pixel Products Page

Technologies Used

  • HTML
  • CSS
  • JavaScript

Project Type

This is a frontend-only website. Backend development, database connection, user authentication, and real payment processing were not implemented in this version.

Responsiveness

The website was designed to be user-friendly, but it is not fully responsive for all screen sizes. Some layouts may require improvements for mobile and tablet devices.

Project Status

This project was completed as an individual university coursework project for the Web Application Development module. It is not currently being actively maintained, but it remains available to show my early learning experience in frontend web development.

Possible Improvements

Some possible improvements for this project could include:

  • Making the website fully responsive for mobile and tablet devices
  • Adding backend functionality for login and registration
  • Connecting the website to a database
  • Adding product search and filtering options
  • Improving form validation
  • Adding checkout and order management features
  • Improving accessibility and UI consistency

What I Learned

Through this project, I improved my understanding of:

  • Structuring web pages using HTML
  • Styling websites using CSS
  • Creating interactive elements using JavaScript
  • Designing product cards and page layouts
  • Building a basic shopping cart interface
  • Updating cart totals dynamically
  • Organizing a multi-page website project
  • Developing a university-level frontend web application

Author

Developed by Chanuka Jayasundara as an individual university project for the Web Application Development module.

Note

This project was created as a learning-based academic project to practise frontend web development concepts. It was built while learning from online resources and applying the concepts in my own project structure. It represents my early experience in building web interfaces using HTML, CSS, and JavaScript.

About

Frontend e-commerce website developed as a university Web Application Development project using HTML, CSS, and JavaScript.

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages