rhjones / quiltr

Create patterns. Make quilts. Be inspired.

Quiltr

Create patterns. Make quilts. Be inspired.

• Live app: Quiltr
• Live API: Quiltr API
• API repo on GitHub: rhjones/quiltr-api

About Quiltr

Quiltr lets users generate random geometric quilt patterns in a range of sizes and color schemes. Users can save patterns to their "favorites" and browse a gallery of all patterns on the site. Users can also create projects based on these patterns and share their notes about and photos of each project.

Quiltr is built in Ember and relies on a Rails API/Postgres to persist data. Code for that API can be found at rhjones/quiltr-api.

Project Planning

Pitch Deck

User Stories

• I want to view randomly generated patterns for quilts based on the following variables: quilt size, block size, # of colors.
• I want to be able to save my favorite quilt patterns to an account.
• I want to be able to share (link directly to) patterns
• I want to be able to save a "project" connected to a pattern that includes my notes on making the quilt and my photo of that quilt
• I want to be able to view a gallery of all users' projects
• I want to be able to look at the gallery (patterns + projects) without logging in

User stories (stretch)

• (COMPLETED) I want to be able to generate random patterns w/o logging in
• (COMPLETED) I want to be able to upload multiple photos of each quilt that I make
• I want to be able to sort the project gallery by quilt size, block size, and # of colors
• I want to view a pattern that includes the following: block counts for each type/color, fabric amounts for each color, and basic instructions

Wireframes

• Home page
• Log in & authenticated user home page
• Pattern / project view
• Pattern / project 'card' view
• Pattern view

Data Model

• ERD
• For full details, see the rhjones/quiltr-api repo

Development Process

I began with what I saw as the most challenging aspect of the project: getting file uploads to work through Ember to Rails, to Amazon S3, and back. I documented my work with Rails/S3 at ga-wdi-boston/rails-paperclip#15. In Ember, I kept things fairly simple and wrote a service to handle a custom AJAX request to send data pulled from a form using FormData.

After getting uploads to work, I built out the rest of the resources and relationships in the API. After testing the API with CURL scripts, I came back to Ember and integrated front-end authentication, then began setting up routes and models to handle patterns and projects.

Generating the patterns was the most fun: I wrote a custom service that uses Fabric.js to draw a random series of squares and "half square triangles" on a canvas, based on the quilt size, the individual block size, and the total number of colors given by the user. A user can generate multiple patterns in a row; patterns are only persisted to the database when a user "favorites" them. At that point, the SVG string is exported from the Fabric canvas and stored so it can be displayed elsewhere throughout the site.

Dependencies

Install build dependencies with npm install. Install runtime dependencies with bower install.

• ember.js
• ember-cli
• Bootstrap
• fabric.js for quilt pattern generation and SVG manipulation
• moment.js for date formatting

Additional Tech Used

See rhjones/quiltr-api for installation instructions.

• ImageMagick (for image handling via Paperclip)
• paperclip (for image uploading through Rails to S3)

Next Steps

• Build functionality to sort the pattern gallery by quilt size, block size, color scheme, and number of colors
• Include block counts for each type/color, fabric amounts for each color, and more detailed piecing and quilting instructions
• Add ability to expand/minimize photos, perhaps including a full-size gallery component
• Enable users to choose their own colors
• Use Ember controllers to enable redirection from certain routes to sign in & back to those routes automatically
• Integrate Pinterest, including S3 uploads of PNG versions of patterns (the API can handle this; it's just a matter of building the front end functionality)
• Add "counts" of projects & favorites so a user can see how many other users have favorited or made a pattern
• Implement pagination on galleries, favorites, and my-projects views

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3.