This was inspired by the Amazon / Wholefoods grocery shopping application.

What it does

You can test the live project in my CodeSandbox

It serves as a rudimentary harvest inventory management system for small family farm. Basically, it's designed for a family farm which sells a portion of its harvest direct to the consumer.

The application has full Create, Read, Update, and Delete (CRUD) functionality. The codebase may be readily adapted to create variety of applications (e.g., online store, an address book, and a todo-list).

How I built it

This was built with create-react-app

Challenges I ran into

Writing the tutorial was the most difficult part.

Additionally, I usually write heavily commented code. This at times includes commented-out code which demonstrates various ways to accomplish the same objective. Given that this code is for public use as a tutorial, I had to remove most of these comments so it would be suitable for publication. Indeed, I ended up creating a public branch and a personal, private branch of the codebase.

Accomplishments that I'm proud of

I'd be satisfied if I can get this project submitted before the deadline.

What I learned

setState() in React is asynchronous for performance reasons. One can get around this feature by sending an anonymous function as a callback within setState.

Apparently this "workaround" is frowned upon by React purist. It is suggested that ComponentDidUpdate be used instead

What's next for Arroyo Family Farm's Harvest Inventory Application

Some potential next steps for this project would include:

  1. Integration with a NoSQL database such as MongoDB or Firebase
  2. Adding authentication and access control for security
  3. Hosting on a live sever running node and NGINX
  4. Using Jest to run automated test and to incorporate test driven development best practices
  5. Integrating with APIs to pull in external data
  6. Explore the use of CSS in JavaScript libraries such as styled-components, react-bootstrap, etc.

Built With

Share this project: