Welcome to my URL shortener project.
Click to expand!
FE: React/Mantine
BE: NodeJS/Express/MongoDB
The intention of this project is to mimic a production URL shortener application and all of its major features, to a feasible extent. Thus, many considerations were sifted through, being analyzed whether or not they would be appropriately within scope. Limitations include cost, effort and time.
- User should be able to input a valid URL link and receive a shortened link.
- When accessing the shortened link, the user should be redirected to the original URL.
- Shortened URLs will expire after 2 years of inactivity.
- Shortened URLs will have an expiration date of 4 years.
- Shortened URLs must be random unique and human readable
- Availability (returns error if code does not exist)
According to scope, the major factor in building project feature considerations was cost. Thus, the majority of the project features consider storage as the limiting factor.
| Browser | Address bar | document.location or anchor tag |
|---|---|---|
| Chrome | 32779 | >64k |
| Android | >64k | >64k |
| Firefox | 32779 | >64k |
| Safari | 2047 | 5120 |
| IE11 | 2047 | 5120 |
| Edge 16 | 2047 | 10240 |
https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers
tl;dr- 2000 character limit
Database provided is a MongoDB cloud cluster with a max storage of 512MB.
| Key | Max size | Data type |
|---|---|---|
| _id | 12 Bytes | ObjectId |
| code | 4 Bytes | String |
| link | 2000 Bytes | String |
| creationDate | 70 Bytes | String |
| expirationDate | 70 Bytes | String |
| inactiveDate | 70 Bytes | String |
max size = 2226bytes
Note- dates should be stored as the DATE data type which would reduce it to 8bytes, but for development ease, it's stored as a string
tl;dr- 512megabytes / 2226bytes = 241181 max entries
Considerations for readability is to keep the code as short as possible, while still providing enough available permutations that every entry can be unique (over 241181 max entries).
Option 1
(0-9, a-f) UUID
solve for min x where "16*x > 241181"; x = 5 characters
Option 2
(a-z) BASE26
solve for min x where "26*x > 241181"; x = 4 characters
tl;dr- code max is 4 characters long
Another consideration based on functional requirements, is that urls can have a lifespan of max 4 years, or 2 years of inactivity. InactiveDate attribute gets updated whenever the link is accessed.
Based on scope, there were many features that were not included for the sake of either cost or development time. The following items were considered not a priority in prototyping/mimicking a production application.
Provided, there are solutions that could've been made, the project does not consider:
| Description | Solution |
|---|---|
| Hacking Attempts | Sanitize inputs |
| Overloaded network | Load balancers |
| Most frequently used urls | Caching system like Redis |
| Illegal activity | Provide a preview option, blacklist sites |
| Analytics | |
| Privatization of urls | Implement authorization and rbac features |
Note- There are certainly more security concerns, but for brevity sake, we'll leave as is here.
- Locate the .env file sent with this project and add to highest level of the directory next to this README.MD. The file should contain a
MONGO_URIandBASE_URLkey value pair. - Install all the necessary dependencies
npm i && cd client/ && npm i- Build
npm run build- Run the server
cd ../ && npm run devNote- The server operates as 3 servers. It acts as a web server (serves the bundled UI as static forms), runs cronjobs, and api server. This was intentionally done to reduce repository complexity and easily avoid CORS issues.
- Open in browser
Open browser of choice and enter in localhost:3000