This app will become my first without training wheels. Reflecting on the process. See the source code here.

Getting started

Like many new devs, I was at a loss for ideas when setting forth on a mission to build a portfolio. It’s not that coming up with an idea is difficult in itself, rather determining if the idea is achievable. Mapping the problem in the mind to a plan is the most difficult step. Second only to building the thing, apparently. Wanted to make an application that would be useful, not just another to-do app. After giving it some thought, decided on a meal+grocery trip planning application. Based around an analogue method of arranging for week’s food. Decided to start with react and redux for the front end, and typescript for the tooling and other benefit static typing offers.

Planning the App

Being a visual thinker, my first course of action was to mock up the UI in illustrator. This proved to be a surprisingly effective tactic for me, because it enabled organizing my thoughts wrt user interface and functionality simultaneously. After a few revisions, was able to trim out some extraneous features. Having a visual thought-space means my imagination’s concept of how the app will be used can easily make more work for me if I’m not careful. Also have to be wary of premature optimization.

After arriving at an iteration I felt good with, analyzed the mock up for component composition. Once I understood which components would be used, organizing them into a hierarchy was straightforward.

Making The UI

With a solid idea of how the app would operate, I used create-react-app to get some boilerplate. Then procedurally built the UI out of components, refactoring smaller and repeated parts (as per the hierarchy) into their own components. Using function stubs and placeholder graphics, the basic layout of the ui was constructed. The next step to getting the application working would be to connect the components to a redux store.

State Management

React possesses it’s own capabilities for state management. Indeed, using react’s state capabilities might have been easier in the short term. However, my goal is not only to create a practical, useful product, but also to learn impactful technologies. From what I have learned about redux, it costs a some effort upfront for a steep learning curve, but pays off in the long run as it scales well with increasingly complex apps. After getting cozy with the redux lexicon (actions and action creators, dispatch, reducers, providers, store, context, and more), I began integrating it.

Current status: the first iteration of the store (and it’s default shape) have been completed; Once the interface type definitions get sorted, work can continue on the reducer.

=======

This is as far my progress as reached, … to be continued.