Full Stack Application Course

lets go

Overview

• Objective: Learn to create a full stack application using:
  • MongoDB for the database
  • Java and Spring Boot for the backend
  • React for the frontend
• Instructors:
  • Farhan Hasin Chaudry: Backend
  • Gavin Lon: Frontend

Project Highlights

• Demonstrates separation of concerns via loosely coupled architecture.
• Encourages independent evolution of client and server code.

Backend Development (Java with Spring Boot and MongoDB)

Instructor: Farhan Hasin Chaudry

Course Setup

1. Software Required:
   • Java Development Kit (JDK)
   • IntelliJ IDEA
   • MongoDB Atlas account
2. Java Setup:
   • Use JDK 17 (latest LTS version)
   • Install on Windows using 64-bit installer
   • Verify installation with java -version and javac -version
3. MongoDB Setup:
   • Sign up or log in to MongoDB Atlas
   • Create a project and database
   • Use MongoDB Compass for database management

Spring Boot API Development

1. Project Initialization:
   • Use Spring Initializr at start.spring.io
   • Dependencies: Lombok, Spring Web, Spring Data MongoDB, DevTools
   • Use Maven for build automation
2. Coding Structure:
   • Models: Define Movie and Review classes with appropriate annotations
   • Controllers: Implement endpoints for movies and reviews
   • Services: Business logic for accessing and manipulating data
   • Repositories: Interface with MongoDB using Spring Data
3. End Points:
   • GET all movies
   • GET single movie by IMDb ID
   • POST new review linked to a movie

Deployment & Testing

• Test API endpoints using Postman
• Debugging and ensuring proper database connections

Frontend Development (React)

Instructor: Gavin Lon

React Application Setup

1. Development Environment:
   • Node.js installation required
   • Use VS Code for development
2. Project Initialization:
   • Create a React app using npx create-react-app
   • Project structure cleanup

Key Components

1. Axios Configuration:
   • Setup Axios for HTTP requests
   • Base URL and headers configuration
2. Routing:
   • Use React Router for navigation
   • Define paths and components
3. UI Components:
   • Hero Section: Display a movie carousel using Material UI
   • Header: Navigation bar using React Bootstrap
   • Trailer: Play movie trailers using React Player
   • Reviews: Display and add reviews, handle state management

Styling and UX

• Use CSS for styling components
• Responsive design with media queries
• Integrate Font Awesome for icons
• other stuff

Testing and Deployment

• Use npm start to run the application
• Verify HTTP requests and user interactions

Conclusion

• Course successfully covers building a full stack application with a focus on backend API development and frontend interaction.
• Encourages learning about further topics like authentication, complex relationships, and larger API designs.
• Acknowledgements to FreeCodeCamp, MongoDB Atlas, and the movie database providers used for the course.