Viewfinder is a full-stack web application inspired by 500px. The backend is build with Ruby on Rails, and a PostgreSQL database. The frontend utilizes React.js with a Redux framework.
Viewfinder was created by Maurice Spiewack while attending App Academy in New York City.
Photo upload is handled through the Paperclip addon for Rails. The photos themselves are stored in AWS S3, and served directly from there as requested.
Users can upload photos from anywhere on the page through the always visible "Upload" button. This will open a react-modal window, asking the user to select a picture file from their computer:
After the user has selected a picture file from their hard drive, they can add additional data before uploading it:
When the user selects to publish a picture, it is uploaded to AWS and being made available for display in the photo feed.
Every user receives a custom user feed containing pictures posted by the User, and by other Users followed by the User:
More photos can be accessed by scrolling down. The user can interact with the pictures by liking them, or by viewing the posting user's profile page:
The photo feed implements infinite scroll. Initially, only three images are loaded; once the bottom of the page is hit, more pictures are loaded on demand.
Users and Photos are searchable. Search can be initialized through the main navigation bar:
The main search page allows to search for either photos or users. The search will automatically update as the search term is updated.
Every user has a profile page, which can be viewed by any other user. It shows the user's pictures, a biography and other user data:
When editing their own profile page, users can enter biographical data and choose the profile and cover pictures:
On any user's profile page, Photos are displayed in a "Brick wall" layout:
This is done by utilizing a CSS flexbox which automatically allocates available space according to the images sizes. To prevent images from being stretched, object-fit is used, which crops the picture as needed. This is accomplished with the following CSS definitions:
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
}
.photo {
margin: 5px;
max-height: 250px;
object-fit: cover;
flex-grow: 2;
flex-shrink: 2;
}To further enhance the project, the following features are planned:
Improve backend search through index database table. Allow for search filters, p.e. "Most popular".
Allow users to comment on photos.
Notify users about changes, p.e. when another user starts following them, when a photo is liked, and so forth.
Galleries are collections of images created by users. Users can select both from their own, and from other user's pictures. Galleries can be enhanced with additional comments and keywords chosen by the gallery creator.
When signing up as a new user, display initial categories based on keywords; ask new user to mark preferences (p.e. 'Architecture', 'Nature' and so forth). Once the account is created, automatically follow users who post pictures that fit in those categories. This will allow the new user to receive an initial feed.