Skip to main content

Automotive Ecommerce Learning Map

This guide gives you a study path through the real project so you can absorb every Spring Boot and React concept in context. Work through the backend first, then the frontend. Each section lists the scenario to explore, the files to read, the Spring/React concepts involved, and a small practice idea.

Part 1 – Backend (Spring Boot)​

0. Groundwork & Tooling​

Files to Explore:

  • backend/pom.xml

What to Learn:

  • Skim to see Spring Boot 3.1, Java 21, security, validation, JWT, Lombok
  • Look up any unfamiliar dependency in the Spring docs
  • Run the app once (./mvnw spring-boot:run from backend/)
  • Make sure the H2 database and auto data setup are clear
  • Open the H2 console at /h2-console with the JDBC URL from application.properties

Concepts:

  • Maven dependencies and Spring Boot starters
  • H2 in-memory database for development
  • Application properties configuration

Practice:

  • Document each major dependency and its purpose
  • Access H2 console and explore the schema

1. Project Skeleton & Entry Point​

Files to Explore:

  • backend/src/main/java/com/automotive/ecommerce/AutomotiveEcommerceApplication.java
  • Package layout under business/, config/, exception/

Concepts:

  • @SpringBootApplication annotation
  • Component scanning mechanism
  • Layered architecture: controller → service → repository → entity

Practice:

  • Draw a quick diagram of the package structure
  • List what each layer owns
  • Document the responsibility of each layer

2. Configuration & Infrastructure Beans​

Files to Explore:

  • config/SecurityConfig.java
  • JwtAuthenticationFilter.java
  • JwtUtil.java
  • CustomAuthenticationEntryPoint.java
  • CustomAccessDeniedHandler.java
  • DataInitializer.java

Concepts:

  • Bean creation with @Bean
  • Dependency injection
  • SecurityFilterChain configuration
  • Stateless JWT authentication
  • Filter ordering in Spring Security
  • CommandLineRunner for initialization

Practice:

  • Trace a request for /api/cart
  • Note each security component involved: CORS → JWT filter → DaoAuthenticationProvider
  • Document the security filter chain order

3. Domain Model & JPA Mapping​

Files to Explore:

  • entity/User.java
  • entity/Role.java
  • entity/Product.java
  • entity/Cart.java
  • entity/CartItem.java
  • entity/CartAuditLog.java

Concepts:

  • @Entity annotation and JPA basics
  • Field constraints and validation
  • Relationships: @OneToMany, @ManyToOne, @ElementCollection
  • Lifecycle callbacks: @PrePersist
  • Lombok usage for reducing boilerplate
  • User implementing UserDetails interface

Practice:

  • Sketch the ER diagram: Users ↔ Carts ↔ CartItems ↔ Products
  • List which side owns each relationship
  • Document cascade operations and fetch types

4. Data Access Layer​

Files to Explore:

  • repository/*Repository.java

Concepts:

  • JpaRepository interface
  • Custom queries with @Query and JPQL
  • Optional handling for null safety
  • Pagination with Page and Pageable

Practice:

  • Write down what each repository method returns
  • Document which service calls each repository method
  • Try writing a JPQL query that fetches carts by date

5. Authentication Scenario (Login)​

Files to Explore:

  • controller/AuthController.java
  • dto/LoginRequest.java
  • dto/LoginResponse.java
  • service/AuthService.java
  • service/UserService.java

Concepts:

  • AuthenticationManager usage
  • UsernamePasswordAuthenticationToken
  • Error handling: BadCredentialsException
  • UserDetailsService implementation
  • Password encoding with BCrypt

Flow:

  1. User submits /api/auth/login
  2. Controller validates input
  3. Service authenticates credentials
  4. JWT generated by JwtUtil
  5. Failed attempts tracked via UserService

Practice:

  • Using Postman, send a login request
  • Decode the JWT payload to see the subject
  • Test failed login attempts and observe tracking

6. Registration Scenario (Sign Up)​

Files to Explore:

  • controller/AuthController.java
  • dto/UserRegistrationDto.java
  • service/AuthService.java
  • service/UserService.java

Concepts:

  • DTO validation with @Valid
  • Transaction boundaries
  • Role assignment with Set<Role>
  • Password hashing before storage

Practice:

  • Register a new user via API
  • Inspect the users table via H2 console
  • Verify password is hashed, not plain text
  • Document the registration flow step by step

7. Authorization & Role Checks​

Files to Explore:

  • SecurityConfig.java (revisited)
  • Annotations in controller/ProductController.java
  • controller/CartController.java
  • controller/PublicProductController.java

Concepts:

  • @PreAuthorize for method-level security
  • Role hierarchy: ROLE_ADMIN vs ROLE_USER
  • Exposing public vs protected endpoints
  • Spring Security expression language

Practice:

  • Try hitting an admin endpoint with a user token
  • Observe the CustomAccessDeniedHandler response
  • Document which endpoints require which roles

8. Product Management Scenario (Admin + Public Catalog)​

Admin Flow Files:

  • controller/ProductController.java
  • service/ProductService.java
  • dto/ProductRequestDTO.java
  • dto/ProductResponseDTO.java

Public Flow Files:

  • controller/PublicProductController.java

Concepts:

  • Pagination with Pageable
  • DTO mapping between layers
  • Soft delete pattern with isActive
  • Validation: @DecimalMin, @Pattern
  • Service method reuse

Practice:

  • Modify a product through the API
  • Verify updatedAt changes automatically
  • Confirm CartAudit logs stay untouched
  • Document the difference between admin and public endpoints

9. Cart Lifecycle Scenario (Add/Update/Remove)​

Files to Explore:

  • controller/CartController.java
  • service/CartService.java
  • service/CartServiceImpl.java
  • Cart DTOs (request/response)
  • service/CartAuditService.java
  • service/CartAuditServiceImpl.java

Concepts:

  • @Transactional with isolation levels
  • Custom exceptions: InsufficientStockException, CartItemNotFoundException
  • Business logging with lombok.extern.slf4j.Slf4j
  • Asynchronous audit logging: @Async, @Transactional(REQUIRES_NEW)
  • DTO assembly and mapping

Flow:

  • Identify how CartServiceImpl orchestrates:
    • Repository calls
    • Validations (stock check, active product)
    • DTO conversions
    • Transaction boundaries

Practice:

  • Step through the add-to-cart method
  • Note every guard (stock check, active product)
  • Document transaction boundaries
  • Test edge cases (insufficient stock, inactive product)

10. Cross-Cutting Concerns​

Files to Explore:

  • exception/GlobalExceptionHandler.java
  • Individual exception classes

Concepts:

  • @RestControllerAdvice for global error handling
  • Building consistent error payloads
  • Validation error handling: MethodArgumentNotValidException
  • Fallback exception handling

Practice:

  • Trigger a validation error (e.g., missing productId)
  • Annotate the JSON response fields
  • Document the error response structure
  • Test different exception types

11. Initialization & Seed Data​

Files to Explore:

  • config/DataInitializer.java

Concepts:

  • CommandLineRunner interface
  • Conditional user creation
  • Logging best practices
  • Idempotent initialization logic

Practice:

  • Adapt the initializer to add a sample product
  • Guard against duplicates
  • Document initialization order
  • Test with empty vs populated database

12. Testing & Quality Checks​

Files to Explore:

  • backend/src/test/java/...
  • Exception tests
  • Integration tests

Concepts:

  • Spring test slices
  • Security test utilities
  • Verifying exception paths
  • Test data builders

Practice:

  • Run ./mvnw test
  • Read one test to understand assertions
  • Review security layer tests
  • Document test patterns used

13. OOP & Design Patterns Review​

Patterns to Observe:

Interfaces & Polymorphism:

  • CartService interface with CartServiceImpl
  • UserService implementing UserDetailsService

Abstraction:

  • DTO layer decoupling controllers from entities
  • Service interfaces abstracting implementation details

Encapsulation:

  • Entity private fields with getters/setters
  • Cart managing internal consistency via helper methods

SOLID Principles:

  • Single Responsibility: Each service has one purpose
  • Open/Closed: Exception hierarchy allows extension
  • Liskov Substitution: Interface implementations are interchangeable
  • Interface Segregation: Focused service interfaces
  • Dependency Inversion: Controllers depend on interfaces, not implementations

Practice:

  • List which SOLID rule each layer satisfies
  • Identify areas that could improve
  • Document design pattern usage

14. Suggested Deep Dives​

Deep Dive 1: Login Sequence​

  • Trace the entire login sequence end-to-end
  • Controller → Service → Auth Manager → User Repository → JWT
  • Document each step with code references

Deep Dive 2: Admin Product Creation​

  • Walk through "add product as admin"
  • Document every object created
  • Note validation steps
  • Observe transaction handling

Deep Dive 3: Code Cleanup Opportunities​

  • Inspect how repeated code (e.g., logging) could be extracted
  • Reinforces clean code thinking
  • Practice refactoring techniques

Deep Dive 4: Order Placement Extension​

  • Explore how to add "order placement"
  • Mimic the cart patterns (great exercise in reuse)
  • Design the order entity and relationships
  • Plan the service layer methods

Part 2 – Frontend (React)​

0. Prep​

Setup:

  • Review frontend/package.json to see core libraries
  • Libraries: React 18, React Router 6, axios, react-hot-toast
  • Start the dev server: npm start in frontend/
  • Interact with the UI while reading components

Practice:

  • Document each major dependency
  • Note version numbers
  • Understand dev vs prod builds

1. Application Skeleton & Routing​

Files to Explore:

  • src/index.js
  • src/App.js

Concepts:

  • React Router v6: Routes, Route, Navigate
  • Nested providers pattern
  • Protected routes implementation
  • Admin-only routes

Practice:

  • Map each route to its component
  • Note which routes require authentication
  • Document the route hierarchy
  • Test navigation between routes

2. Global State – Authentication​

Files to Explore:

  • context/AuthContext.js

Concepts:

  • React Context API
  • useContext hook
  • useEffect for bootstrapping from localStorage
  • Helper methods: isAdmin, isUser
  • Authentication state management

Practice:

  • Log the stored user object after login
  • See the JWT payload in local storage
  • Document the auth context shape
  • Test logout behavior

3. Global State – Cart Management​

Files to Explore:

  • context/CartContext.js
  • hooks/useCartPersistence.js

Concepts:

  • useReducer for complex state
  • Action constants pattern
  • Async actions calling the API layer
  • Toast notifications for feedback
  • Custom hooks reacting to auth changes

Practice:

  • Trace addToCart flow:
    • Button click → Context action → API call → Reducer state update
  • Document each action type
  • Note optimistic vs pessimistic updates

4. Shared UI Building Blocks​

Files to Explore:

  • components/Header.js
  • components/CartIcon.js
  • components/AddToCartButton.js
  • components/CartItem.js

Concepts:

  • Prop-driven UI components
  • Conditional rendering patterns
  • Inline styling vs CSS classes
  • Controlled inputs
  • useNavigate for programmatic routing

Practice:

  • Document which props each component expects
  • Note how components interact with contexts
  • Test different prop combinations
  • Observe re-render behavior

5. Authentication Screens​

Files to Explore:

  • components/Login.js
  • components/Register.js
  • components/Login.css

Concepts:

  • Controlled forms with useState
  • Form validation patterns
  • Using contexts inside forms
  • Error handling and display
  • Test account shortcuts

Practice:

  • Replicate the login form in a minimal sandbox
  • Reinforce form handling patterns
  • Test validation errors
  • Document form submission flow

6. Dashboard Experience​

Files to Explore:

  • components/Dashboard.js
  • components/AdminDashboard.js
  • components/UserDashboard.js

Concepts:

  • Role-based rendering
  • Effect-driven data loading
  • Basic statistics display
  • Navigation shortcuts

Practice:

  • Note which API calls power each dashboard
  • Document how dashboards differ between roles
  • Test with different user types
  • Observe data loading patterns

7. Product Browsing Scenario (User)​

Files to Explore:

  • components/products/ProductCatalog.js
  • components/products/ProductFilters.js
  • components/products/ProductList.js
  • components/products/ProductCard.js
  • components/products/ProductDetail.js

Concepts:

  • Local filter state management
  • useEffect dependencies
  • Pagination UI implementation
  • Component composition (ProductList uses ProductCard)
  • Formatting utilities

Practice:

  • Simulate applying filters
  • Observe query param construction in productAPI.getProducts
  • Document filter logic
  • Test pagination behavior

8. Admin Product Management Scenario​

Files to Explore:

  • components/admin/AdminProductList.js
  • components/admin/ProductForm.js

Concepts:

  • Shared list component in admin mode (isAdminView)
  • Form reuse for create vs edit (isEdit flag)
  • Optimistic UI vs re-fetching
  • Datalist for suggestions
  • Form validation

Practice:

  • Switch form between create and edit modes
  • Document which fields need pre-filling
  • Test form validation
  • Observe data refresh patterns

9. Cart Page Scenario​

Files to Explore:

  • components/CartPage.js

Concepts:

  • Gated access via auth checks
  • Conditional rendering: empty cart vs filled cart
  • Checkout placeholder for future work
  • Cart summary calculations

Practice:

  • Explore how clearCart dispatches actions
  • Document removeFromCart flow
  • Test with empty and full carts
  • Note calculation logic

10. API Layer & Networking​

Files to Explore:

  • services/api.js
  • services/cartApi.js
  • Other API service files

Concepts:

  • Configuring axios instances
  • Interceptors for auth headers & error handling
  • Splitting REST concerns (auth, user, product, cart)
  • Request/response transformations

Practice:

  • Add a temporary interceptor log
  • Watch every request path and status
  • Document API service structure
  • Test error handling scenarios

11. Styling & UI Consistency​

Files to Explore:

  • index.css
  • styles/cart.css

Concepts:

  • Global resets and base styles
  • Utility classes: .container, .card, .btn
  • CSS modules vs plain CSS
  • Inline styles for component-specific tweaks
  • Responsive design patterns

Practice:

  • Pick one component (e.g., ProductCard)
  • Convert inline styles to CSS classes
  • Document styling strategies
  • Test responsive behavior

12. Testing & Quality (Future Work)​

Setup:

  • Library: @testing-library/react is already installed
  • Identify candidate components for tests

Concepts:

  • Component testing patterns
  • Context mocking
  • User interaction simulation
  • Assertion strategies

Practice:

  • Outline one test for AddToCartButton
  • Mock context values
  • Simulate click events
  • Document test structure

13. Integration with Backend​

Cross-Reference Scenario Flows:

Login Flow:

  • Login.js → authAPI.login → Backend /api/auth/login

Product Listing:

  • ProductCatalog → productAPI.getProducts → Backend PublicProductController

Cart Actions:

  • CartContext → cartApi → Backend CartController

Practice:

  • For each flow, keep both frontend and backend open side by side
  • Annotate the request/response shape
  • Document data transformations
  • Test the complete flow

14. Suggested Deep Dives​

Deep Dive 1: Admin User Management​

  • Implement "unlock account" admin action on frontend
  • Use existing adminAPI.unlockUser
  • Add UI components
  • Test the complete flow

Deep Dive 2: Product Images​

  • Add product images end-to-end
  • Use ProductForm and ProductDetail
  • See utils/updateProductImages.js for hints
  • Implement upload functionality

Deep Dive 3: Tailwind Refactoring​

  • Refactor inline styles into Tailwind classes
  • Advanced exercise to meet Tailwind learning goal
  • Maintain existing functionality
  • Document the migration process

Deep Dive 4: Performance Optimization​

  • Memoize heavy components
  • Inspect re-renders with React DevTools
  • Implement code splitting
  • Measure performance improvements

How to Use This Map​

Study Session Structure​

  1. Commit to one scenario per study session

    • Example: "Tonight: Cart lifecycle"
    • Read the listed files
    • Run the flow in the app
    • Take comprehensive notes

  2. Explain the flow

    • Explain aloud or in a journal
    • Focus on which objects interact and why
    • Document the data flow
    • Note design decisions

  3. Rebuild the flow

    • Recreate in a scratch project
    • Write pseudo-code to cement logic
    • Test your understanding
    • Document challenges

  4. Keep a glossary

    • Track Spring/React terms you encounter
    • Link terms to exact files in this project
    • Build your reference guide
    • Review regularly

Learning Outcomes​

By the end of this journey, you will have walked through:

✅ Authentication & Authorization

  • JWT-based authentication
  • Role-based access control
  • Spring Security configuration
  • React authentication context

✅ Product Management

  • CRUD operations
  • Validation patterns
  • Admin vs public access
  • Search and filtering

✅ Cart Handling

  • State management
  • Optimistic updates
  • Async operations
  • Audit logging

✅ Spring Boot Concepts

  • Dependency injection
  • JPA and Hibernate
  • RESTful API design
  • Security configuration
  • Transaction management

✅ React Concepts

  • Context API
  • Hooks (useState, useEffect, useReducer, useContext)
  • Component composition
  • Routing
  • API integration

Happy Learning! 🚀

Each concept is grounded in working code, making it easier to understand and retain. Take your time with each section and build sub-pages as you progress through your learning journey.