Let's build for Ruby and Rails developers - Part 9 - Creating the new job form with Vue.js

Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

==================== In part 9 of my Let's build for Ruby and Rails developers series I break ground on our new job form and leverage Vue.js to do so.

A big goal of the Vue.js component of the app is to streamline the interactive experience of creating a new job. I want customers to be able to enter details, preview their job, and pay for their listing all within one flow.

Doing a multi-step form in Ruby on Rails is a bit tough but it is possible. To lean on a little more interactive tech I think Vue.js will lend a great hand going forward. I'm not a Vue expert but I know my way around. The app will be a bit complex but not the worst thing I've ever had to build.

There core steps of the job form will be:

1. Job Details - A customer enters the job and its criteria.
2. Preview - Once the details are entered and validated a customer can then proceed to the next step to see a preview of what the job will resemble once published.
3. Purchase - This step will incorporate Stripe, a lot of AJAX, and some Rails API specific constraints. We'll need to validate a customer's card, gracefully handle errors and update state will things are happening behind the scenes.

This app within the Rails app will be a doozie but I think worthwhile. Once this is complete we can begin then to focus on presenting jobs in a useful and informative way throughout the site.

====================

☕️ Keep me awake. Buy me a coffee https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💻 Previously published at: https://web-crunch.com/posts/lets-build-for-ruby-and-rails-developers-part-9

💎🛤 Latest course: HELLO RAILS https://hellorails.io

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://digest.web-crunch.com/ Twitter: https://twitter.com/webcrunchblog Github: https://github.com/justalever

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/products/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/proucts/ptt

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=andy

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648 ... https://www.youtube.com/watch?v=aJuuIEn2xk0