logo
Published on

Farshop – Full-Stack E-commerce Application

Authors

🛒 Farshop – Personal E-commerce Project

Farshop is a personal full-stack e-commerce project currently under active development.
It was designed as an advanced learning project, focusing on real-world features commonly found in professional e-commerce platforms.

The application is built on:

  • an Angular 18 frontend
  • a Spring Boot 3 backend
  • a secure and scalable architecture

🎯 Project Goals

  • Deepen knowledge of advanced Angular concepts
  • Design a secure REST API with Spring Boot
  • Implement OAuth 2.0 authentication
  • Manage carts, orders, and payments
  • Build a scalable and maintainable architecture
  • Integrate third-party services (Stripe, Redis)

🖥️ Frontend – Angular 18

The frontend is developed using Angular 18.x and will continue to evolve to adopt new framework features.

🔧 Angular Concepts Covered

  • TypeScript based on classes and modules
  • Angular Material 18
  • Bootstrap 5
  • Routing:
    • Main routes
    • Child routes
    • Lazy-loaded modules
  • Unit testing with Jasmine & Karma
  • Custom components:
    • Custom @Input and @Output properties
  • Custom directives
  • Custom pipes
  • Defining properties and handling events in components and directives
  • HTTP communication:
    • Ajax calls
    • RxJS Observables
    • HTTP Interceptors
  • Utility and service classes
  • Angular data binding
  • Forms:
    • Template-driven forms
    • Reactive forms
    • Data validation

📦 Frontend Libraries & Tools

  • Crypto-JS (encryption)
  • ngx-translate (internationalization)
  • ngx-webstorage
  • ngx-stripe (payments & invoices)
  • ngx-cookie-service-ssr
  • file-saver

🔐 Authentication & Security (Frontend)

  • OAuth 2.0 authentication
  • Secure session handling
  • Local storage usage for:
    • Shopping cart
    • Temporary user data

🛍️ E-commerce Features

  • OAuth 2.0 authentication
  • Browse products
  • Product details:
    • Description
    • Reviews
    • Likes
    • Comments
  • Shopping cart management
  • Checkout process
  • User profile management:
    • Personal information
    • Addresses
    • Orders
  • Invoice generation
  • Payments handled with Stripe
  • Session management with Redis
  • Internationalization:
    • English 🇬🇧
    • French 🇫🇷

⚙️ Backend – Spring Boot 3 REST API

The backend is built with Spring Boot 3.3.5 and exposes a secure REST API consumed by the Angular frontend.

🔧 Backend Technologies & Concepts

  • Java 21
  • Spring Boot 3.3.5
  • Spring Security
  • Spring Data JPA
  • Role-based access control on controller endpoints
  • OAuth 2.0
  • Swagger (API documentation)
  • SSL
  • Lombok
  • Flyway 10 (database migrations)
  • MapStruct (DTO / entity mapping)
  • Global exception handling with @RestControllerAdvice
  • Logging with SLF4J & Logback
  • Unit testing:
    • JUnit 5
    • Mockito

🗄️ Database & Caching

  • MySQL (Docker container)
  • Redis (Docker container)
  • Data access via Spring Data JPA
  • Session and performance management using Redis

💳 Payments & Invoicing

  • Payments processed with Stripe
  • PDF invoice generation using Apache PDFBox
  • Server-side invoice management

🐳 Containerization & DevOps

  • Docker
  • Docker Compose for orchestration:
    • Spring Boot backend
    • MySQL
    • Redis
  • CI/CD:
    • GitHub Actions
    • Automated workflows

📌 Project Status & Roadmap

Farshop is an ongoing project with planned improvements:

  • Enhanced user experience
  • Performance optimizations
  • New e-commerce features
  • Security hardening
  • Improved test coverage
  • Angular & Spring Boot upgrades

🧠 Conclusion

Farshop is a realistic e-commerce project designed as a technical playground to strengthen my skills in Angular, Spring Boot, and modern full-stack architecture.

It reflects my focus on:

  • code quality
  • security
  • scalability
  • continuous learning
Slide 1

SHARE