Lessons Learned from 2nd Round of Large-Scale ReactJS Development

And What I Plan To Do Better in Round 3

TL;DR:

How I Got Here

Image for post
Image for post
Actually, since I couldn’t find a picture of me as a baby, this is my son rocking out.

Part I: My Backstory

Part II: The Crash & Burn of My First Large-Scale ReactJS Project

Image for post
Image for post
We’re ready for takeoff… er, wait…

My Approach for Large-Scale React Project #2

Image for post
Image for post
Hard to hit it straight unless you first line up your shot.

What Worked Well

Image for post
Image for post
The sweet smell of success

Using create-react-app (and not ejecting it)

Naming Convention + File Structure

├── scripts
│ ├── actions
│ │ └── moduleActions.js
│ ├── components
│ │ ├── App
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ ├── App.scss
│ │ │ ├── App.test.js
│ │ ├── buttons
│ │ │ ├── SomeButton
│ │ │ │ ├── SomeButton.css
│ │ │ │ ├── SomeButton.js
│ │ │ │ ├── SomeButton.scss
│ │ │ │ ├── SomeButton.test.js
│ │ └── ...
│ ├── constants
│ │ └── ...
│ ├── reducers
│ │ └── ...
│ ├── store.js
│ └── utils
│ └── ...

Mocking Data With json-server

What Didn’t Work So Well

API Integration Failings

Set the Budget and Shorten the Timeline

Getting Ready for Round 3

Consider GraphQL

Be More Intentional About Deliverables

In Summary

Passionately empowering people and their ideas to reach their full potential through design, internet technology, and marketing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store