Learn Spring with React and MongoDB
Written by Nikos Vaggalis   
Friday, 14 April 2023

In this FreecodeCamp course, you will learn how to create a full stack application using MongoDB for the database, Java and Spring Boot for the back end and React for the front end.

After covering Dan Vega's 2023 Spring Boot Tutorial for Beginners course, this is yet another Spring based one.
What's the deal with Spring and why is there so much interest in it?

With Spring you can build almost anything that is Java based, from lone projects to enterprise grade applications,
especially the latter where Java is considered the favorite workhorse language for the top Fortune corporations.

So when adopting the Spring framework and Spring Boot, the rest of the available choices fall in the categories of the Front end and the underlying DBMS. Spring is versatile, as such you can make your pick from a vast array of technologies such as React, Angular, Vue, Thymleaf, htmx, Vaadin for the UI that is and Postgres, Mysql, Oracle and so on for the backend. This course is on React with MongoDb.

The course is split in two sections, in which Farhan Hasin Chaudry teaches the back end section of this course while
Gavin Lon teaches the front end section of the course.

Along with the front and back ends you'll also learn how to set up a project with Spring Initializr , setup a JDK, use the IntelliJ IDE and Postman for the interaction with the remote API. And an account at MongoDB Atlas DaaS, which will allow you to spin up MongoDB servers on the cloud.

You'll then need to populate your new database with test data. These are IMDB movies and come as a JSON file which will be then loaded in the database as distinct documents, since MongoDB is a Nosql Document database.

The rest of the time spent on the course will be allocated in building the RESTful API. In detail the Backend portion involves:

  • JDK and IntelliJ IDEA Installation
  • MongoDB Atlas
  • Project Initialization
  • Project Structure
  • Running The Project
  • Writing The First Endpoint
  • Database Configuration
  • Installing Additional Dependencies
  • Setting Up Environment Variables
  • Movies and Reviews Endpoints
  • Testing

As fa as the front end goes, this will not be a deep dive into React. The goal here is to demonstrate how we can interface with a remote API from a front end application created using React through which we are able to retrieve data from a MongoDB database hosted on a remote server, as well as posting data to our MongoDB database.

For writing the Javascript part, Gavin uses VSCode, so that's another bonus in learning to use this modern IDE. In detail the front end portion involves:

  • Create the React Project
  • Applying Bootstrap to our React application
  • Implementing the Use State and Use Effect Hooks
  • Create Home and Hero Component
  • Style the Carousel
  • Create Header Component (Navigation)
  • Create Trailer Component with react-player
  • Create Movie Reviews Functionality
  • Add and Get Reviews with HTTP Requests

And that's a wrap! In under 3 hours you've learned many new and shiny career-worthy technologies. And for free, thanks to FreecodeCamp!


More Information

Full Stack Development with Java Spring Boot, React, and MongoDB

Backend Code

Frontend Code


Related Articles

Dan Vega's 2023 Spring Boot Tutorial for Beginners  

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.


Helidon Microservices Framework Version 4 Reaches General Availability

Helidon, the open source microservices framework by Oracle, has been updated to version 4, just a month after the release of Java 21. With this release Helidon becomes the world’s first virtual [ ... ]

2023 Hour Of Code Announced

New activities for this year's Hour of Code have been announced. The focus for 2023,"Creativity with AI", is designed to let students learn about computer science and artificial intelligence.

More News




or email your comment to: comments@i-programmer.info

Last Updated ( Friday, 14 April 2023 )