Skip to main content

Movie List Application - Introduction

Overview​

The Movie List Application is a full-stack web application that allows users to browse movies, view details, and write reviews. It's built using modern web technologies and follows a microservices architecture pattern with containerization.

Architecture​

This application consists of three main components that work together:

1. Frontend (movie-list-front)​

  • Technology: React.js (JavaScript library for building user interfaces)
  • Port: 3000 (exposed through Docker)
  • Purpose: Provides the user interface where users can browse movies, view details, and interact with the application

2. Backend API (movie-api)​

  • Technology: Spring Boot (Java framework for building web applications)
  • Port: 8080
  • Purpose: Handles business logic, data processing, and provides REST API endpoints for the frontend

3. Database (mongo-local)​

  • Technology: MongoDB (NoSQL document database)
  • Port: 27017
  • Purpose: Stores movie data, user reviews, and other application data

Key Technologies Explained​

Docker & Docker Compose​

The entire application is containerized using Docker, which means each component runs in its own isolated environment (container). Docker Compose orchestrates these containers, defining how they should work together.

Spring Boot​

A Java framework that simplifies building production-ready applications. It provides:

  • Auto-configuration: Automatically sets up common configurations
  • Embedded server: Runs without needing external application servers
  • Dependency injection: Manages component dependencies automatically

React.js​

A JavaScript library for building interactive user interfaces using:

  • Components: Reusable UI building blocks
  • Virtual DOM: Efficient rendering system
  • State management: Handles dynamic data changes

MongoDB​

A NoSQL database that stores data in flexible, JSON-like documents rather than traditional tables and rows.

Application Flow​

  1. User Access: Users access the React frontend at http://localhost:3000
  2. API Communication: Frontend makes HTTP requests to the Spring Boot API at http://localhost:8080
  3. Data Storage: API interacts with MongoDB to store and retrieve movie and review data
  4. Response Chain: Data flows back through API to frontend and displays to user

Development Setup​

The application uses Docker Compose to manage all services with a single command:

docker-compose up --build

This command:

  • Builds Docker images for frontend and backend
  • Starts MongoDB database
  • Connects all services together
  • Makes the application available for use

Project Benefits​

  • Scalability: Each component can be scaled independently
  • Maintainability: Clear separation of concerns between frontend, backend, and database
  • Portability: Docker containers ensure consistent behavior across different environments
  • Modern Stack: Uses current industry-standard technologies and practices