To my surprise, our team won “Best Health Hack” for our app, ‘SkinDeep’. The app is a community-based Q&A platform that focuses on skin health and features a user-friendly design. Although winning a touchscreen air fryer was a nice perk, my biggest reward was the sense of accomplishment I felt as part of a team.

Below are my key takeaways and tips from the hackathon experience:

Put yourself out there.

As we all know, coming in with an open-mind is a necessity. If you have a project idea, make sure to sum up your idea with answering the minimum of “what is it?” and “why should we build it?”. This gives an idea to potential team members what your vision is and help them determine whether they wish to work with you. If you’re lacking inspiration for a project, it might be helpful to identify the technology skills you want to develop or determine whether you want to create a mobile or web app, as well as select a theme or topic. This can give you a better idea of whether other people would be interested in collaborating or pursuing a similar project for their own learning and growth.

Finding teammates can be difficult.

Plans may fall through with teammates or you may have conflicting ideas. There may also be individuals you wished you had the opportunity to work with. While these are all normal occurrences, it’s important to handle them gracefully and feel comfortable declining if necessary. Remember, the ultimate goal is to gain experience. Consider reaching out to these individuals through LinkedIn or other platforms, and explore the possibility of working on a personal project together.

Be prepared to lose sleep.

After this experience, you may feel burnt out. Usually, I’d say to not burn yourself out, but in this case, think of it as a temporary discomfort. No pain, no gain. Pushing through those tutorials, documentation, and bugs will give you maximized effort for a short period of time. And the outcome? Something to show for your efforts! Don’t forget to eat to fuel your brain!

Teamwork makes the dream work.

It was amazing to see how my team and I developed a system naturally. We initially talked about our design on paper to get on the same page (pun intended), delegated our tasks, and then dispersed. While working on our tasks, we’d check in with each other and did not hesitate to ask for help. These forms of communication helped us speed up any bugs encountered and added to our team morale. Once finished with our tasks, we would reconvene to discuss merges.

Git fetch, git pull, git merge, git push.

We probably went through over 10 instances of this git cycle. It was exciting to see our code smoothly merge together. Team work really makes the dreams come to life.

Take a breaker and breathe.

Close your eyes, space out, take a walk, drink some water, talk and laugh with your teammates. Building tension during the duration of the hackathon will definitely result in lazy days the coming days after.

The final stretch is the most important.

Although having a functional prototype is important, I would emphasize that presentation is the home run. Without a proper presentation of your project, it can be difficult for an audience with a short amount of time to fully understand the project. In our case, we filled out the necessary background information such as what inspired our project, what it was built with, if we came across any challenges. But along with these descriptions, we documented screenshots, recorded videos of use cases, and prepared a short elevator pitch as the deliverables / materials necessary. When you are so involved in the small details of building out the interface, it is easy to forget about the purpose of components. We think about how they function and lose sight of the how and why. It’s important at this final stage of the hackathon to reflect on the project in order to guide the judges through the reason for your application and the process of building it.

Congratulate yourself.

Regardless of the outcome of the hackathon winnings and awards, every single person should congratulate themselves for committing their time and efforts. Fortunately, our team won, but prior to finding out, we were all nervous and discussed our expectations. We saw other teams that had amazing projects as well and acknowledged the fact that we may not win. Even if we didn’t win, we concluded it was a good time and even acknowledged that we learned more about software development in this 36 hour than in our classes.

Hackathons are truly a great experience. If you have a chance to sign up and join one, don’t wait on it. You won’t regret it!

I have an anecdote to share with you that may give insight on how you can overcome these hurdles and optimize your time when watching tutorials.

Situation — Displaying An Image

In my application, I wanted to upload and view an image in the profile section of my application. For my application, I used Expo, which is a framework used to build React Native applications. In order to implement this feature, I found a youtube tutorial that was:

1. Up-to-date / current — since new code is always being written, packages are constantly needing to be updated.
2. Uploaded at a relatively early date — since we need current updated packages, it can be assumed that a more recent tutorial upload date correlates with an up-to-date version of packages used in the tutorial.

For videos that are 2 years old, I found that many viewers would ask questions about their bugs even though so long has passed since the videos were posted. When viewers come across a bug from these older videos, they assume that ‘nothing works’ or ‘this tutorial sucks’ and the frustration can potentially build up. Rather than getting frustrated, there are many different alleyways to explore in resolving the issue!

Task — Finding An Alternative

Even though my tutorial video was up-to-date, I was one of those viewers that came across an unresolvable bug. Since there weren’t many tutorials for me to view regarding the library I wanted to use, I was stuck when I came across this bug. Everything seemed to work fine, except one component. How I found my bug:

• I wasn’t getting the results I imagined. I tested to see whether my function was working using the power of console.log(). When in doubt, console logging helps with providing sanity checks for yourself in regards to checking whether your functions are working.

When you are looking at your code, it is important to be able to predict what the output of your code would look like or how you want it to run. In this way, you can choose the correct areas to insert those sanity checks. As for me, I used an Expo library called expo-image-picker which, from the tutorial, required accessing the image through a variable called ‘assets.uri’. I was almost done with the tutorial but came across an error. The squiggly line under this variable was an indicator that this variable name was nonexistent, therefore it did not correlate with the data needed to update the display picture for users’ profiles.

Action — Executing The Changes You Want To See

I noticed that I wasn’t getting the results I expected when using a print statement. From reading the message error in my terminal that read “___ has been deprecated,” this prompted me to review the documentation. It turned out that the field I was using became deprecated.

Originally ‘assets.uri’ was supposed to represent a string with the hyperlink to an image. However, the new update noted thats assets could be accessed as an array. My first approach to finding a solution was to understand what was in assets. I decided I needed to view the contents of the array to see whether the image hyperlink was definitely there.

To get creative, I ignored my code as a whole for a brief moment and started to test out scripts for manually parsing the assets array. The array contained many objects and displayed a clump of data in the terminal. It turned out the assets array included many objects with key/value pairs. It was difficult to dissect the objects as there were objects displayed as the value portion.

// Here is a simplified and made up example 
// Showing the complexity of object data

{
  “userID”:
     “1356xDhen65VCCmms”,
  “recentSearches”:
     [
     “kimbap”, 
     “kimchi”, 
     “jajangmyeon”, 
     “bossam”
      ],
  “profileData”: {
      “imageURI”:
          “imgur.com/hfbsb4ks”,
      “profileDetails”:
          {
           “friends”:
             {
              “Joe”,
              “Sam”,
              “Eugene”
              },
           “caption”: “none”
          }
  }
}

The winning line of code was to use “assets[0].key” as the hyperlink was actually not a value, but part of a key. By using the print statements in the console, I was able to play around with the data type and finally grab the correct hyperlink that was needed.

Result — Overcoming My Tutorial Bug

While investing in the process of problem solving, I realized I overcame my tutorial cycling. I started to become more conscious of package updates and ensuring versions are up to date. If there are discrepancies, this gives me motivation to read the documentation, while also giving me context on how I should approach the problem. I’ve developed a preference to read documentation while coding, instead of reading it beforehand.

This process ties back to the idea of how computer programming is essentially problem solving. There isn’t a tutorial that will teach you everything in a nutshell. Instead, in order to continually grow as a programmer, it is important to remember what were the problem solving techniques that we tried. Did they work? Did they not work? Can one problem be solved in a similar way? Can this problem solving technique be used as a template for another problem? Answering these questions adds onto our experiences. I understand why in the beginning, out of many tips for “learning programming,” the biggest one was to keep coding and challenge myself to build something. By building something, you naturally develop skills that build upon each other.

I hope this article helped! Please give me a clap if so! I’d also love to hear your insights or ways you’ve approach solving a bug. Thank you!

I have too many tabs.

Back then, I used to wonder why my roommate always had so many tabs open. I was a north campus major (humanities) while she was a south campus major (STEM). Now that I am in STEM and studying Computer Science, I’ve transitioned to adapting this habit and it’s been a daily annoyance. A friend of mine pointed out my tabs and noticed that I started opening new windows to redirect my focus from the amount of tabs I opened. I did not notice, how funny.

Apparently many people do not want to close their tabs due to some emotional attachment towards the information from the website. They fear that they might need something from that site and want to keep it open incase they need to use it in the future or fear they won’t able to find it again. Interesting.

In attempt, this blog post is dedicated to my accountability on decreasing this bad habit and here are 3 steps I believe will help:

1. Take your cursor to the top right and just click the ‘X’

Yes, I know the pain. It hurts to close your hard efforts into finding these valuable pieces of knowledge and resources. If you relate, you’ve probably rarely click that big X on the right. Chances are if you haven’t used the information from the tab or you haven’t visited that website in the past 24–72 hours, you aren’t going to use the website. Don’t be in denial. If you haven’t touched that tab for a week and it’s still sitting there from over the weekend and you also said you would get to it, here is the reality check. The information is irrelevant and clicking that ‘X’ can not only help declutter your search, but also help you focus on what’s important right now.

2. Go to that one tab, skim over the material and summarize 1–3 key information in your head and trust your gut that you will retain this information

For me personally, I fear that I won’t remember what I’ve read or learned. Thus that fear ends up making me keep these ridiculous tabs of google searches and YouTube videos open. Every time I am using resources to learn something such as YouTube videos, I try to ask myself:

• What was this about? (It helps because everything has a title)
• What did I learn?
• How has this helped me with what I want to do?

When I think about the answers to these questions, then I ask myself whether I still need this resource anymore since I’ve technically utilized it in my ‘understanding’. Yes, perhaps you did not physically use the information, but actually, you should give yourself credit for even being exposed to this information. Lastly, after answering these questions and giving yourself a final closure with this tab, you can finally make it your X (bad pun intended).

I know this task isn’t meant to be so deep, but I believe trusting your gut that you understood and took something away from what you just read or viewed will go a longs way. Imagine putting this idea into a little knowledge box and then locking and throwing away the key. You can never forget the knowledge and if you really need to go see it again (the website), you can always go find the key (google search). If anything, when you research it again, you might find a better answer!

3. Ask yourself, do I need this now? And is it important or relevant at this moment in time?

Think about today or the week, how relevant are your tabs in this moment in terms of the topics you need to cover today / this week? If the resource you have cluttering your browser is not pertaining to the assignment you need to work on that is due tomorrow or the task you must complete by the end of the week, then it must go.

Honestly, this suggestion is hard to follow for myself. I have a problem with detaching myself from my tabs. I think, “Oh this posting looks interesting, I’ll check it out some more later” or “Hmm, this YouTube video is relevant.. I think”. These two phrases illicit feelings of wanting to do something in the future and also feeling uncertain.

I think if you want to get something done now, you need to do it in that moment, otherwise your productivity is taken away by all these ideas.

If the answer to this question is that it is important or relevant, then grouping together tabs based on topics will help to stay organized. I really love the feature that google chrome has where you can group together tabs, label them, and choose color themes for your grouped tabs. That way, when it is time to clear your tabs, all that needs to be done is to just ‘X’ out of the grouped tabs.

My last commentary on this unwanted habit is the thought that ‘how many times do we come back a week later to clear tabs and we find the tabs we opened as not useful?’

This happens 90% of the time for me where I skim through a window of 10 tabs and think to myself, “I’ve already settled this, *deletes*” But during the same week I was stressing about how many tabs I had open. What a cycle, but I’m working on it!

I am curious, what are your tab habits? Do you have any insights, advice, or tips for what I call “tabs management”? Please comment and let me know! ;)

Competitive Analysis: What are the users feedback? Let’s check the data…

In my previous blog post, I mentioned towards the end that I would use the Whole Foods application to make an analysis and decide what to include in my application. My idea was to do an analysis of the mobile application reviews by scraping the reviews on the App Store website. I managed to reference the information from this LinkedIn post to scrape my data:

How to scrape App Store reviews in 4 simple steps using Python

After exporting the information into a CSV file, I imported the file into excel, but to my dismay, it seemed less productive to use excel when there was another option using VSCode. In VSCode, I ran some filters to test whether I could find the data I was seeking for. Originally, I wanted to find whether there were repeated issues users had with the app. I decided to write Python code that will analyze the data and seek for the phrase “be able to”.

If users had issues with the application, usually they would say something along the lines of, “the app is okay, just wish I was able to …”. In the results, there was one specific detail that I would like to include in my application which is the option to “add a comment to items”. I think this is useful incase customers want to use the app to create a grocery list and take note of the quantity of items they intend to buy. I was surprised the Whole Foods application did not have this feature and this review was posted two years ago. It has me wondering what methods do companies use to brainstorm new features?

Learning Figma: Am I doing this right?

Before creating the design of my application, I went and informally interviewed my very own mother on her grocery shopping process. I realized this process is very important and questions should be thought out in advanced in order to get a more fulfilling answer that could inspire a design idea. This is my first draft, and I must say it is better than nothing.

I took my low-low fi prototype and ventured into the world of Figma. It was quite easy to grasp functionality of the tools since everything was straight forward. In the end, I managed to create a much more refined prototype. Some feedback for myself is 1) get used to creating container templates 2) utilize the margin pixel count to ensure everything is technically spaced evenly (the eyes can fool you) 3) don’t be lazy to learn and practice shortcuts.

Here is the live prototype. Feel free to click the available dates and the sales or buy-more deals button. I definitely have more features I am working on, but this is what I have so far.

Since I’ve been generally thinking about the colors and layout of the items, I haven’t been thinking about the usage of the application. This is bad. I like how the items are laid out without descriptions (pricing, quantity, etc.). But I wonder if this is important for the customer to see right away. I will most likely try to do a survey on this. As of now, I am trying to mimic this design using the Angular framework.

Since Angular allows me to create a web-app hybrid application, I am first testing out my html/CSS/JavaScript skills by developing the web UI. The journey to creating this application is taking some time since I had finals this week, but I hope to have more updates in the near future this month.

Wish me luck! :)

If you’re the same type of person who constantly thinks about different ideas for an app, but just don’t know where to start, I hope following me along creating my first app idea will inspire you to start on your own.

Backstory:

When I got a chance to work at a Japanese supermarket as a clerk, I took note of a few interesting observations.

• Either I don’t go to the grocery store as much or I’ve noticed that Japanese supermarkets always have different items on sale marketed with big red and white signs. It seemed like the whole store was tagged and I could barely see the actual items.
• I would say 80% of the customers that came in were regulars. It was quite interesting to see what people bought and do some real-time data collection and analysis.
• While working mainly weekends, a large amount of parties were obsessed with 2 things: Tadashizen Nomu yogurt and Yoshinoya sauce. In which customers bought in bulk (12–20 pieces). This prompted me to try the yogurt drink but I was not a fan, it was quite too fermented for my taste.
• However, based off my own customer purchase analysis, I became a fan of the green tea ice cream sandwich. The original price is around $2, but on sale, you save approximately $0.70, which in my opinion is great. $1 for that much ice cream is lovely.

App Idea:

Now, I love the ice cream sandwiches, but only when they’re on sale. In order to check whether they are on sale, I went onto the markets website and checked for a weekly email subscription on the sale items. When I got the email, the presentation of the weekly sales were in an embedded newsletter format:

When I saw this, I was pretty happy to see that my ice cream sandwiches are on sale, but an idea popped in my head. The style of this newsletter is very plain and cluttered with information and images. Since it is filled with a lot of important information, I thought it would be fun to transform this newsletter into an application.

Since I am still new to creating something, I can’t guarantee what I will include, but just as a brainstorm, I would like this app to at least have the following features:

• Sales page to show all the items on sale organized according to the newsletter
• Grocery list to add future shopping items

In order to generate ideas for this app, I did research on Whole Food’s grocery application in the app store. In my next blog post, I want to share what I did to analyze the application and how I will use the information inferred.

Thank you for taking the time to read my blog posts!
I appreciate the feedback and input.

I recently came across a video about the ‘Software Development Life Cycle’ and wanted to write a reflection piece on my experiences during my internship.

In my internship, I had the opportunity to work on a project centered around creating an AI-inspired application to assist First Responders in driver safety and hazardous material identification and safety precautions.

Referencing to this video, there are 7 Stages of the ‘SDLC’ or also known as, the ‘Software Development Life Cycle’:

1. Planning
2. Requirement Analysis
3. Design
4. Implementation/ Coding
5. Testing
6. Deployment
7. Maintenance

Planning and Requirement Analysis:
Before coming onboard as an intern, the project was in its’ First Phase and Stage 3 of the SDLC. After communicating with my mentor and engineering team lead, I learned the planning and requirement analysis was already conducted over a 3-month time period through meetings with stakeholders, field specialists, and target users. The end goal of the First Phase was a MVP (Minimal Viable Product). In definition, the goal of a MVP is to create a product with basic features to present to consumers in order for them to see the value of the product and increase interest in further development of the project.

What I learned:
In a software development project, documentation and organization is very important. I asked a lot of questions about the direction of the project. However, I realized instead of asking redundant or unnecessary questions, I could have read up on the documentation to understand the overall objective or goals.

Design
Our team did not have a designated UX or UI designer. Of around 20 people, the project team members consisted of a project manager, task manager, 2 lead engineers, researchers from universities, contract engineers, and interns. The outcome of the design of our app was a simple iOS and Android app built with Ionic Components. We did not thoroughly plan any color schemes or create wireframes / prototypes before implementation.

The chatbot for our application would be used to help First Responders access the Emergency Response Guidebook (ERG). The ERG is filled with different guides for hazardous materials and within each guide, there are listed categories for potential hazards, public safety concerns, and emergency response guidance. We used Google’s Developer tool, ‘Dialogflow’, which uses machine learning to generate natural conversations between humans and computer. I documented my progress on my tasks, created a journal of what worked and didn’t work for me, and started a tutorial document incase another developer or intern would have to learn the tool in the future.

After a few ups and downs understanding the technicalities on how to build a conversation for the chatbot in the console, I ran into an issue. The method used to build the chatbot in Dialogflow was not scalable. Through research on stack overflow, I found that a database with the guide information and a webhook would be needed to allow our chatbot to assist with any guide queries. In the end, the chatbot was not needed to be scaled in the First Phase of the project as we only had a determined set of queries we had to demonstrate for our sponsors.

While creating a few query prototypes in Dialogflow, I learned in order to adhere to the target users (First Responders), I needed to understand in detail the processes used to access the guidebook in order to replicate the process in our app and understand gaps for improvement of processes. Therefore, I went to my local police and fire department to gather interviews. I demonstrated a brief conversation I created using Google Assistant with a Dialogflow conversation imported. I created this demo with research from law enforcement training published online. The information and feedback from the law enforcement and firefighters helped tremendously in understanding the target users and how our application could help them. I used the information gathered to restructure my conversation flow and received great feedback from First Responders.

What I learned:
The method I used to approach the design of the chatbot was completely messy. If I had the chance to redo this process, I would have read up on the documentation on the Dialogflow first before trying to test it and create my conversation. Secondly, I should have communicated with my mentors thoroughly on what the expected outcome is for the chatbot in order to spend less time configuring a solution that was not needed. Lastly, the interviews with the local fire department and police department should have taken place before learning the developer tools. If I conducted my research beforehand, I could have generated a better demonstration to get feedback on and less time would be used on the feedback and feature adjustment process.

Implementation / Coding
My Dialogflow conversation was set for integration. To integrate the chatbot, I learned the Ionic / Angular Framework. This was the most challenging part of my internship. Another intern on the team advised me to watch a set of Udemy videos on the Ionic and Angular framework to familiarize myself with the structure and code of our application. During this process, I learned how to create my own working branch on Github using Fork, which is a desktop application used to stage and push commits, pull and push code, and is a great tool for visualizing git and workflow management between other members of the team.

In this process, I made many mistakes. I filled my .json file with dependencies that I did not use. I wrote the logic of my functionality in the wrong service. There was a lot of debugging in VS code and Android studio. I’ve been told how computer science isn’t something you master in school, it is mastered by doing. I got first-hand experience with this and completely understand as I had to delete my branch and redo the same process over again from cloning the repository, creating a new boilerplate, and importing the necessary libraries. In the end, through a lot of hard work, I was able to integrate my chatbot and learned new skills along the way: the Ionic / Angular framework, Typescript, Html/CSS, and debugging methods.

What I learned:
Google is my best friend. Whatever issue I had with my code, I was able to google the solution. Some solutions took longer to find, but I learned that as I understood more, I was able to find my solutions faster or at least ask the right questions from my mentors to help me find the solution. I also learned that learning the tools like the language syntax and the framework takes as equal or even more time than writing the actual program. I felt a lot of pressure to show a physical update during each progress meeting, but I learned that progress in knowledge is more helpful in the long run than attempting a complete work.

Testing
Our project was nearing the last two months of the First Phase and we were scheduled to have a sponsor meeting in the middle of our testing stage. Our team did not have a group of testers, therefore we each had to partake in the testing of our application and system and give feedback to the team members and their respective parts. Our testing phase had been too short. Many bugs were found and new questions arose regarding the standards of our test cases. Some questions were: ‘What is considered a success and a failure?’, ‘Is the adjustment of this functionality required?’, ‘How will we make sure we properly demo our applications features and its’ appeal?’.

Since I was working closely with First Responders and gathering their feedback on the chatbot, I also asked them for feedback on other aspects of our project. For example, along with testing the app, I was involved in testing the vehicle simulations using CARLA (an open-source simulator for autonomous driving research). I created demonstration and tutorial videos of the application and driving simulations to get feedback from law enforcement and firefighters. They were very interested in the system and curious how it would be applied in a real-life scenario versus a simulation. In order to answer, more data collection and samples of use cases would be needed to truly test the capabilities of a real-life application.

What I learned:
Testing is the most crucial aspect of the software development life cycle. I asked my mentor about his opinion on testing. He said usually the testing phase of a software should be equal or even lengthier in time compared to development part. I noticed we did not have enough time to plan in detail our testing method and therefore the testing was not consistent among each other. Everyone had different impressions of what they were searching. If we started the testing phase with a concrete plan of what to search for, we may have saved time. The testing phase panned out nicely eventually due to organizing the bugs as tickets on GitHub. During every meeting, we would go through our tickets and clear them and that helped us keep track and speed up the process quickly.

Deployment / Maintenance
During the last month, after the testing phase, we made changes to our application and code and finalized our product. In this phase, I volunteered to create a tutorial for our application and simulator as well as demonstration videos for all 12 scenarios for our sponsors to view. Although it was a lot of work, I really enjoyed this part of the project. I got to partake in creating the deliverables that would be presented in the final meeting with the sponsors. It was rewarding to be able to put together and highlight everyone’s hard work and see it be presented during the final meeting. The response from the sponsor were very positive.

What I learned:
My internship ended right before the end of the First Phase and the final deployment process was handled by the lead engineers and task manager. My internship had already ended before the last meeting with the sponsors, but I volunteered to work on creating deliverables as I had experience with creating videos before. In this process, I learned that I am very results-oriented and that is what drives me in my work.

Conclusion:
Overall, I would conclude that I learned a lot more than I thought I did. My internship was around 7–8 months and it was one of the most challenging, yet best experiences I’ve ever had. I am glad I got to work with a small team. I did not miss a single Monday 8:00 AM meeting and I applaud myself for this. Through these meetings, I got to listen in on what all the other engineers and interns were doing. I also received a great amount of mentorship from my team on technical skills and career opportunities. In the beginning of my internship, I asked a lot about the other teams work and what my team lead and other interns were working on, but I later dived deep in my own tasks, learning the tools and technology. If I could redo the internship, I would have communicated more thoroughly with my mentors about expectations in order to manage my time more evenly to include time for asking questions and learning.