Project information

  • Category: Full Stack
  • Stack: Angular , Spring boot, HTML, CSS, SQL, Java
  • Project URL (Frontend): Github
  • Project URL (Backend): Github

Front-End Technology Stack:

Angular: I built the front-end of my e-commerce website using the Angular framework, which allows for creating dynamic and responsive user interfaces.

TypeScript: Angular applications are primarily written in TypeScript, a statically-typed superset of JavaScript, which helps in maintaining code integrity.

HTML and CSS: You used HTML for structuring the web pages and CSS for styling, ensuring an appealing and user-friendly design.

Bootstrap: Bootstrap was utilized to enhance the website's responsiveness and to facilitate the creation of a clean and consistent user interface.

Angular Routing: Angular Routing was employed for implementing navigation within the single-page application (SPA). This allows users to move between different views or pages without reloading the entire page.

Pagination was implemented to enhance the user experience when viewing a list of products. It divides the product list into multiple pages, making it easier to navigate through a large number of items.

Back-End Technology Stack:

Java: Java served as the primary programming language for the Spring Boot application, ensuring robust and scalable server-side functionality.

REST API: The backend exposes RESTful APIs, allowing seamless communication between the front-end and back-end components. RESTful APIs provide a standardized and efficient way to interact with the server.

Spring Data REST: You utilized Spring Data REST to simplify the creation of data-driven APIs, making it easier to perform CRUD (Create, Read, Update, Delete) operations on the database.

SQL Database: The application relies on an SQL database to store product information, customer data, orders, addresses, and order items. This relational database enables efficient data management and retrieval.

Key Features:

Product Listing: Users can view all products on a single page, with product information such as image, product name, unit price, and stock availability pulled from the SQL database. Products are categorized into programming books, coffee mugs, mouse pads, and luggage pads.

Pagination: allows users to navigate through the product list easily by breaking it into manageable pages.

Shopping Cart: Users can add, view, update (increase/decrease quantity), and remove items from their shopping cart. This involves CRUD operations on the cart items.

User Registration: Users can provide their name and email, which will be used for order processing.

Country and Province Selection: application offers a feature for users to select their country, and based on the chosen country, it autogenerates a list of provinces. This functionality improves address-related data entry.

Payment Processing: can add their card details for payment. The application includes validation for each field to ensure data accuracy and security.

Order Confirmation: After completing the purchase, users receive a popup confirmation with a unique order number generated using UUID. Order details, including customer information and items purchased, are saved in separate tables in the database, including customer, orders, address, and order items.

GitHub Repository: I plan to continue enhancing this application by adding more features and updates to the GitHub repository, allowing for collaboration and version control with the development community.

Overall, this e-commerce website leverages a robust technology stack to provide a seamless shopping experience for users, from product selection to order completion, while ensuring data integrity and security throughout the process.