Week 3 was the first week I got to work with React, and to my surprise, it worked out a lot smoothly than I expected. I watched a crash course and was able to create a signup screen that prompts users to sign up as a user or as a shelter. I was so excited to continue working on the signup system in Week 4 and aimed to finish the majority of the functionality.

The UI of the user signup page and the shelter signup page were decided when our team worked on the project plan so I’d say this part was the easiest. I just tried my best to make the pages look as close to the prototypes as possible. After that comes the backend function of creating users which made me worry the most because I lack experience working in Node.js and Express, as well as creating a secure signup system that would not expose users passwords.

As I was looking for resources, one of my teammates recommended a Youtube video (https://youtu.be/IxcKMcsBGE8) that goes through the whole user authentication with JWT process and I found that super helpful. It introduced the concept of using bcrypt library to hash passwords so that passwords are not stored as is into the database. What’s even better is that every password is hashed with a different salt, so even if two different users have the same password, their hashed passwords will be different. This greatly improves the risk of having passwords hacked.

After I was done with create user and create shelter functions in the backend, the remaining task was to hook up the backend to the React frontend. For simplicity I chose to go with the Fetch API because it’s builtin to most modern browsers and it satisfies our needs. And voila! Now we have a functioning signup system. Since I had some extra time, I also worked on form input validation using regex but haven’t completed it yet. Here’s some screenshots of the current product.