the past month
During the past month, I have continued working on the Boys and Girls Club emotion tracker. If you did not see my last blog post I will give you such much-needed context. If you did, I will see you in the next section.
Boys and Girls Club is an organization that provides voluntary after-school programs for young people. They want to give their members agency and a voice. To accomplish this we set out to create a web app that allows Youth Development Professionals(YDP) to gather how members are feeling. Last month I worked with a team to build the foundation for the app. This month I iterated upon that foundation with another team.
idea -> wireframe
I was excited to jump into the next iteration because we got to work on an integral feature. We had the challenge to create the user flow for the YDP to collect the sentiment data from the members.
The flow we worked out can be seen below.
After the YDP logs in, they are taken to a dashboard where they can select a club. Then they select an activity. Then they are taken to a scanning page to scan the member's id card. After the scan is successful they hand the iPad over to the member who can select an emoji based on how they are feeling. Next, they hand the iPad back and it is automatically redirected to the scan page.
The reason we specifically went with these flows is so a YDP can scan a lot of members for the same activity back to back. This was some important feedback we got from the stakeholder in our first meeting.
Inspired after our meeting I made this wireframe to illustrate what the flow could look like.
wireframe -> code
If only this was an easy translation to make. Firstly our team broke out into each part of the project. I started by working on the admin pages. I want to focus on my contributions to our global state.
The first thing I did was draft out what providers we would want for our project. I created an Admin, YDP, and User provider. After login, the user provider would get info on the user. The Admin would be for storing data on the admin flow. The YDP for storing data on their flow.
Below is the admin context.
For each slice of state, we want to implement we use a react hook. This allows the data to persist as the user routes over different pages. Each of the useState's is for a management page an Admin uses.
You can see below when we visit the manage members page after our API call our context state is filled out and pulled by the page to display the content.
current state of the project
Here is a list of our shipped features
- An Admin can add Members, Activities, and Clubs
- A YDP can select collect sentiment data from members
- Members can select an Emoji based on how their feeling
- As an Admin or Club Director I can view sentiment data of members
For a full breakdown of the project, you can view the youtube breakdown
As for the future of the project, I am excited to see where the next team takes the project. There is a lot of room for data science applications now that the member sentiment data is being collected. The only technical challenge ahead is going to be the formation of the data as it relates to the emojis.
Top comments (0)