Building a gear-list planner for backpackers as my final project with React and Redux

Photo: Unsplash/Matt Gross

The end of my Flatiron Journey is new yet feels incredibly familiar. Not because I’ve graduated from undergrad or graduate programs before but because I’m diving into the world of thru-hiking for my final project. It’s a niche world I’ve come to know in the last two years in the middle of a global pandemic and as a full-time caretaker.

I started the online web dev program the same year my mom as diagnosed with terminal cancer. In the following weeks, we learned she’d need a major surgery that lasted hours and a months-long stint in rehab to heal and relearn to walk.

In the months ahead, I’d stop coding. After three months of family leave, I’d also quit my job. When my mom had to live in a rehabilitation center post-surgery, my father and I stayed with her round-the-clock. For comfort and to pass the time, I watched travel vlogs. As you do, you find yourself in a YouTube rabbit hole and find yourself consuming something entirely different. For me, that was Pacific Crest Trail vlogs.

First things first: The Pacific Crest Trail is a long-distance trail spanning 2,653 miles from the border of Mexico to Canada. You may know it if you’d read Cheryl Strayed’s memoir Wild or watched the Reese Witherspoon-led movie based on the book. In an instant, I knew I wanted to thru-hike the trail someday.

In the couple years since our family’s stretch in hospitals and rehab beside my mother, my wonder for thru-hiking has not ceased. That year, I followed hikers like Mari Johnson, Elina Osbourne, and Mary Mansfield on the trail, from start to finish. In the darkest of times, I found joy, distraction, and a general hope for the future in those videos.

Then a global pandemic happened. I restarted the program but became overwhelmed with everything that was happening and stopped working again. It wasn’t until I received an email this year that announced the anticipated end of Learn.co that I got my head into gear just in time.

I dove straight in and finished the Sinatra portion, completed my project and passed my assessment, then again with Rails, and JavaScript. And now React and Redux.

Finding the way

The rollercoaster of emotions in each section was identical. At the beginning, there would be serious doubt. Then after spending 15 to 30 days working on the course-load and feeling my way through a project, I’d figure out what I was doing.

Talking to other students who were in the same place as me (AKA frantically trying to keep their heads straight and finish the program in time), they felt the same exact things at the beginning. There were nerves, extreme doubt, and emotional breakdowns. But towards the middle, the nerves always soften and in the end, you learn to keep calm, throw console.logs everywhere, and gain the confidence to solve any bug that comes your way. And if you can’t, you get really good at asking your help on Slack or in study groups. With every project, I attended countless study groups or project prep powwows, which were immensely helpful. (TLDR; You got this.)

The Final Project

For this project, I didn’t plan as much nor did I keep a daily work journal like usual. I did jot down the day’s accomplishments when I remembered to do so.

With this project, there was an urge to jump in and so I did. I drew up a models chart on Draw.io on the first day, which was WAY too complicated. I ended up scraping most of it, and sticking to simpler models for the MVP. Here’s how it went:

Day 1 (6/13): finished backend

Day 2(6/14): enabled login and get_current_user to enable login to persist with page refresh with sessions.

Day 3 (6/15): logout functionality, signup functionality, layout stuff

Day 4 (6/16): work on item new form

Day 5 (6/17): complete signup post request, clear out history props in login form, complete create item new form

Five-ish days in, I have an MVP to turn in. After turning in my project so I an schedule an assessment, I’m going to work on my stretch goals.

Stretch Goals

Like many apps, Compact is inspired by something that already exists: Lighterpack is a one-of-a-kind app built for thru-hikers by a thru-hiker.

I remember stumbling on it in the Ultralight subreddit for backpackers and thinking it was brilliant. Seeing an app that’s simple in idea yet so immensely helpful to people is an inspiration. It reminds me why I wanted to learn programming in the first place: to solve problems with code.

I have a long-list of stretch goals for the app. My goal is to have the functionality exceed the original. But that will take time, user input much later in the future, and lots of practice with React and Redux on my end.

Here are just some of them:

  1. user can have multiple gear lists
  2. signup functionality
  3. keyword tags for items
  4. functionality for couples to split weight of items in two packs.

Right now, I’m focused on getting the MVP out the door so I can schedule my assessment in time to graduate. Needless to say, I have a long way to go with Compact but I’m also immensely proud of myself.

I’m glad to have found out about thru-hiking from my seat in the lumpy recliner next to my mom’s hospital bed two years ago. I’m happy to build something I can use while planning my future PCT trek.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Handy is a fun and exciting prediction game platform that anyone can enjoy.

OPEN CYBEROAM SSL VPN CONFIG WİTH OPENVPN

Critical Connections in a Network

What happens when you visit a webpage? | How the Web works?

Decorator Pattern, Simplified

Ubuntu 20.04 LTS Released! Focal Fossa is Out — Tec Robust

The Top 8 Construction Project Management Software According To Reviews

More GraphQL Schemas and Types

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
Joann Pan

Joann Pan

More from Medium

Redux vs ReduxToolKit — Simplify Redux Application

React JS- Decoding Hooks

Track or detect number of tabs open for same website in React

What are hooks in React?