dey-dey / shorterly

A hack day url shortener. Getting acquainted with Django 1.10. Client side with webpack, and react redux.

Shorterly

A barebones url shortener in Django 1.10 with a react-redux client.

Quickstart

First create and activate your virtualenv, you can use virtualenvwrapper. Then install Django 1.10 in your virtualenv:

pip install django==1.10

Then, assuming you have node installed (>=v6.0.0):

1. pip install -r requirements.txt
2. python ./manage.py migrate
3. cd shorterly
4. sudo npm install
5. sudo npm run build
6. cd ../ && python ./manage.py runserver

Now the development server shoudl be running, navigate to: http://localhost:8000/

How to use it

Create Form /

Details Form

From here you can edit redirect urls by device.

Retrieve All Urls

Just navigate to /urls/ and you can view all the urls.

Settings

For now, settings only work for development, which is the default environment.

Notes on Implementation

Server Side

Pretty straightforward data models and leverages django rest for the api.

API

For now the api endpoints are prefixed with /api/ as follows:

/api/device-urls/:id PUT for updating redirect urls by device id
/api/urls/           POST for creating Urls and related DeviceUrls

The models are serialized with django rest serializers that decorate the models for client usage.

You can retrieve the main shortened url which for now just has a localhost:8000 as a domain but would obviously be configurable for different environments. This can be retrieved in the details view as shown above.

Client Side

Right now there is no server side rendering and all javascript/less lives in ./shorterly/src/. It is currently built with webpack and the javascript uses React/Redux libraries and architecture. The directory structure is similar to react conventions with:

/componenents       # all react components
/containers         # main render container
/stores             # where redux stores live
/reducers           # application reducers
/actions            # redux actions
/general-libs       # general purpose js libraries
/less               # where less components are stored
/less/ui-kit        # base styles