Dreamer

Live site

Overview

Dreamer is a clone of the photo-sharing platform Flickr. where a user can view other user's photos, comment on any photo. Users can also attach tags to their own photos and make albums. so they can share there experience via photos and comments.

Technologies Used

Frontend

• React
• Redux
• Javascript

Backend

• Ruby on Rails
• RESTful Api

Database

• PostgreSQL
• AWS

Hosted

• Heroku

Unique Feature

Select/Deselect

This is a cool feature that allows you to click on a photo with the option to delete the selected thumbnail before uploading it to the site. When the thumbnail is first clicked on it finds the element with a event handler, then adds some CSS to display what photo is selected. When selecting another thumbnail it deselected the previously selected thumbnail.

    select(id) {
        return (e) => {
            e.preventDefault();
            e.stopPropagation();
            const image = document.getElementsByClassName(`thumbnail-${id}`);
            this.deselect(e);
            image[0].classList.add("selected-thumbnail");
            this.setState({ selected: id });
        };
    }

    deselect(e) {
        e.preventDefault();
        e.stopPropagation();
        const selectedImages = document.getElementsByClassName("selected-thumbnail");
        Array.from(selectedImages).map(image => {
            return image.classList.remove("selected-thumbnail");
        });
        this.setState({ selected: null });
    }
    
    deleteThumbnail(){
        const ns = Object.assign({}, this.state);
        const index = this.state.selected;
        delete ns.files[index];
        delete ns.titles[index];
        delete ns.descriptions[index];
        ns.selected = null;
        this.setState(ns);
    }

Splash Backround

This is another cool feature that transitions between the background images using CSS animation and Keyframes

For a deeper breakdown of the project's MVP, Routes and Schema; visit the Wiki Page