Bruh2023 - URL Shortener

Urls are tricky; long urls are hard to share but 3rd party short urls can easily have malicious links. This solution only allows authorized users to create short urls. Stop phishing one url at a time!

Comment

Inspiration

Getting hacked is a scary thing. Malicious actors are lurking everywhere, and you have no idea when their next attack is coming. The sharing of links has been a common vector of attack for malicious actors. Clicking a link with an unknown origin can lead to a device being compromised, and state workers are a common target. These attacks are commonly known as phising attacks, which have the capability of taking down massive corporations such as Google (see Project Aurora).

Most people are able to easily identify malicious links; however, this becomes difficult when the URL is being shortened by a third-party service like Bitly, which makes links indistinguishable. As such, a trusted first-party shortener with a trustworthy domain could be used instead, in order to lower the possibility of malicious links being hidden through shortened URLs.

What it does

This app is meant to provide a streamlined experience for creating trusted short urls. The problem ETS is facing right now is that, when a state employee wants to create a short url, they have to contact an admin who has to manually input each and every link. This is a very time consuming and demanding process.

Our app allows authorized personnel to create, manage, and distribute short links easily through an intuitive and responsive design accessible on both desktop and mobile so you can make links on the go!

Users can create their own custom short url provided it does not already exist in the database, create a custom QR code for their link, and have access to an easy copy button which copies the link straight to your clipboard so you can start sharing links immediately!

As an extra layer of security, by default when visiting a short url, there is a 5 second redirect timer for a user to decide whether or not they want to visit the redirected webpage. In addition to that, there is an option to require authentication to access the redirect which allows for sharing of links containing confidential information amongst state workers only.

How we built it

We built this website using React for the frontend and Firebase for the backend. To design the website, we used Figma to prototype and used TailwindCSS to bring it to life. We also used TypeScript as the language instead of JavaScript for type-safety and future code maintainability/scalability.

We used 4 services from Firebase: hosting, authentication, Google Analytics, and Firestore database. This allows us to reduce friction that would otherwise occur in applications that utilize multiple micro-services and simplify the deployment process.

Authentication

Firebase provides multiple authentication providers, such as SAML and MFA, so the client can easily switch based on their needs/preferences. In this project, we simply used password-less login via a link that is sent to their email for broader access across multiple email providers, but it is recommended to use the authentication provider that the client is most comfortable with.

Google Analytics

Firebase provides integration with Google Analytics to easily track and view user events in real-time. In this project, we log events for logins, logouts, create/update/edit links, successful redirects and cancelled redirects that can be easily viewed in Google Analytics. More events can be added easily with only a couple lines of code.

Firestore Database

Firestore is a NoSQL database consisting of collections and documents, which is fast, simple, and scalable. Most importantly, however, it effortlessly allows for real-time data syncing between multiple clients. We secured our Firestore Database using Security Rules to prevent unauthorized access to the database.

Challenges we ran into

Because we were both new to this technology stack, we ran into many challenges along the way. We encountered multiple issues with React useEffects, rendering and window management, through hours of debugging we managed to resolve these issues.

In addition to that, when we initially started the project, we were utilizing the Firebase Realtime database for our backend because we initially thought it suited our project better than Firestore. However, halfway through development we realized that the Realtime database presented several issues. When reading from the Realtime database the query would load the entire json file just to access one link. This limits scalability because as the database grows, so does the data that must be downloaded to access a link. Because of this, we decided to switch to the Firestore database which allows for powerful queries against the database thus optimizing the solution. This resulted in us having to rewrite the entire backend to integrate Firestore.

Accomplishments that we're proud of

Our goal for this project is to ultimately provide a streamlined experience for users to easily create and manage shortened URLs. With this in mind, we are proud to present a responsive and intuitive user interface that supports both desktop and mobile users allowing for users to quickly acclimate to this service and even create links on the go.

What we learned

We learned how to prototype a website in Figma, then develop a website in React, and finally host it using Firebase. It was our first time doing any of this, so choosing the "right" software stack to use was difficult and time-consuming. In the end, we chose whatever was most popular and went with it since we wouldn't really know until we start using the software. And, in our opinion, using this software stack was nearly perfect for an URL Shortener service. The only issue is that we have duplicated data for links in the /links collection, and links in the /users/userLinks collection since we could not figure out how to use Firestore's data references, but it seems like a necessary redundancy.

What's next for Bruh2023

We hope to work with ETS to deploy this solution, our vision is to eventually deploy this project and provide state workers with easily accessible, short and secure URLs which will improve communication, increase efficiency, and boost security.

We also want to improve the website further by adding more features, like adding an intuitive admin panel to manage everyone's links without having to go through it manually through the database, and making the website feel "smoother" with animations. This would not affect the functionality of the website, but would improve the user experience greatly.

Since we're always looking forward to the future, we're going on to Bruh2024!!!

Built With

Share this project:

Updates