SecureTheTag

Achieve the bag by securing them tags!

Comment 2

Inspiration

A couple days ago were reading a passage in English about how social media presence is helping people such as small businesses and organizations make change. We thought back to this idea and were inspired to create SecureTheTag, especially after seeing the effect that the COVID-19 Pandemic has left on small businesses. Many small businesses have struggle to stay open during these difficult times due to less people being out. By using our tool, we hope small business owners can gain the social media traction they need to keep their doors open. Furthermore we hope to make the lives of marketers, business people, and influencers on social media easier, so they don't have to search for hashtags and decide which ones are the best themselves, instead they can rely and use the help of our app to decide.

What it does

Our hack, SecureTheTag, provides the most relevant and popular hashtags for Instagram posts, bringing in larger audiences that are more likely to interact with the user’s content. All the user has to do is upload the picture that they want to post on Instagram onto our website. Then, the image is put through an image classifier that returns a list relevant trending hashtags (sorted from most relevant to least relevant) to use when posting the picture.

How we built it

For the frontend, we started prototyping playing around with multiple online web applications including Adobe XD and Figma, before settling on Bootstrap Studio because it was very efficient given the short time frame and allowed us to directly export as HTML for our site. We then used this HTML layout and applied CSS to make our web page look appealing. In the process of doing this, we made sure to incorporate many design concepts we learned, and made everything catered to our theme of instagram ranging from the simplicity to the color scheme. For the backend, we built the SecureTheTag tool using the Google Cloud Vision API and an Instagram Hashtag API from RapidAPIs. Using Javascript, we called the Google Cloud Vision API to use Google's Machine Learning model to classify the picture that the user uploads into labels. Using these generated labels we called a Hashtag API to generate related trending hashtags. Using our custom JavaScript algorithm on these APIs our code generates a list of 30 relevant trending hashtags sorted from most trending to least. We then exported these functions as modules to our server which connected it to the front end, allowing us to communicate back and forth and display our results on our webpage.

Challenges we ran into

One of the challenges we ran into when building SecureTheTag was implementing APIs. We have had no prior experience in using the APIs and no idea what REST was, so it took some time to read through documentation and ensure we were using them correctly. Another challenge we faced was coding in Asynchronous JavaScript. The APIs we used were implemented asynchronously, meaning that we had to adjust our JavaScript methods and syntax accordingly. It was very enjoyable being up at 2AM staring at Pending Promise being returned from our functions! This was a very new concept to all of us considering we only learned JavaScript 2 weeks ago. One last challenge we ran into was making our website look good using Bootstrap. None of us had that much experience using Bootstrap so it was a learning experience for all three of us. Luckily, we powered through and were able to create a very attractive and responsive website!

Accomplishments that we're proud of

Some accomplishments that we're proud of are efficiently implementing our APIs into our JavaScript code through asynchronous JavaScript code. We are also proud of the fact that we were able to create such a great looking website using Bootstrap in a short amount of time with such little experience.

What we learned

Throughout the development of SecureTheTag, we learned a lot of new topics in programming. For instance we learned how to use REST in order to interact with our Google Vision and Instagram APIs and why they are useful. We're also really new to JavaScript, learning the basics about a week ago and this time we learned how and why we should use asynchronous JavaScript. The biggest thing we learned and dedicated most of our time to was how to design an appealing web page. We learned a lot on prototyping with different applications such as Adobe XD, Figma, and Bootstrap Studio, how to do animations with CSS, and other design concepts such as color schemes and the rule of thirds.

What's next for SecureTheTag

In the future, we would like to allow users to log in to the site using their Instagram credentials and even post directly to their page from our website. Unfortunately, Instagram has about a 2-week verification time frame so we were unable to implement it. We also want to eventually incorporate a database that will store recently generated hashtags so users can choose from an even larger selection, and will store data on the amount of hashtags that have been generated through our website. Be sure to "Secure Your Tag Online" today at "www.securethetag.online"!

Share this project:

Updates