Spring Boot + JavaScript + Heroku

Watch me build a word search game from scratch using a Java backend for puzzle generation, Spring Boot for API and JavaScript front end for interactive playing experience. See the project built step-by-step and deployed on the cloud to Heroku.

Course curriculum

  • 1

    Introduction

  • 2

    Building game logic

    • Outlining the word search puzzle

    • Defining the grid

    • Moving to a grid class

    • First attempt at placing words

    • Implementing dimension boundary check

    • Checking prefilled spaces to eliminate overlap

    • Supporting multiple directions of word placement

    • Filling in words with random directions

    • Adding more directions and finishing up the grid

  • 3

    Building an API with Spring Boot and deploying to Heroku

    • Initializing a Spring boot project

    • Refactoring Grid service to make it stateless

    • Starting up the API and running into nasty issues

    • The fix for the issue

    • Creating a Heroku App

    • Deploying the API to Heroku

    • Allowing-overlapping-words

    • Fixing a bug and wrapping up API

  • 4

    Building the UI grid

    • UI project setup and Parcel workflow

    • Fetching API response

    • Using Babel for transpiling JavaScript

    • Fixing CORS issue with Spring Boot annotation

    • Generating the grid table

    • Displaying the word grid

    • Styling the grid and using SCSS

  • 5

    Adding interactivity features

    • Adding event handlers and data attributes

    • Selecting letters when click and drag

    • Tracking selected letters and deduping

    • Using a range-based approach for selecting words

    • Implementing direction-limited selection of words

    • Extracting and matching word found

    • Fixing some bugs and cleaning up

    • Getting words and grid size as user inputs

    • Displaying user entered words in the UI

    • Bundling and adding static assets to Spring Boot

    • Deploying and verifying on Heroku

  • 6

    Conclusion

    • Conclusion

    • Next Steps