This term went by so fast. I can’t believe this is the last blog post I’m writing! Looking back when I first started, I was a little nervous because of the new tech stack we decided to use yet I was so excited to see what I could learn along the way. I think I’ve come a long way and I’m happy with the outcome I’ve achieved so far which are the sign-up landing page, user signup page, shelter signup page, user profile page, shelter profile page, and shelter management page.

Although all of the essential functionalities have been implemented for these pages, I would not call them complete yet as UX is also an important factor to a successful product. For example, user password fields are not required when updating account unless a user is trying to update password but they’re still displayed on user profile page as shown in the screenshot below. How would users know they don’t need to fill out these fields? They probably don’t. What’s most likely to happen is that users will end up filling out the whole form to update even just their first name.

I would call this a flaw in design and need to be fixed to improve user experience. A simple fix would be adding an update password button to display password fields only when clicked. This will prevent users from wasting time and filling out unnecessary information when it’s not needed. This is just a minor change but it already makes the experience much more natural and intuitive.

And then on the shelter management page, pets associated to the signed-in shelter are all listed out in blocks on a single page. It works fine for testing a few pets but imagine if the shelter has 50, 100, or 500 pets. The page will become an infinite scroll and will be very difficult for users to navigate. What if the user is looking for a pet with a specific name or looking for a specific type of pets? He’ll have to scroll through the 500 pets to locate the one he’s looking for. The user would be lucky to find the pet before his eyes give up. To improve the situation, adding a search box, a filter, and pagination would be sensible.

Now that we’ve seen some glimpse of how much of a difference UX can make, I think it would be best to add those finishing touches to improve the overall quality and UX for our own project.

As I continue to work on user profile pages, I start to wonder if there are things I can change on the frontend to improve user experience. Though I’ve completed the functionality to delete user profile on click of a button, I realized it might not be the best design because users might accidentally click on the delete button and permanently remove their account. That’s never a situation I want to get myself into so I’m researching on how to add a confirmation dialog.

This StackOverflow seems (https://stackoverflow.com/a/52035267) like an easy fix for the issue by using browsers default window to confirm user’s choice so I will definitely try that. I also found that Material UI library has a dialog component that can be used for confirmation purposes which is more aesthetically pleasing so I’m leaning more towards the Material UI approach.

One other reason to learn Material UI is because it is very versatile and can be used to build the shelter management page that I’ll be working on shortly. The shelter management page lists out all pets from the signed in shelter and each pet is displayed in a block with its image, name, type, age, availability, along with a delete and an update button and I think the Grid component of MUI can definitely be utilized to achieve this. Its styling seems a lot easier than conventional CSS where you need to style all elements either by tag or class/id.

I’ve also discovered that MUI has a Pagination component that can be used to paginate pet list on the shelter management page. Although this is not on the initial prototype, I believe this would be a nice feature to add to the page so users don’t end up with a never ending list of animals they have to scroll through. I expect the number of animals for a shelter should be relatively low so the pagination logic can be implemented on the frontend to save some requests to the backend.

Right now I’m focused on implementing basic functionalities so ensure we have a functioning application that meets the requirements. However, improving user experience is also one of my goals if time allows. I really want to try implementing pagination, search, and sort on the shelter management page. Hopefully I’ll get to all of them in the following weeks!

Time really flies! Before I even knew, the project midpoint check was coming. After 5 weeks of dedication and work, each of our team members had made excellent progress. Though the project still has a long way to go, we really wanted to combine existing functionalities to see a working website. This was not only for the midpoint testing, but we also wanted to integrate our current code base and establish a file structure that we can all follow in the future, which will only make code merge easier in the future.

One person on our team mainly focused on building pet profile related pages and functions, the other teammate worked on building the sign-in and logout system while I took on the sign-up and edit accounts functionalities. As you can imagine, the sign-in and sign-up system were closely tied together so the conflicts were primarily tied to those, but I really appreciate this opportunity to discuss more about our application design.

According to our initial plan, we will have three Datastore entity kinds for each user role – admin, user, and shelter. However, we noticed it was more complicated to implement because all sign-ins share the same login-in UI, which makes it indistinguishable as to which type of user is logging in and which entity kind to call for password verification. After some more research, we also found out that most people recommend having just one entity kind for all types of users but adding user role as a column in the database to distinguish the roles.

Since we decided to combine all user kinds into one entity kind, there were some updates needed. I combined user sign-up and shelter sign-up routes into one register route and added default user type on the frontend. If a user signs up from the user sign-up page, the user type is default to ‘User’. Similarly, the user style is default to ‘Shelter’ when a user signs up from the shelter sign-up page. And, the login issue was resolved!

Last task was deploying the application to GCP, which ended up taking way longer than expected. To combined the React frontend and the Express backend into one single app, I followed the reddit post at this link: https://www.reddit.com/r/googlecloud/comments/bbnpx3/how_do_i_combine_my_react_frontend_and_express/eksn2se/. And yes, I was able to deploy but there were issues.

First of all, the multer middleware for handling image uploads was throwing errors because of file permission issue, which was later fixed by using os.tmpdir for temporary file storage before storing permanently in Google Cloud Storage. Then, I noticed React’s dynamic routing was not working properly. When a user is redirected to say <domain>/pets/viewprofile/:petID, the view profile page isn’t rendering. Instead, it’s processed as a GET request in the backend and returns an error saying it cannot GET the resource. For a quick fix, I just added the following lines of code to our server.js file to have the React app handle the routing instead of the server.

app.use(express.static(__dirname + '/public'));

app.use('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

This experience of having to deploy an application with combined React frontend and Express backend to GCP and to debug issues was valuable to me. It gave me an opportunity to learn more about cloud applications as well as React framework that I would otherwise never have. At the end of the day, the effort was all worth it. We now have a working web app hosted on GCP!

I had implemented input validations on our user signup and shelter signup pages in week 4, however, it was not working as expected. I noticed the form could be submitted even when there were errors present on the first click of the submit button, but the errors could be detected on the second click and stopped from being sent to the backend. It really made me scratch my head because it seemed like the error state were being updated correctly and there was a condition to submit only if no error was present.

After trying to fix the issue without success, I decided to turn to Google for answers. And guess what? The answer is simple. setState() is actually async so it doesn’t always update things immediately, therefore doing console.log() and checking a condition based on the updated state right after setState() is probably a bad idea. Silly me!

Instead of checking the formErrors state in the handleSubmit function, I decided to use useEffect as it can detect changes in the formErrors state and run the provided functions every time it sees a change in formErrors. Voila! The input validations works perfectly fine now. And I also added a function to check if an email already exists in the database when a new user signs up and prevents the user from registering with a duplicate email.

useEffect also came in handy for pre-filling user data from the backend on the user profile page. It can be called only once when the page renders if we leave the second parameter as an empty array, useEffect(() => {//do something}, []); And that’s not all, you can have multiple useEffects in a component! This allows me to send updated user data to backend through useEffect when user is ready later on.

Though React is new to me, I’m really enjoying this journey of learning new things as I build our app. I look forward to what I’ll be able to talk about in my next post!

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.

The rest of Week 2 and beginning of Week 3 were all spent on project planning. I had a great time meeting with my team members to discuss more about the structure of our application and division of workload on things like how to store images and serve them in the backend, the different pages our web app requires, prototyping, etc. Now that the planning is done, I think we as a group has a much clearer vision of what we are going to achieve by the end of this term.

First thing first, our team picked React, which I had no prior experience in, as our framework so I thought a self-learning session would be helpful to gain some familiarity with React. Given the limited time I have until I need to build my first UI, I decided to do a quick crash course video on YouTube instead of going through dry documentations. There is a video I find particularly helpful, as it covers the basics and is easy to follow through. Not only that, it also demonstrates how to display a list of items with the option to delete any one of them, and that is a functionality I have to implement for one of my pages. The link to the video is https://youtu.be/w7ejDZ8SWv8.

With that I started building a sign up page for our application that directs user to sign up either as a user or as a shelter. As I was building the page, I started to realize how efficient React is compared to regular HTML and CSS. The reusable components and ability to take in arbitrary inputs really makes a huge difference. For example, I only had to make a button component that takes in a prop and I can reuse that button for different needs as shown in the image attached below. What a time saver!

I can’t wait to learn more about React and start to implement multi-page design for the application next week! Also, I’ll have to brush up on my Express skills as I’ll be building the backend for user signup next week.

The capstone project group has been assigned and I’m so thrilled to be working on my top choice, which is Dating App for Animal Adoption, along with two amazing teammates! After a brief discussion with the team, we have come to the conclusion of building a responsive web application since it’s more accessible for users across all platforms. The task now is to decide what tech stack we are going to use as a team.

All of our team members are most experienced and comfortable with Python and JavaScript so it made the decision much simpler – either Python or JavaScript. I myself have worked on a couple projects in Python using Flask framework and I have no complaint about it. However, JavaScript still remains the most popular language used for web development so I would like to use this chance to brush up my skills while working on a larger application that resembles a real-life project.

Due to my limited experience with web development in Javascript, I have not used any Javascript frameworks. That being said, I’m open to learn any mainstream frameworks, such as React or Angular. Though one of our teammates had worked with Angular in the past, we settled for React for now. The reason being that React has an easier learning curve so we can focus more on getting real work done than spending too much time just learning.

Lastly, we plan on deploying our web application to GCP to stay up to the trend and utilize cloud technology. And to keep things all on one platform, we will be using Google’s Datastore as our database.

Now that the tech stack has been narrowed down, we’ve started looking into software structure and prototyping. I can’t wait to see what designs our group come up with in the next few days!

Welcome to my first capstone blog post! I can’t believe this is my last term at OSU, but I’m also extremely excited to bring together what I know and showcase them in my capstone project. Before getting into the real project and technical things, I just want to take a moment to introduce myself and some projects I’m interested in.

I graduated college back in 2018 with a degree in statistics and started teaching math for some time. Although it was really fun interacting with students and helping them improve their math skills day by day, I felt there was something missing. I started yearning the college experience of learning something new everyday and running into problems then coming up with solutions, all of which I hated while I was a student. That was when I started thinking about a new career that would grant me all of that and discovered OSU’s post-bacc CS program.

I still remember how nervous and uncertain I was on the first day of class, but the first task of printing “Hello World!” eased the anxiety. I was like “Oh, this is totally not bad!” From there, I’ve come a long way and learned about data structures/algorithms, databases, building full-stack web apps, etc. Now that I’m at the end of this journey, I would say starting this program was the best decision of my life and I can’t wait to see what I can build for my last assignment here at OSU.

Before I end my first blog, I also wanted to talk about a project idea I fell in love with, Dating App for Animal Adoption. I am an avid animal lover and a proud parent of two fur babies, both adopted from local shelters, so I would love to have an opportunity to contribute and showcase my skills through a project I deeply resonate with. I was thinking to make an adoption app not just for local rescues, but also include international ones. This will give people who want to help out animals aboard that might be in much worse environment than in the US a channel to do so.

Hopefully I get assigned to my favorite project, but there are a few others I’m also interested in. Looking forward to working with my future teammates and creating an amazing app!