Project: Multi-Carrier Shipping Rate Calculator

Build a sophisticated shipping rate calculator that compares rates across multiple carriers. Apply React 19, TypeScript design patterns, and modern JavaScript to create a production-ready application for the logistics industry.

Course Content

Phase 1: Project Setup & Architecture Planning

Set up your development environment, plan the application architecture, and design the type system that will support the entire project.

180m

1Phase 1: Project Setup & Architecture Planninglesson30m

Phase 2: Package Input Form & Validation

Build the multi-step package input form using React 19 features, implement comprehensive validation with Chain of Responsibility pattern, and create custom hooks for form state management.

300m

1Phase 2: Package Input Form & Validationlesson45m

Phase 3: Rate Calculation Engine with Design Patterns

Build the core rate calculation engine using Strategy, Factory Method, Decorator, Adapter, and Singleton patterns. Implement carrier-specific logic, handle API integration, and create an extensible architecture.

480m

1Phase 3: Rate Calculation Engine with Design Patternslesson60m

Phase 4: Results Display & Performance Optimization

Build an intuitive results display UI with comparison features, implement React 19 Suspense for loading states, apply performance optimizations, and create a responsive user experience.

300m

1Phase 4: Results Display & Performance Optimizationlesson45m

Phase 5: Testing, Documentation & Deployment

Complete comprehensive testing strategy, write documentation, create a demo video, and deploy the application to production. Final polish and project submission.

240m

1Phase 5: Testing, Documentation & Deploymentlesson40m

Appendix A: FedEx Rate API Mapping

Reference guide for transforming FedEx Rate API responses into the internal ShippingRate type using the Adapter pattern.

30m

1FedEx Rate API Response Mappinglesson30m

Appendix B: UPS Rate API Mapping

Reference guide for transforming UPS Rating API responses into the internal ShippingRate type using the Adapter pattern.

30m

1UPS Rate API Response Mappinglesson30m

What you'll learn

Initialize Next.js 16 project with TypeScript and Tailwind CSS 4
Design core domain models and type hierarchies
Plan pattern usage and create architecture diagram
Set up project structure following best practices
Configure development tools (ESLint, Prettier, testing)
Create multi-step form using React 19 Server Actions

Prerequisites

• javascript-es6-foundations
• react-19-mastery
• typescript-design-patterns