Git Product home page Git Product logo

puzzle-me-pictures's Introduction

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.

To run locally:

  • bundle install to install dependencies
  • bundle e rails db:setup to setup the database
  • bundle e rails db:migrate if there are any pending migrations
  • brew services start postgresql
  • bundle e rails s to start the server locally

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

puzzle-me-pictures's People

Contributors

megancoyle avatar dependabot[bot] avatar

Stargazers

Kristina Heinricy avatar

Watchers

James Cloos avatar lvshiling avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.