As a programmer has come to the site about fashion

I am a girl programmer. Therefore, my business is to cook borsch and write articles on habr about own projects. Recently, we launched two sites with epic_noob . One more or less interesting ( dress4weather.ru ), and the second about fashion ( fashionhearts.ru ). I'll tell you how we made them and how the flight goes.

How it all began

About a year ago, we decided after work to drank an uncomplicated website on our knees. We had a lot of ideas - from games about zombies to culinary applications. But there are two of us, a boy and a girl, so we chose neither fish nor meat - a site about the weather.
The idea of ​​the site was to show the weather and things that you should wear in this weather.
Since we both worked full-time as interface developers in the same company and we didn’t intend to tie up with this business, we didn’t have any special plans for the future and monetized the project - we did just the fun for the fans.
Serezha dug out free weather api ( wunderground.com ) on your internet and it started.

Server-side was written on Node.js + MongoDB + nginx. As the saying goes, how many interface developers don't feed, everything looks at JavaScript.

Design sketched on the knee in Photoshop and made the engine. The most obstinate persistent (I) were engaged in content. The first base with things was done right through - I just typed pictures of things from my favorite store, processed them in Photoshop, and for all weather conditions I made sets of clothes, registering them in a json-file.
The first version of dress4weather.ru design:
')


Unexpectedly, people began to come to the site. I will tell you honestly - now the site has low attendance. But it is, it is non-zero (150 unique per day), stable and most importantly ... we didn’t do anything to promote our website.
The idea apparently seemed funny to the Internet community and about us, no, no, yes, and write some resource. On one significant day, we even received the first Chinese warning from api weather about exceeding the traffic limit - as many as two thousand people from 500 different cities had already gone down. It turned out that a fashion blogger wrote about us and everyone ran urgently to see if the sun is shining in Murmansk.
Once we wrote to some funny friend from Israel and tried to buy a franchise on the site. We came to such a stupor that the rest of the evening looked at the carpet and so he did not answer.

From weather to clothes

Time passed, people came, but the money did not come to us.
At some point, Serezha, who had time to change several places of work, decided that he wanted creativity. A young man without children and a mortgage can afford several months of creativity without human sacrifice, so he dug in the apartment with a laptop and sat down to work.
The first thought was to upgrade the site about the weather. Had:
1. do admin panel for making sets
2. figure out where to get the data for the site (not all the same to copy-paste)
3. make some kind of socialization - the ability to like, can make combinations of clothes and you and you

The second thought was:
1. OMG. This "additional functionality" is enough for a whole site!

At first we looked at the competitors. Found several popular sites with a similar idea at the base, but among them there was practically no one in which sets of clothes could be made up of real things. Almost all Russian sites offer to make sets of pictures. And they are monetized somehow along the road, through banners or their store, which participates little in the compilation of sets by users. The only complete competitor for this idea is the website polyvore.com, but they, fortunately, are not localized, so that it seems you could safely go into battle.

Particularly insidious part of the plan was the one in which popular kits, compiled by users of the site, were forwarded to the site about the weather. That is, the manual labor of the programmer is excluded from the process and is replaced by the applied online creativity of users.

We began to explore where you can get quickly and simply a large base of things. We studied the options for a long time, looked towards the Yandex.Market API. But at some point, they came across affiliate programs of sites admitad.ru and gdeslon.ru, which are able to upload data in xml-format and supply them with affiliate links (if a person buys something from our site, there will be a profit).
Thirst for profit blanketed our eyes and we stopped at the second option.

Uninteresting facts about the process

The server part is the same, the actors are the same. I needed a server with a large amount of RAM to give them to indices in Mong. As a result, everything is spinning on a server somewhere in Germany. For 2800r per month we get unlimited network traffic, 48 gigs of operatives and 4 TB of disk space.

The editor of things was taken ready (Fabric.js) and slightly modified with a file.



In the editor there was a cant with a resize of images - if the image was reduced, then the canvas filters gave too coarse antialiasing. Therefore, before saving the collage, we ourselves do a smoothing of the pictures included in the collage (the algorithm has no scientific value - we took the first found variant).

Also in the editor was a tool for trimming the white background from the image.
This is a necessary tool, but it had to be completed.
Firstly, it only works with a white background, and secondly, often the picture is often almost indistinguishable from the background (white shirts on a white background are our curse).
Therefore, we wrote our own image search algorithm. It is quite simple - we take the upper left pixel of the picture and consider it as the background color. We make the pixels related to the background transparent. Pixels, which lie on the threshold of good and evil, do proportionally translucent.
To solve the problem of white on white, we honestly stole the idea from competitors. We did this kind of circumcision thing with Raphael.



I also had to work with pictures when we started to see what partnesny shops give us. Often things are photographed along with the people on whom these things are worn. We made autodetection of human faces using OpenCV to take only photos without people. It was not possible to weed out all inappropriate photos, but still there was some profit.

It took 2 days of continuous work of the computer to upload and process images (80,000 items, 4 pictures on average).

The incoming XML files with the data about things were distilled into JSON using xml2js. There was a small surprise with a very non-linear increase in the time of file parsing. A 200 MB file could be parsed for several hours. But otherwise, the export of data from partners was uneventful.

We decided to authorize users via social networks and at the first approach to the projectile they used uLogin. But they quickly realized that uLogin provides a very limited set of functions and will have to write their own wrappers over the social networks. In the category of “most apy” won api facebook. And the interfaces are nice, and the UX manuals are placed everywhere in the documentation. In short, beauty. The documentation for My World was pleasantly surprised (it would seem). The most incomprehensible api turned out to be from classmates. Some of the necessary things could be learned only from correspondence with technical support.

You can endlessly talk about the process, so I will wrap up.

The general list of technologies that we use (in general, everything is poppin):
1. Node.js
2. MongoDB
3. nginx
4. Jade
5. RequireJS
6. Data Storage in Memory - Redis
7. Raphael for the editor
8. Fabric.js - collage editor
9. LESS for css
10. ImageMagick for post-processing of server collages
11. OpenCV for Face Detection
12. xml2js for parsing data from partners

+ In the future we plan to upload images to CDN via rsync.

What we have now

Now we finally launched the site in public and made a redesign of dress4weather.ru.


Freshly baked fashionhearts.ru


New maple dress4weather.ru

According to the results of a social experiment on a human programmer, I will say - it is very hard to work at home. Sometimes Serezha looked with a blissful smile out the window and repeated: "How good, how good, how good, that I am doing my project!". Sometimes he painted his face on a baseball, called him Wilson and complained about a villain-fate. In short, the life of a simple programmer is hard and unsightly.

The main provider of custom content on our site is me now. We threw a cry and asked friends to create. But since our compassionate friends are mostly developers, we could only blast and delete over the results.
Here's how programmers see fashion and style:



We are in the stage of promotion. Automatically get some traffic from our site about the weather.
Just recently, I decided to try advertising for VKontakte and classmates.
We simultaneously submitted two different announcements to VKontakte. One ad was accepted almost immediately, and the other was unlucky. For two days I was humiliated with muddy answers, I could not stand it and wrote to tech support.
They replied that “sorry, made a mistake with the point of rejection,” and in the end banned to advertise our most wonderful sites, because the links pass through partner sites, and this is a redirect. A site with a redirect contact does not advertise.
It’s a shame that I foolishly deposited money on my bill of advertising, and now, to withdraw them, I need to send them a scan of the application, a copy of my passport, fingerprints and a blood sample . And if I do all this, I will be banned forever in the advertising network of contact. Here I wonder what to do, 30 bucks is not superfluous ...
With advertising in classmates, everything turned out to be much simpler and now our superbanner is spinning, luring victims.
We are slowly coming to the realization that we need to look in the direction of advertising in the thematic communities.

We are finalizing the site, I am writing articles for it and content. Serezha is engaged in small things like coding and design.
We are fun and scary!
PS And borscht I really know how to cook. Proof: