Ruby on Rails app where users upload images to convert them into puzzles
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
bin
config
db
lib
log
planning
public
test
tmp
vendor/assets
.gitignore
Gemfile
Gemfile.lock
README.md
Rakefile
config.ru
screenshot.png

README.md

puzzle me pictures

Overview

puzzle me pictures is an app that allows users to upload images, convert them into puzzles, and then send their puzzles to their friends. The puzzles must be completed in order to see the images. Users can adjust the difficulty of the puzzles.

Screenshot]

Technologies Used

  • Ruby on Rails: web application framework used for the app
  • Devise: user authentication
  • HTML5 Canvas & JavaScript: ability to create puzzles and drag and drop functionality to piece together shuffled puzzles
  • CarrierWave: gem for file uploads
  • RMagick and MiniMagick: for resizing image uploads
  • File Validators: gem for validating file size
  • Heroku: hosting the deployed app

Approach

After completing a hangman app and a drawing app, I noticed a common thread in the work that I'm passionate about - and that's building interactive web applications. In all cases, it just so happens that the interactivity is added with HTML5 Canvas.

That being said, I knew that the third interactive app that I wanted to build had to incorporate puzzles somehow.

I started off trying to build the application a couple of different ways in React. I kept running into issues with the canvas element, so given the week timeline for the project, I decided to turn back to Rails to see how I could really fine-tune the application.

Planning

Entity Relationship Diagram (ERD)

ERD

Wireframes

Check out the wireframes

User Stories

  • As a user, I want to upload an image and convert it into a puzzle.
  • As a user, I want to be able to share a link to my puzzle.
  • As a user, I want to be able to have friends view my puzzle, but not see the image until the puzzle is completed.

View more User Stories

Installation

If running locally, you will need an AWS key for uploading images with CarrierWave.

Unsolved Problems/Next Steps

  • Find a different way to upload and store images for free (an AWS replacement)
  • Make the puzzle pieces jigsaw-shaped instead of rectangles
  • Add the ability to favorite puzzles and add view that shows a user's favorites
  • Add view where user can see all the puzzles that they've created
  • Ability for users to exclude puzzles from the main layout view
  • Make puzzle functionality mobile-friendly
  • On completing a puzzle, add button that automatically downloads the image for the user