URL Shortener
This is a URL shortener dashboard created with NextJS, TypeScript and Tailwind. It maintains a json file on the backend as the "database", and supports shortener redirects, count tracking, individual link pages and json list download.
Setup
An environment variable should be set for local development. You can simply create a .env.local
by copying from the .env.example
, or place the following in .env.local
:
LOCAL_BASE=http://localhost:8080
Development
Start a local dev server on http://localhost:8080.
$ yarn dev
Build
Build and run production code. Note that the environment variable LOCAL_BASE
is used to
determine the base url where it is deployed for redirects. This will need to be updated
accordingly (e.g. https://shortener.netlify.com).
$ yarn build
$ yarn start
Tests
$ yarn test
links.json (the database)
All access to the links list are read and written to the filesystem. The application will
make a temporary file in /tmp/links.json
and maintain this for list additions and count
tracking. Doing it this way is not only slow and not scalable, but the data in /tmp
is
ephemeral and likely to be reset between builds, system reboots or deploys. It does work
fine for this exercise however.
Caveats
- Saving data isn't ideal (see above) and would benefit from using an actual data store.
- There is no user distinction, so anyone with the site address can add to the list.
- Dates are limited as
yyyy-mm-dd
making sorting potentially inconsistent. - I have excluded testing trivial components