Dream is an art-based full stack web application inspired by Flickr that provides users an area to showcase their artwork. It utilizes Ruby on Rails on the backend, a PostgreSQL database, and React.js with a Flux architectural framework on the frontend.
Dream provides the capabilities of viewing three different types of artwork--digital, traditional, and photography. These styles are portrayed in the landing page, which is organized into three tabs on the ExploreNavBar component. The ImageIndex component serves as the backbone to the landing page. When clicking on the tabs, one of three different methods will occur:
changeDigital: function(e) {
this.setState({
images: ImageStore.getDigital(),
selected: "digital"
});
},
changeTraditional: function(e) {
this.setState({
images: ImageStore.getTraditional(),
selected: "traditional"
});
},
changePhotography: function(e) {
this.setState({
images: ImageStore.getPhotography(),
selected: "photography"
});
}
The ImageIndex asks the ImageStore for the filtered list of images and renders them in the form of ImageIndexItem components. ImageIndex's state also changes, which subsequently re-renders the ExploreNavBar.
The image show page is easily and readily accessible by all users and contains a clean and simple interface. Every image in the landing, user profile, and album pages are all ImageIndexItems. ImageIndexItem possess an important onClick property that triggers a route redirect to the image's show page. This is displayed below:
var ImageIndexItem = React.createClass({
showImage: function() {
HashHistory.push('/images/' + this.props.photo.id);
},
render: function() {
return (
<li className="image" onClick={this.showImage}>
<img src={this.props.photo.image_url}/>
</li>
);
}
});
This display is detailed by the ImageDetail component. ImageDetail is highly responsive to the current user and the image's uploader, acquired by SessionStore.currentUser() and this.state.image.user_id respectively. Specific user options, such as delete and edit, are only available to users that have uploaded the image. ImageDetail also provides the user with comprehensive navigational tools.
Users are able to edit their image title, description, and image type if they are the uploader. By clicking on the edit button, users are redirected to the EditForm through the /images/:imageId/edit path. EditForm is consistently listening to ImageStore, which allows it to use ImageStore.find(this.props.params.imageId) to obtain the current image data and pre-fill the form.
Image uploading is another feature that is available to registered users. This feature utilizes a Cloudinary widget that sends images to a cloud storage. Once uploaded, the ImageForm and the UploadButton components process each image. The ImageForm feature has a form that allows user to fill in data and a list of thumbnails. This form is unique for each photo and changes every time via the updateFormDetails() a different thumbnail is clicked. The state of each form is preserved by registering this.currentImage and saving its current details through saveInformation().
Users given their own profile page that displays their images and albums and is handled by the UserDetail component. This page can be accessed through the NavBar or the ImageDetail. It contains its own nav bar that allows users to view their images, albums, or profile edit form. Rendering the images and albums are dependent on the user's has_many: images and has_many: albums associations.
All albums resides in each user profile page. Users are able to create albums and view them individually. Each album possesses a user_id property that associates itself with its creator. Conversely, a user is connected with the album with its albums association.
Other dependencies used for the project include:
- BCrypt for hashing and password-salting to provide a secure authentication system
- Cloudinary for image uploading and processing
- React Masonry for organized and responsive image galleries
- Figaro for hiding important API keys
- Tags
- Search feature that can filter results via tags and user names
- A more interactive album create and update page that allows users to either upload new images or select images from their collection
- Commenting
- User profile photos
- Following users
- Image likes system
- Account activation via email
- Integration of multiple client sessions