Pixel

Pixel at a glance

Pixel is a photo-sharing application built on PostgreSQL, Express.js, React, and Redux. Logged in users can upload, view, edit, and delete photos. They can also create, view, edit, and delete albums. Users can add and remove photos from their albums by clicking the plus(+) and minus(-) symbols on the top right corner of their photos, as well as view the photos of other users via the "Your feed" tab. The photostream tab allows users to view only their own photos, and the albums tab allows users to view their own albums. By clicking on the thumbnail of album a user can views the contents of that album, and by clicking on the thumbnail of a photo a user can view a full screen version of the photo, as well as who it was posted by. Pixel was heavily inspired by Flickr and is meant to be seen as a loose clone.

Splash page -

Sign-up form -

Home view -

Fullscreen photo view -

Photo upload form -

Empty photostream -

Album view -

Application Architecture

Pixel is built with an Express backend, a JavaScript/React frontend, and a PostgreSQL database. Sequelize was used to interface Exoress with the database. AWS is used for all storage of user uploaded files, and the React-AWS-S3 module is used for communication between React and the S3 bucket.

Backend Overview

Pixel uses Sequelize to interface Express with the PostgreSQL database. All user files are uploaded to an S3 bucket, AWS then sends back the location of the files to the backend, where they are stored, along with any other relevant information, in the database. Bcrypt is used for user authentication.

Backend technologies include Express.js, Sequelize, PostgreSQL, AWS S3, and Bcrypt.

Frontend Overview

Pixel has a very simple frontend built around React and Redux. The majority of its logic lies in the backend and a well organized and thoughtout Redux store allows for minimal fetch requests to display needed data.

Frontend technologies include React, Redux, and React-AWS-S3.

Conclusion and next steps