Pixpy live

Pixpy is a full-stack photo-sharing web application. It utilizes Django + Django REST Framework for the backend Web API, a PostgreSQL database, and React.js with a Redux architecture on the frontend.

The following is a (not necessarily exhaustive) enumeration of the technologies we build upon:

Frontend

• React
• React Router
• JSON Web Token JSON Web Token for API authentication
• Babel for ES6 and ES7 magic
• Webpack for bundling
• Webpack Dev Middleware
• Redux's Flux implementation
• Redux Dev Tools for next generation DX (developer experience). Watch Dan Abramov's talk
• Redux Thunk Thunk middleware for Redux - used in async actions
• React Router Redux Ruthlessly simple bindings to keep react-router and redux in sync
• fetch A window.fetch JavaScript polyfill
• style-loader, sass-loader and less-loader to allow import of stylesheets in plain css, sass and less,
• font-awesome-webpack to customize FontAwesome, and
• ESLint, Airbnb Javascript/React Styleguide, Airbnb CSS / Sass Styleguide to maintain a consistent code style

Backend

• Django
• Django REST framework Django REST framework is a powerful and flexible toolkit for building Web APIs
• Django REST framework JSON Web Token JSON Web Token Authentication support for Django REST Framework
• WhiteNoise to serve files efficiently from Django

Pixpy is a single-page app; all content is delivered on one static page. The UI is designed to be elegant and intuitive with a straightforward layout.

Users can see and create photo Albums from the AlbumView page.

<img src="./screenshots/new-album.png"/ width=400>

New albums show a default "empty album" cover photo. The first photo uploaded to an album is automatically set as the new album cover photo on the backend.

<img src="./screenshots/album-view.png"/ width=400>

When a new album is created, the user is immediately directed to the AlbumDetailView where they can upload photos to the album. All albums belong to a user via user_id. Only the user who initially created an album can upload photos to that album.

<img src="./screenshots/album-detail.png"/ width=400>

Users can see and add Photos from the AlbumDetailView. Photos are hosted on Cloudinary, and hold a foreign key to the album_id they belong to. When a photo is uploaded, a modal pops up displaying the photo and asks for an optional caption. Focus is automatically placed on the caption input field, which can be submitted either using the Enter key or by clicking the return button.

<img src="./screenshots/add-caption.png"/ width=400>

From the AlbumDetailView, when a user clicks on a photo, it opens in a modal displaying both the image and caption. Clicking anywhere off of the modal closes the modal.

<img src="./screenshots/photo-detail.png"/ width=400>

Users can browse and view all albums and photos, but can only add photos to their albums. This restriction is reinforced both on the frontend (the button is not displayed) as well as the backend (the photo will not be saved if the current user is not the creator of the album).

<img src="./screenshots/login.png"/ width=400>

Pixpy uses a JSON Web Token (JWT) authentication scheme. JWTs are a compact, self-contained mechanism for securely transmitting information between parties as digitally signed JSON objects.

When a user successfully logs in using her credentials, a JSON Web Token will be returned and persisted to local storage. This token is then passed in the Authorization header of all HTTP requests against protected resources.

Because the token is "self-contained", we are able to write stateless APIs on the backend--after validating the JWT signature, user information is read from the token and protected resources are served appropriately.

<img src="./screenshots/logged-out.png"/ width=400>