Ahh… summer BBQs. Is there anything that defines the summer season better than a good BBQ? Yes, yes, there is: A browser-based application, made with React and Redux, that helps you organize your BBQs. Don’t you agree? How else are you going to keep track of who ordered what and with which toppings? Did Aunt Vi want one or two hot dogs? Did she order them burnt or regular? Did you buy enough turkey burger patties? You forgot that Manny and Bigbah both wanted two veggie burgers each! How could you have accounted for that?

Enter xfBBQ, the solution to all your existential BBQ woes. I built xfBBQ using the latest and greatest in web application technology, React and Redux. It’s the ultimate answer to managing your perfect BBQ. As its back end, xfBBQ uses the excellent Harmony Core framework—your solution to modernizing your Synergy applications with web services!

Is all this hyperbole not enough for you? Do you also need to know how you can get your hands on this wonderous application? Easy peasy: It’s on our GitHub, of course! Just clone it and see for yourself. You can check out the application live, too. xfBBQ is for everyone!

You may be wondering, how did I xfBBQ? What do you mean “how” did I xfBBQ? That’s not even a valid question. I don’t think xfBBQ is a verb. But maybe you meant how did I create xfBBQ? Now that’s an excellent question, which calls for an equally excellent answer! Fortunately, you can find my four-part series about xfBBQ on YouTube.

Part 1 explains how to set up your Harmony Core and React environments from scratch. I talk about what prerequisites you need for the app. I also explain in detail how to edit your regen.bat to get Postman working with Harmony Core. In addition, I talk about the first stages of getting the front end and back end to talk to each other. By the end of this segment, the application can display raw JSON data coming from Harmony Core to the front end.

In Part 2, I clarify how to add a primary key generator in order to POST new data to the back end. I add a user registration form to show off this new feature. Then, Redux comes crashing into the BBQ party, so I need to explain how it all works. Redux is here to stay, so I integrate Redux into our app and show it working in a new login form. Based on the permissions set on who logs in, the application will display different pages for different users, all thanks to Redux.

Part 3 introduces reCAPTCHA into the picture. I show how to use reCAPTCHA to protect both the front and back end from user registration bot attacks. Afterwards, I add batch order processing to the mix. This allows a user to add multiple orders at the same time, all as one POST, leading to less strain on the back end. In addition, I update the UI a little bit to make the data coming from the back end easier to read.

Lastly, Part 4 explains why xfBBQ needs user authentication. Because the back end is public, it needs protection from all sorts of nasties out there in the wild. User authentication helps by forcing a user to sign in from the front end before being able to do anything with the back end. Finally, I go over styling the application using Bootstrap so that it looks all nice and fancy. As a bonus, Bootstrap is responsive, meaning that the web application now works on your phones! As an ultimate step, I discuss how to use create-react-app to build a production version of xfBBQ. I set up Harmony Core to use this production build, too.

So, what are you waiting for? xfBBQ is the perfect example of how you can modernize your applications and bring them to the web. In my webinars, I explain everything in depth, from initial setup to final commit. Plus, with a few more steps, your applications can be mobile friendly! Now, who’s ready to put their hot dogs on the grill? I’ll be waiting… Hold the mustard, please.