Live Crash Coding Part 2 - Front End: Shopping Shortlist using React JS

Introduction & Motivation

As a weekly grocery purchaser, I often keep myself around with a lot of sticky notes that go unnoticed before every time I buy groceries. Realising that I don't buy anything out of ordinary, but I do have a pattern to follow, I planned to organise my list into Daily, Weekly, Biweekly and Monthly items based on the consumption. Also, based on the availability and category, I just need to select only a few to buy for the day.

All I would require at the end is just a list of items, which I can put it on my WhatsApp and take it to the grocery market. It should be a simple textual list of items to buy and where to buy as well, so that, if I need to travel to multiple places, all I need to do is to follow the list.

Learning Outcomes

As a web application, we'll be together learning how to work as a team (maybe?) on a real industry project scenario and at the end of this session, you'll learn how to build a simple, yet powerful, yet complex reactive single page web application using React JS, touching almost all the features of it. Also, since this is a live coding, you will have the opportunity to ask your questions, then and there to get yourself familiarised with the industry standards.

Also, check out...

My Website My Blog

Here are the outcomes of learning from this project:

• Setting up your environment for React JS development.
• Also, please have a look at the article I wrote on My Personal Development Environment.
• Git & GitHub along with a simple GitFlow strategy.
• Basics of HTML & CSS with Responsive Web Design using Bootstrap framework.
• Kick Starting development in React JS with Create React App.
• React Componentisation with States and Props.
• Using Axios to make Service Calls to a static JSON endpoint.
• Persisting data on the browser session using Local Storage (part of Web Storage).

Product Features

As a front end only application (the one we're going to create today), all the data that's been entered will be stored in browser's local storage. Once the session is cleared (restarting the browser, clearing the cache, etc.), all the data that's been stored with be lost. Other than that, the features of the product are listed below:

• Lookup grocery stores from an external JSON endpoint.
• Add an initial list of groceries on the basis of daily, weekly, biweekly or monthly.
• Import and Export states of the grocery list.
• Group items of the same kind, for example, bread and bun can go into breakfast and we buy either of them.
• Persist the data after refresh of screen by transferring the data in memory to Local Storage or similar techniques.

Session Information

This session will be conducted via Zoom Webinar and I would request everyone to have Zoom client downloaded and installed before attending. You maybe required to pair with me, which is a good chance for students starting their professional journey to see how it works.

Bonus: There could possibly be some kind of hiring challenge at the end of the event. So look out for that as well!

For the timings:

• Date: 24th May 2020
• Duration: 2 hours
• UK: 10 am BST
• India: 2:30 pm IST