Full Stack E-Commerce Website with Angular and Spring Boot

Desktop view

Mobile view

This repository contains the code for the Full Stack E-Commerce Website developed as part of the Udemy course "Full Stack: Angular and Java Spring Boot E-Commerce Website" by Chad Darby. The project leverages various technologies, including Java 11, Apache Maven, Hibernate, Spring Core, Spring Data, Spring REST, Spring Boot, Spring Security, TypeScript, Angular, Okta, Stripe, and Swagger API.

Overview

This E-Commerce website, known as "Luv2Shop," is a full-stack application built with Angular and Java Spring Boot. It includes a wide range of features and functionalities necessary for a modern online store. The project is designed to showcase best practices in building robust and secure web applications using the technologies mentioned above.

Features

• User Authentication: Utilizes Spring Security and Okta for secure user authentication and authorization.

• Product Catalog: Allows users to browse and search for products with a well-structured product catalog.

• Shopping Cart: Users can add products to their cart and proceed to checkout seamlessly.

• Payment Integration: Integration with Stripe for handling payments.

• Swagger API Documentation: Detailed API documentation using Swagger.

• Responsive Design: Improved styling and responsive design for a better user experience.

• Frontend Hosting: The frontend is hosted on Netlify for easy access.

• Backend Hosting: The backend is hosted on Render.

• Database Hosting: The database is hosted on Railway.

Technologies Used

• Java 11
• Apache Maven
• Hibernate
• Spring Core
• Spring Data
• Spring REST
• Spring Boot
• Spring Security
• TypeScript
• Angular
• Okta
• Stripe
• Swagger API

Contributions

Added Swagger API Documentation

I contributed by implementing Swagger API documentation to provide detailed information on the project's API endpoints. This documentation can be accessed at Swagger API Documentation.

Refine Styling and Responsive Design

I worked on enhancing the overall user interface by refining the styling and ensuring a responsive design. This improves the user experience and makes the website more visually appealing.

Frontend Hosting on Netlify

The frontend of the project is hosted on Netlify for easy access.

Backend Hosting on Render

The backend of the project is hosted on Render.

MySQL Database Hosting on Railway

The MySQL database is hosted on Railway.

Usage

To make the most of the Luv2Shop website, follow these steps:

1. Browse the Product Catalog:

   • You can access the product catalog without logging in. Simply visit the website to explore the available products.

2. Login to Your Account:

   • To log in, use the following credentials:
     • Email: [email protected]
     • Password: admin123456789

3. Access Additional Features with Login:

   • Logging in provides access to more sections of the website, such as:
     • Member: Profile information.
     • Orders: View your order history.

4. Add Items to Your Cart:

   • When you find a product you want to purchase, click the "Add to Cart" button.
   • You can review and modify the contents of your shopping cart at any time.

5. Proceed to Checkout:

   • Once you've added all the desired items to your cart, proceed to checkout.
   • Provide the necessary shipping and billing information.
   • Review your order to ensure it's accurate.

6. Make a Payment Using Stripe:

   For testing purposes, you can complete your purchase using the following test card details provided by Stripe:

   • Card Number: 4242 4242 4242 4242
   • Expiration Date: Any future date (e.g., 12/25)
   • CVC: Any three-digit number (e.g., 123)

   These test card details simulate a successful payment and allow you to test the payment functionality without making actual charges to a credit card.

7. Order Confirmation and Tracking:

   • After successfully placing your order, a confirmation popup will appear.
   • Additionally, you can access the "Orders" section in your account to view all your orders.

Demo

You can preview Luv2Shop live demo at luv2shop-ecommerce. The demo provides a hands-on experience of the website's features and functionality.

Video Demonstration

Watch a video demonstration of the Luv2Shop project here.

Contact Information

If you have any questions, suggestions, or just want to get in touch, you can reach us at:

• Email: [email protected]
• LinkedIn: Ahmed Aouinti

We appreciate your interest and look forward to your contributions and feedback!