MGK

A URL Shortener for the Office of Enterprise Technology Services that is designed to take users' long and arbitrary URLs and shorten them for easier use and sharing.

Comment

App Instructions:

  1. Open this link in a new tab.
  2. Paste a long URL in the text box.
  3. Click the shorten button.
  4. The app will then shorten the URL, right click on the short URL to either open it in a new tab or copy the link.
  5. Repeat steps 2-4 as desired.

Inspiration

We took up this challenge because we were interested in how databases and web applications work and interact with each other. Also, this challenge seemed the most feasible in the amount of time we were given to develop a solution.

Function of the App

The function of this URL shortener is in the name. The application shortens URLs. This is important for the Office of Enterprise Technology Services because when a state agency wishes to share a link, the link can be arbitrarily long. The Office of Enterprise Technology Services also has blocked public URL shorteners within their network because of the threat of the spread of malware. This application provides the Office of Enterprise Technology Services with a proprietary solution that they can maintain and update, eliminating some outside risk.

How the App Was Built

This URL shortener was built using HTML, Bootstrap, JavaScript, and MongoDB. HTML and Bootstrap were used for the front-end of the app, to customize the appearance of the page for the user. For the backend, JavaScript was used. More specifically, Node.js and Express were used to build the web application itself, which handled all of the URLs and shortening. Other packages were used as well, which can be found in the "package.json" folder in our GitHub repo here. MongoDB was also used in conjunction with the previous platforms as a database platform to actually store the long URLs and link them to the shortened URLs. A free version of the online MongoDB Atlas Database was used to store data. To deploy and host our solution, we used Heroku, as it meshes well with the MongoDB Atlas Database. Please note that if this app were to be deployed on the hi.gov domain, all links would start with "hi.gov" and end with the shortcode.

Challenges Encountered

A lot of challenges were encountered throughout the development of this project. Since we are high schoolers, we are still very new to the concepts of databases and web applications, as well as how they work together. One significant challenge we faced is deciding what platforms to use to actually build our app. Another significant challenge was how to actually build the app itself after figuring out what platforms to use. The last significant challenge we faced was finding a way to host and deploy our solution free of charge. We did not want to pay for a service, and we also did not want to have people that wanted to try our app jump through a lot of hoops by installing different applications on their machines for it to work. The entire process of developing and deploying was challenging for us.

Stretch Goals/What's next for MGK

  1. Implement more security features into the app.
  2. Style the page to make it a little more user friendly.
  3. Add functionality to remove URLs from the table on the page.
  4. Migrate this to the hi.gov domain for relevance.

Accomplishments

Overall, we are proud of our project because of the experience it provided us with learning about databases and web applications.

Final Takeaways

Throughout this project, we learned that we still are novices and have a lot to learn when it comes to app development. There are just so many resources out there for us to use, and sometimes it is hard to choose. We also took away some knowledge of how web applications store data in a database. All in all, this project gave us more programming experience, with an emphasis on database implementation, which was really interesting.

Share this project:

Updates