REACT / REDUX and North LA Scout — Volunteer work

One of the most impactful achievements of my career has been my #volunteer work in Louisiana the past two years.

I leveraged my time as a #Division1 #athlete and #coach to help high school kids in #Louisiana get scholarships and connected with universities.

In my spare time, I go around to basketball games all over the state, in addition to watching videos, to help scout for the best talent and write about them and connect them with college coaches.

Last season alone, over a dozen of the players featured on my website are now listed on college rosters.

For over a year I’ve held virtual study sessions and ACT prep to help under-performing athletes improve their grades.

This has been the most rewarding work of my professional career, and I haven’t made a dime.

Working for free ensures that I get to set my own terms, tell the truth, and people trust me.

In just two years I’ve become one of the seminal voices in Louisiana high school basketball, just by starting something that I wanted to see happen.

Now, to the technical side of the story — converting my WordPress site into a React app.

(check out my portfolio to see the finished sites I’ve built this year)

Above is the Player Portal for the WP site. I designed, took all the pictures, did all the scouting and wrote all the words for my volunteer project North LA Scout.

I made North LA Scout a few years ago, back when I still knew how to put together a website (see Momma Tried) but before I really wanted to spend my time doing it.

So, I turned to WordPress. While learning WP informed my day job (as Associate Editor at Minden Press-Herald, our horrendous site uses WordPress … yes I’ve tried to get them to move away and redesign, no the publisher won’t let me 🤷🏿‍♂️). For North LA Scout, the focus was just about the players, their pictures, and really the Twitter feed anyway.

I designed an overview quickly, then molded into something functional.

As a software engineer, I thought it’d be a good project to redesign the site from scratch using React. This time I want to lean on Styled Components and proper usage of Hooks.

Styled Components are coming through in the clutch

I wanted to use Redux as well and practice using the Redux store as a global state, this time to manage my players, their statistics and info coming back from my server.

So far, everything is running smoothly, aside from the CSS and design looking rather GeoCities // AngelFYRE.

Player Reducer checks the case statement to deliver the payload to my new state.

Using a PlayerReducer along with my action creator to “addPlayer” — users will be able to add players they think are impressive in Louisiana with my own form.

Relational DB on the back — my schema, with updated video link feature that was bugging me (serializer issues).

React allows controlled forms, which simultaneously teach programmers what is actually going on with form control. As users input names and info into the boxes, my local state updates with every letter input

I’ll definitely implement authentication and user functionality so that people can’t delete everyone’s info, but I like the idea of easy access to the site, provided they are actually interested in HS basketball.

I’ll make sure there is some process, usually OmniAuth to let people log in through their social media has worked fine. Perhaps I’ll stretch my wings and do some sort of privacy questions, and maybe even make them silly!

Action Creator uses the fetch fn() to hit up my backend, then dispatch my type and player payload to the reducer.

I have my server set up on the back end using Ruby On Rails. My serializer did a good job reminding me it existed last week when I wanted to add a “video” function and have it be part of a player’s DNA on the back end. I kept looking for the URL I’d made in the form, but it wasn’t coming back. Consoled it a few different ways, and still… nothing.

I kept getting stuck on why it wouldn’t show up before realizing I hadn’t adjusted the serializer to have the video attribute show up on the server, so it wasn’t getting sent back to the front.

At this point, everything is in place to really make it go.

React Router system in place, important to SPA functionality.

Player cards will look similar to these FIFA cards.

It’s all structurally in place.

Now comes the best part: making it look cool. I want the players to all have their own 2K cards, similar to sports games where they use microtransactions to trade player cards. I think the kids will like that.

Every player page will have links to their best video clips, info about them, favorite movies, etc so that college coaches can better get to know our players here. Louisiana is far, far behind with regards to recruiting. Our best players don’t get recruited and visited close to the level commensurate with their talent and what they show on the floor.

Part of it is because they don’t make good enough grades, part is because we don’t have the infrastructure to get national attention, so even our best players have to fight an uphill battle just to break even with the other kids in our country. I suppose both of those problems point at infrastructure.