ZipSurf is a summer project I made to establish some fundamental skills in web development: React (Vite-React), HTML, CSS, Firebase, and external API implementations. The application's primary goal is to provide a simple, visually-appealing interface for users to shorten and save exceedingly long URLs.

• Utilized Firebase getAuth, GoogleAuthProvider, and signInWithPopup functions to provide a seamless user authentication and login process

• Integrated synchronized storage of shortened URLs using React state variables and Firebase collection and addDoc functions
• Added error checking for duplicate URLs and invalid URLs to avoid unnecessary reads/writes to the database

• Implemented Google Docs API to export the user's list of shortened URLs to an OAuth 2.0-verified Google Doc

• Used Firebase collection, getDocs, and deleteDoc functions to selectively delete all or individual shortened URLs

• Designed the website wireframes and background graphics in Figma (the latter implemented aurora and glass morphism effects)
• Used Figma and Realtime Colors to generate light/dark mode themes, which is persistent across page refreshes due to the state variable saved in each user's database
• Included a variety of SVG icons to enhance the user experience
• Developed custom Navbar component to allow for sleek and effective user navigation
• Personally designed website favicon

The following external APIs were integrated into this project to enhance its functionality:

Version: v2

• Description: Used the TinyURL API to fetch custom shortened URLs for registered users
• API Provider: TinyURL LLC
• API Documentation

Version: v1

• Description: Used the Google Docs API to export a list of shortened URLs to a newly generated (OAuth 2.0 verified) Google Doc
• API Provider: Google
• API Documentation

1. git clone https://github.com/wderocco8/ZipSurf.git
2. cd ZipSurf
3. create free developer account with TinyURL (copy api token into .env file)
4. run the following command
   1. npm i && npm run dev
5. Open the application using the provided link (note: the Google Docs API will only work if "127.0.0.1" is replaced with "localhost" due to constraints on authorized javascript origins)

For this project, I used Firebase Hosting to deploy my site, To try deploying it yourself, you can use the folder that you downloaded above and follow these steps:

1. open root of project directory (cd ZipSurf)
2. run the following commands
   1. firebase login
   2. firebase init
3. select "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys"
4. type dist public directory name (since we are using Vite-React)
5. select "y" to configure as a single-page web app
6. run the following commands
   1. npm run build
   2. firebase deploy

Alternatively, you can visit the site I already created below:

• https://urlshortener-8937b.firebaseapp.com/

Coming soon 👀 (for now, feel free to interact with the site itself: ZipSurf)