Hello, my name is Benji Riethmeier, and I am a full stack engineer for the Courtside project.
What is Courtside
Courtside is a mobile app that allows users to fully customize their sports experience by following the exact information they want to see. Users can follow their favorite sports, teams, players, and even individual stats.
The app is built with React Native (using the Expo platform) and Typescript on the frontend. On the backend, the Flask framework serves as our API and MongoDB is used for our database.
What is Courtside (Currently)
Users can follow their favorite sports Basketball, teams, players, and even individual stats. Users can log into the app and have their data retained on the server.
This Week
Tasks
As per last week’s devlog, this week I wanted to focus on fleshing out the authentication system. This involved a few things:
- The ability to change one’s email from the app.
- An option to recover your password if you forgot it
- Confirm the user’s email when they are creating an account
- A tour that guides users through some of the app’s features when they first create an account
However, out of these tasks, I was only able to complete tasks 1 and 3 with a bit of experimentation on task 4.
Confirming User Emails
When a user registers for a new account, they cannot access the app until they validate their email. This is done by sending the user an email, which has a link to a page which will validate their email. After they visit this page, and it says the validation was a success, the user can return to the app and begin using its core features.
The page on the frontend directing you to your email
This feature required a few new routes:
/users/verifyEmail: this is where the email is linked to, it verifies the email and then displays a HTML page saying to go back to the app./users/resendEmailVerification: this route gives users the option to have the email resent to them if the previous email did not come through
The email that users recieve after registering their account
Placeholder for the website users will be directed to after following the email link
The register and login route also had to be updated to send the email if the user is not verified yet.
On the front end, a new page had to be created that displays if a user is logged in but not yet verified. It directs you to your email and automatically goes into the app once the link in the email is followed.
Changing Your Email
Users can also update their email from the app now. If the user changes their email, a box will pop up that makes sure the user wants to follow through with the change. After this, the user will be redirected to the email verification page, which will send a verification email to new email. This makes use of the new /users/updateEmail route.
Tour Time
I also worked on a tour feature, which would show users around the app the first time they entered the app. This task proved to be challenging. There are many npm packages out there that help with this, such as rn-tourguide and react-native-spotlight-tour , but none of the options I looked at fit our exact use case.
From here, there are a few different options:
- We could adapt our vision of what the tour should be to fit what these packages can do.
- Build a custom tour manager package for Courtside.
- Don’t do a tour, but instead have an onboarding process where users can select initial preferences before even entering the main app.
For right now, I am leaning towards option 3 and definitely planning on avoiding option 2 at all costs, but I will discuss with the group this week to see what path best fits.
Problems
The main problem this week was trying to accomplish too much. Last week we did a presentation for our fourth sprint. The preparation for the presentation resulted in me losing most of my dev time to work on the presentation (mostly by preparing the demo and having to go back and fix a few visual bugs).
Beyond that, the tasks I set out to do this week were also hard tasks that involve a lot of time to set up and write.
Demo
I mentioned the demo we put together for our presentation this week and here it is! This short video shows all of the main features we have in our app so far, including user authentication, following stats and teams, and seeing a schedule fo upcoming games. Enjoy!
Next Week
Goals
This week, I want to continue fleshing out the authentication system. This will involve the two tasks I did not complete this week.
- Add option to update password if a user forgot it
- Figure out the best option for onboarding users (whether it is a tour in the app or some onboarding screens before the main app) and then begin to implement that
Conclusion
This past week was tough due to having a lot on my plate, but I still managed to get a good start on fleshing out the authentication system, which will set me up for success this week.