We are a startup manufacturing drones. We need a pricing configurator (stand alone web app), which will be linked from our website wingtra.com. The small web app will be used by website visitors to choose the drone and its different parts/add-ons and see how much it would cost. Finally they can contact us and send us the configuration via a form.
- E-commerce functionalities are NOT needed.
- The product data currently lies in Hubspot and should be retrieved via the new Hubspot API.
- Probably a database in-between will be necessary to cache product data (as the Hubspot API is not very fast) and to make the application labels and some settings editable by us.
- Mock-ups are visible here (use your keyboard right arrow to navigate): https://invis.io/FSXYZRBPGJ3#/423474986_Product_Configurator_-_1
- Final design will be soon available in Sketch/Invision
Requirements:
- Full Stack Web Developer with solid references of interactive web applications
- Very good knowledge of HTML, CSS and modern JS libraries or frameworks (Vue, React or any other popular modern library or framework you judge is the most appropriate for this application)
- Good knowledge of implementing a database to be used for web applications
- Experience with Hubspot API is a big plus
- Good communication skills in English
- Availability in the next 2-6 weeks to complete this project
- Only independent freelancers will be accepted (no agencies)
COMPLETE BRIEFING:
1. Retrieve and cache data via the latest Hubspot API (we have beta access)
- Connect to Hubspot API (Product catalog) to retrieve the latest prices for each product
- Cache this data on a daily or hourly basis (for faster accessed than the Hubspot API)
- We have 60+ resellers around the world, so we have different prices according to the countries/states. Therefore it is needed to retrieve the prices according to which country and state (= reseller) the user is located in. The country/state is asked at the first step of the product configurator (see mockup)
2. Create the pricing configurator
- Implement the responsive product configurator as per mock-up/design (see attached) with HTML, CSS and a modern JS framework
- Implement the display logic as per mockup (some products are shown only if specific products are selected)
- All the mockup/design will be available in as Sketch file and in Invision
- Return the prices according to the country/state (= reseller)
- Calculate the final amount and display it in a summary
3. Implement the "Share this configuration" functionality
- Implement a link sharing functionality, i.e an URL which can be sent over e-mail. When opening the URL the web app will open with the exact same configuration (incl. country/state parameter)
4. Implement the "Download PDF" functionality
- The configuration will be printed out in a PDF and sent per e-mail.
- Probably a specific JS framework (jspdf, pdfmake,...) is required as browser print function are not producing really good PDFs. (Final PDF layout/design is not ready yet, we will design this in the coming weeks)
- User personal details will be sent via the form to the appropriate fields in Hubspot
- A workflow in Hubspot should be triggered
5. Implement the contact "Talk to Sales" functionality and send the data to Hubspot
- This is a simple form sending out the configuration URL together with personal details (name, e-mail etc) to the appropriate fields in Hubspot.
6. Make the app labels and some logic editable
- All the labels in the app should be editable. The content in the pop-ups (modal windows) should also be editable. A basic editor/table with fields and HTML fields is enough. NO WYSIWYG required.
Your tasks:
1. Quick review of the mock-up, design, architecture/briefing and give us your feedback/inputs to improve
2. Decide (with us) on the most appropriate architecture (which Javascript library/framework, do we need a database in-between and if yes which one)
3. Implement the back-end and front-end as per attached briefing, mock-up and design to a full functioning web app
4. Test (with us) and debug
The web app must work properly on modern desktop and mobile browsers:
- Chrome 80+
- Safari 12+
- Firefox 68+
- EdgeHTML 18 and Edge 83+
Responsive requirements:
- Desktop: from 1025px and up
- Tablet/small desktop: from 768px to 1024px
- Mobile: up to 767px
Other
- SEO indexability is not a primary goal. Simple meta-data for the main page is enough (Page title, meta-description)
- The web app should be available under https://configurator.wingtra.com and hosted in our current hosting (Siteground)
- HTTPS must be enabled
