Kids Matter!
Pandemics, culture wars, and national unrest!
Boys & Girls Club
What do Denzel Washington, Hulk Hogan, and Jason Derulo have in common? They are Boys & Girls Club alumni! Boys & Girls Club is an organization founded in 1860 by three amazing women in Hartford, Connecticut — Mary Goodwin, Alice Goodwin, and Elizabeth Hammersley. They wanted an alternative activity for young men who were aimlessly roaming the streets. They have made a huge impact in our world by making a positive impact on our youth today.
Engaging tech for Member Insights
Many activities revolve around tech at the Boys&Girls Club. Digital programming, computer gaming, and safe social media are everyday life at Boys&Girls Club. These activities are great for learning code and having a future in tech but Boys&Girls Club is not only teaching the latest in tech, but they are also using it.
Lambdaschool has partnered up with Boys&Girls Club to develop an innovative application to help understand what their staff and members are experiencing through their programs. My team of engineers is currently working on the latest iteration of what could potentially raise the bar on Youth Organizations all across the board starting with the Boys&Girls Club. It’s an experience tracker that can take a member's feedback with just a click of a button. We then take that feedback and run it through the latest in machine learning to gain more insight into members and then react with enhanced operations and programs.
Introducing the Experience Tracker
The Experience Tracker is in its second phase of development and I am fortunate enough to have worked on building the main feature of the application. The tracker uses QR technology to scan codes to keep the identity of members secure, but it also helps speed up the process of registering members' experiences during their interactions at the club.
Although it was exciting to create something new and real, it was also nerve-racking because of the time constraints we were put under. Could we ship in time was on our minds?
Challenges
There were several challenges we faced when we started working on the features that were given to our team. The main challenge was to integrate the frontend with the backend. I was tasked with creating the state for the app as well as creating an authorization mechanism that made routes only accessible to the roles that were authorized by our stakeholders.
Get Isaac Pak’s stories in your inbox
Join Medium for free to get updates from this writer.
After several meetings with the team we decided to use React’s context API for our state management. My first iteration for state was creating providers in the context for each varying part of state which is what React recommends:
export const UserContextProvider = props => {
const setUser = user => {
setState({ ...state, user: user });
};const resetUser = () => {
setState({});
};const initState = {
setUser: setUser,
resetUser,
user: {},
loading: false,
error: false,
message: '',
};const [state, setState] = useState(initState);return (
<UserContext.Provider value={state}>{props.children}</UserContext.Provider>
);
};
This method was okay at first but when we needed more and more state, things became a little bit of ‘Provider Hell’.
<UserContextProvider>
<ClubsContextProvider>
<ClubContextProvider>
<ActivityContextProvider>
<EmojiContextProvider>
<MemberContextProvider>
... ...
....
We needed another approach and there weren’t many solutions to this problem online. I finally went with a method that solved the issue and it proved to be an easy implementation:
export const MemberContext = createContext();export const ContextProvider = ({ children }) => {
const [id, setId] = useState('');
const [exists, setExists] = useState('');return (
<Context.Provider value={{ id, setId, exists, setExists }}>
{children}
</Context.Provider>
);
};
By having just one provider for state we can eliminate the huge nesting of components and it also makes it easier to access.
The other feature I worked on was Authorization. I have previously built an authorization system but it was fairly easy to implement because I also had graphQL available. During this go-around, I didn’t have access to tools like directives to just declare authorization on components. But I did have some experience with working on a backend that used middleware for authorization. By using a HOC component and using that like middleware in React Router I was able to give the application an easy way to authorize resources.
export const Authorization = (roles, WrappedComponent) => {
let { user } = useContext(UserContext);
let role = user.roles && user.roles[0].role.name;
let history = useHistory();
useEffect(() => {
if (!role && !roles.includes(role)) {
history.push('/unauthorized');
}
}, [role]);
return <WrappedComponent />;
};<SecureRoute
path="/manage-members"
component={() =>
Authorization([Roles[0], Roles[1]], ViewMembers)
}
/>
A step in the right direction
Having several meetings with our stakeholders we were able to put them into User Stories and then into actionable tasks. This final sprint we not only completed all tasks, but we were able to do add some extra features that exceeded our stakeholder’s expectations. Here’s a list of some of what we accomplished:
- An authorization feature to enable hierarchal access to resources. If they manually input a path they don’t have access to then they are immediately redirected to a page with an unauthorized notice.
- A QR scanner to scan members for identification. YDP agents can scan or type in member IDs and then members will be able to select how they felt about a particular activity using emojis.
- Dashboards for future metrics for data analysis. Admins will be able to log in and see how well clubs are doing by scanning individual members and their total reactions.
What’s next
My time with a team of 6 developers is now over for this project. As a team we developed documentation for future teams and have given our insights to future development. The evolution of this product will probably be a progressive app and possibly going native, React-Native. The biggest challenge in the future will be adding an additional team for data mining. This will require lots of complex machine learning and lots of meetings with stakeholders to find exactly what kinds of key metrics they would like to see.
As for me, I will now be looking for the next challenge that will require the skills that I learned from working on this project. I hope that it will be just as rewarding as this one has been. I am proud to have participated in what could be the next thing that takes the Boys & Girls Club to the next level.
