Interactive Ruby on Rails Canvas
Budget: $10 – $45 USD
I need a seasoned Ruby on Rails, developer well-versed in stimulus.js to build a front end page that creates an interactive canvas for uploading images, text and changing the properties of the background and canvas size. We would ideally use a pre-built framework like a fabric.js or konva.js. Please make it reasonably mobile responsive.
## UI Components (Input) - See Mockups:
Title (TextBox - not shown in mockups but needed)
- Template (Dropdown)
- Canvas (Single Select Button)
- Background (Single Select Button)
- Gradient (Color Pickers and Dropdown)
- Media (3 File Upload Buttons and Style/Transparency)
- Text (3 Buttons, InputBox, Font & Style Select, Color Picker, Background Color)
## Key Operations:
- Build Canvas
- Upload media (create a mock post with image name and image data that returns a mock blob storage url - no backend or blob storage work required)
- Save Canvas as a template (create a mock post that returns a success code)
- Fetch Canvas as a template (create a mock fetch that returns a json object attached) when select a dropdown template
- Download Canvas as image
## Output:
- Canvas image with ratio, background, media and text that can be downloaded or saved as a template.
## Not in Scope (Not Required)
We don't need any backend or blob storage work for this task, only front-end component
## Technologies:
- Ruby on Rails
- Stimulus.js
## Time:
We are looking for a simple demonstration app that takes no more than 10 hours spread over 3 or fewer days to build.
## Uploading code:
We will provide a GitHub repository for you to store your code and a GitHub Codespaces if you'd like to build the solution. Please try to keep the solutions small and lightweight.
## UI Components (Input) - See Mockups:
Title (TextBox - not shown in mockups but needed)
- Template (Dropdown)
- Canvas (Single Select Button)
- Background (Single Select Button)
- Gradient (Color Pickers and Dropdown)
- Media (3 File Upload Buttons and Style/Transparency)
- Text (3 Buttons, InputBox, Font & Style Select, Color Picker, Background Color)
## Key Operations:
- Build Canvas
- Upload media (create a mock post with image name and image data that returns a mock blob storage url - no backend or blob storage work required)
- Save Canvas as a template (create a mock post that returns a success code)
- Fetch Canvas as a template (create a mock fetch that returns a json object attached) when select a dropdown template
- Download Canvas as image
## Output:
- Canvas image with ratio, background, media and text that can be downloaded or saved as a template.
## Not in Scope (Not Required)
We don't need any backend or blob storage work for this task, only front-end component
## Technologies:
- Ruby on Rails
- Stimulus.js
## Time:
We are looking for a simple demonstration app that takes no more than 10 hours spread over 3 or fewer days to build.
## Uploading code:
We will provide a GitHub repository for you to store your code and a GitHub Codespaces if you'd like to build the solution. Please try to keep the solutions small and lightweight.