#Link Shortener
A link shortener is a tool that takes a long URL and shortens it. WOW!! MAGIC!!
Link shorteners are especially useful for sites like Twitter where you have a limit on how many characters you are allowed to type.
The purpose of a link shortener is to take a long url like this
and turn it in to something like this...
####Popular Link Shorteners
Note that a link shortener utilizes a common data structure called a map. Maps are a mathematical idea that "map" items between two sets, similar to objects in JavaScript.
Example Map
google -> http://www.google.com
shortysbelltown -> https://www.google.com/maps/place/Shorty's....
Using the idea of shortening links by mapping a shorter word to a longer URL, let's create a link shortener!
NOTE: For this assignment, fork and clone this repository your computer, and run npm init
in the folder to being the project.
##User Experience
###User 1 - URL creator
Description: Anyone that needs to shorten a URL.
Usage: User should be able to come to the site, enter a url, click submit (or press enter) and receive a shortened url that they can share.
Example: I go to the link shortener's home page, and there's a form to enter a link to be shortened. Once I enter the link and click "Submit", I'm redirected to a page with my shortened link.
###User 2 - URL recipient
Description: Anyone that receives a shared URL (from user 1)
Usage: User should be redirected to the original URL used to create the shortened url.
Example: I receive a shortened link for http://localhost:3000/shortysbelltown
. When I go to that link, I should be redirected to the Google Street View page that displays Shorty's.
##Site Routes
Verb | URL | Purpose | Description |
---|---|---|---|
GET | / | Home page | Contains a simple form where a user can enter a URL and get a short url |
POST | /links | Create Link | Accepts data from the form. Stores the url in the database and redirects to the show route. |
GET | /links/:id | Show Link | Displays the short url of the specified id (so the user can copy / share it) |
GET | /:hash | Redirect | Takes a hash and redirects the user to the url stored in the database. |
##Database Model
This should only require 1 database model called "links" which can contain 3 columns id, url, hash.
Optional bonus Try using only 2 columns (id and url), while still using a hash. You'll need to perform a migration in order to remove the hash column.
##Suggested Process
###Set up project / express
- create project directory
- npm init
- Install web server stuff with npm, like express, ejs, body-parser
- Setup a basic express server
- Build all pages / routes
###Add database
- Install database stuff (npm): pg pg-hstore sequelize
- Create the database
- Initialize sequelize
- Change database configuration
- Create migration for a new model
- Run migration
- Test model (try to create/find links using the Node console, or a separate test file)
###Put it together
Remember that "hash" we mentioned? We can generate a unique id from a number by using the hashids
module. Note that hashes can be maps as well. hashids
provides a function that maps each number to a generated string, which requires a salt in order to provide variability.
- Install hashing module (npm): hashids
- Add code in to your previously created routes so they interact with the database and generate hashes (draw the rest of the owl).
##Resources
Keep track of how many times the shortened url is used. To do this you'll just need to add another column count:Integer
to the links table and increment it every time someone is redirected to that url. This will require a migration.
Additionally, add a count to the Show page... eg: "This link has been clicked X times."
Create a link index GET /links
that lists all links in the database sorted by the click count (most popular links on top).