Developed a mobile app to help people find adoptable animals in nearby shelters.

Project Overview

Programming Language

JavaScript

Framework

React Native

Expo SDK

Back-end

Firebase

Graphic Design tools

Adobe Illustrator

Lottie Creator

Figma

Duration

4 weeks

Abstact

Sniff and Seek is a 4-week long individual project designed to help people find adoptable animals from nearby shelters. This project required skills in handling data from APIs, managing data flow between functional components, leveraging React Hook, utilizing mobile app functionalities, and presenting data on the front end with a user-centered, user-friendly, and visually appealing design.

What You Can Do in Sniff and Seek

Location Based Search

Considering the data structure from chosen available API (from RescueGroups.org) and the searching criteria provided from the API, ZIP code is the most feasible way to develop the location based search function.

Splash Screen and Skeleton Loading

Loading screen and animation is a key of great user experience that lets users know the application is working and the data is loading.

How to achieve

Splash Screen was made by Lottie Creator and Adobe Illustrator, and the skeleton loading was made by using Moti Skeleton Module.

Animal Profile Page

Shows the detailed individual animal information including basic information such as name, color, size, and age, and pictures. The animal profile page also serves as the starting point for the adoption application process.

Like and Save for Later

In the animal profile page, users can hit like button to save the animal in their liked list for further consideration.

How to achieve

I used context API to store the favorite list so that other components are able to access to the data. Since my application remains relatively small scale, I did not choose to use Redux or other state management tools.

Report Stray Animal

Report page utilizes the functionality of mobile device — camera and media library. Users can either take picture in real time or upload images from their mobile device.

How to achieve

The report page involves getting permissions and access to user's device, specifically media library and camera in order to allow user upload photos and take photos by using their mobile devices.

Working in Progress

Firebase | Authentication | Database

Users will need to create their accounts to use certain functions such as save animals to favorite list and start adoption application. To deal with the forms coming from users, Sniff and Seek needs a database to store user information and forms.

How to achieve

Back-end development is an area that I definitely want to explore and learn more. However, in order to achieve the baseline functionality of Sniff and Seek, I see using back-end service would be the most efficient solution to deal with the authentication and database needs.

After integrating Firebase service into Sniff and Seek, the current user flow will need to change and accordingly the routing of application will need to be adjusted as well. For example, which step in the user flow Sniff and Seek will ask users to sign-up/sign-in.

Learning Along the Way

Project Management

In product development, keeping a project on track and driving it forward is just as important as programming skills.

Set Up Scope

To stay on schedule and finish on time, I set weekly scopes with three goal levels:

  • Threshold Goal: The minimum functionality to deliver.

  • Target Goal: The expected level of completion.

  • Stretch Goal: Extra features if time allows.

Tracking Plan

To track progress systematically, I used Monday.com as my project management tool. Throughout the project, it’s easy to fall into scope creep, which can disrupt the original plan. To stay on track, I reviewed the plan at the end of each week and adjusted priorities using the MoSCoW Method.

Documentation First, AI Second

The most important skill I learned from this project is whenever you have doubts, read the official documentation.

I am lucky enough to get into programming at a time when AI has become well-developed and accessible. However, I deeply understand blindly following what AI gives me is not a smart way to grow myself as a developer.

I am lucky enough to get into programming at a time when AI has become well-developed and accessible than before. However, I deeply understand blindly following what AI gives me is not a smart way to grow myself as a developer.

Asking the Right Question

Good questions start with a clear goal and purpose. AI tools can lead to disaster if we jump to solutions without understanding each step. But when we ask the right questions, they can take us beyond blindly following generated code, helping us grasp the logic behind it.

Good questions start with a clear goal and purpose. AI tools can lead to disaster if we jump straight to solutions without understanding the logic behind each step. But when we ask the right questions, they can take us beyond blindly following generated code, helping us grasp the logic behind it.

Think like a designer, ship like a dev.

Think like a designer, ship like a dev.

Back to Top

Back to Top