
Invizhin? Khuizhin! * How did we make a free analogue of InvisionApp

* Whoision - the official name of the service, with a touch of barely noticeable irony.
All web designers are well acquainted with InvisionApp - a web service that helps to receive high-quality feedback from a client and demonstrate the results of their work online.
The service itself is wonderful, you can even link the layouts of individual pages into a prototype. One snag is limiting the number of active projects and demonstrators. A paid account solves everything, but our guys have been combing their hands for a long time to arrange a hackathon. And this means that we will build our Invizh, with drag-n-drop and Google-sync.
We have one day for the whole project. We confess that we took the design and layout out of the hackathon - we did all this directly in front of it. Like the testing that we rescheduled the next day. All this, on the one hand, neutralizes our heroic feat, but on the other, romance in it does not become less.
So, the chronicle of the workflow according to the participants. At the end - a link to the service itself, for the impatient.
Part 1. The outer side of the hackathon. Web service in 24 hours
Think!
Mentally throw out from Invision everything that is annoying or just seems superfluous. We come up with the concept of the future service.
Backlog!
We write it quickly, in Google docks. We do an express assessment of features, prioritize.
Design!
Our art director designs all the screens, taking elements from Bootstrap - to facilitate layout. Sliced from pieces of the interface, tasty:

Layouts!
We are making up working screens in Bootstrap, that's where the vanilla hardcore is! Done!
Synchronization!
Where is there a lot of free server space? On google! Who gives out accounts suitable for authorization on our service? Google again! What will we do synchronization with? C google!
Projects!
Logged in, created a folder in Google Drive - received a new project in Khuizhin. Created a new project in Huizhin - received a new folder in Google Drive. Works!
Download!
We make the most convenient layout loader: circled, dragged, loaded!

Training!
The uploader wants a beautiful picture, so do it in Huizhin! Align the slides, pick the background color, copy the link!

Demonstration!
Any number of people with Google accounts can watch your layout and comment! It is enough to poke at the right place, write a comment and voila - colleagues will see it.
Testing!
There is no time to test on the hackathon, so we thoughtfully test the next day, sipping a poop!
Deploy!
We buy a domain, give all our best to hosting, get a working service! What pleases Whoision:


- Quick authorization - one click and you are a full user.
- Convenient file storage on Google Drive - you can always edit your projects without even having to go to the service website.
- Synchronization is always the current state of projects: both in the drive and in your personal account.
- Display settings, you can align the slides and choose a background color - to present the design in an appropriate form.
- Joint commenting - helps to collect high-quality and visual feedback.
And for the most curious. A team of volunteers is dedicated.
Part 2. The reverse side of the hackathon. Post factum report
Correctly interviews copywriter Roma.
Roma: Guys, all I know is that you had a hackathon and that the project was called Whoision (hereinafter, the transcription of “huts” is used - author's note) .
Alexei: And still called!

Roma: Ok, still :) Therefore, tell me literally everything: how did you come to the project, how did the hackathon go. I understand that it began with the fact that "we decided to make our Invision."

Marat: The guys had a desire to hang out in their free time. And, in general, we came and rode. You should have come in retrospect yesterday.


Roma: Powerful! Well ok, let's do it in order. You all came by nine in the morning and ...
Alexei: Nenene, everyone came whenever he wanted. Marat came to 11, I to 12.
Ivan: By tradition, I came first, at 9:20, set up the environment ... Then Lech came.
Aleksey II: I warned everyone at home that I was falling out of reality for a day. They humbled themselves not without irritation.


Ivan:In fact, I assumed that to be a hackathon two weeks ago. Therefore, I read the documentation, prepared something in advance ...

Roma: But what was ready for the start? Have you already worked with the project you started, or ...? Well, who did what - also tell.
Ivan: We had a list of features, not the most detailed, though - I had to think up something along the way. Layout and surroundings, as I said, I prepared in advance.
Marat: I wasn’t going to code myself, I thought I would test it, run away with pizza, make coffee ...;) I came, didn’t find the second Lyokha, I realized that we had two developers and one tester, I had to remember the basics. By the way, everything was remembered very quickly.
Alexey Second:I pulled the layout, almost did not touch the client part, basically did the server part: comments, synchronization.
Roma: That's, as far as I remember, Invizhin is a rather sophisticated service where you can upload layouts, leave comments on a click, with multiple authorizations. And what can Huizhin do?
Marat:We tried to teach him how to order pizza - they didn’t teach it :) In general, you can upload your layouts to the service and show the result of the work to the customer. Authorization on the service is automatic, using a Google account. On the Google drive, all the images are stored, that is, if you create a new project in Khuizhin and upload pictures to it, the whoision folder is created on the drive, in which the folder by the name of the project appears. And models are poured into it. Simple and very comfortable.
Ivan: If you upload pictures to Googledrive, then projects are also being created in Khuizhin. That is, reverse synchronization works. On the project we tried to write for the first time on node.js - a cool thing. We also worked with Mongo DB, I also liked this database.
Roma: There were conflicts on the project?
Alexei: The conflicts were mainly in the same scenario: one creates a class, the second goes into the code and immediately starts to refactor it.

Marat: We had fun, I got a lot of buzz. I remembered how to program, just visited this child of frenzy.
Alexei: I thought I won’t last until the end. As a result, he sat until one in the morning.
Marat: Yes, it’s just that Lech and I left the club at eight in the morning. Then everyone woke up and realized that today is a hackathon. We slept for two or three hours each.
Roma: How did you survive?
Ivan: At lunchtime we stopped for a ping-pong, after which my head worked much better.
Roma: Have you refueled with what?
Alexei: At five o'clock with Marat we began to thump.
Marat: Lies and slander: D
Alexei Second: I tried to work on the power industry. So, Adrenaline Rush with a banana - shit!
Roma: How long were the tasks? And in general, why a hackathon? It was possible to calmly allocate time, reserve a team, plan sprints ...

Alexey II: For the first time at the hackathon, I liked it, the time passed very quickly. Came - Hop! - it's time to play tennis, - hop! - made a project.
Here is a story.
Personally, I will be very grateful if you want to test the service and write comments and suggestions. You can directly in the comments, or you can email me zevvs@sibirix.ru .
Link Button:
