How I did a social network in 2019

In this article I will tell you how I did my social network project for the sphere of art havidea.ru from idea to release. I will tell about the technical part, about motivation and self-organization, what tools I use in the development process, about the problems in working with the field of art that I encountered almost immediately after launch. The project survived the reincarnation, i.e. There was the first option , which I abandoned and the final, the second , which went into release.

I have been working in web development for a little over three years. The project went up alone in the time free from the main work and the main goal was to release the product on time (6 months).

Inspiration, idea, research

As a teenager, I began to get involved in music, painting. A little later, he caught fire with 3D graphics and even managed to earn the first penny on 3D models. A couple of years later, I seriously took up photography and video filming, and during the same period I learned a future wife, an actress, during vocal lessons (and this was in my life, yes). All this prompted to do some project to support the "fun" destinies of creative people. Iii? Social network? Why not? But this is heytat supposedly soc. networks are dying. Someone's dying, but I can do it, right? And in general, if there is a reasonable idea and concept, why not translate it into a web page? Going on a list of social networks, came across an interesting option - stage32. In my opinion, this is the only serious overseas platform that has gathered a community involved in filmmaking. I did not find any analogues in Russia at the time (beginning of 2017) (I was looking bad?). Solved. I will make my service based on the best images, practices and UX of already existing social services. networks, but with a bias in the field of theater, film and art in general.
')

Ideology of the project

Non-commercial, without advertising, as useful as possible for the participants themselves. Free, without surveillance, without metrics. Protect user data.

The first version (2017)

Any project must begin with the formulation and answer to the questions: for whom? For what? What problem does it solve (goal)? What are the alternatives? What benefits can be offered? After clear and concise answers, I make a list of the functionality of the future project. Further, I am determined with the backbone: I remove all the desires and fantasies from the general list of functionality and leave only the most necessary things, without which the application will not function. From the minimum functionality I select a stack. Looking for examples of implementation. At this stage there is already a general picture: what to do, what for and how. I write down the whole process, comments and thoughts in a notebook in order not to re-decide what I had previously refused.

I start designing a UI with a piece of paper and a pencil. Any piece that is at hand, goes into business, until the thought ran away. I decide on the pages and spend the second rough iteration already in electronic form (it is easier to change something):


Next, I work through sketches in detail. For example, the very first version of the profile page:


Posts, comments, likes, an album with photos - all according to the classics. From the new:
advanced profile for actors, search by professions and skills.

For layout layout used modulargrid.org :


I experimented with 12, 15 column grids, but I stopped at 12. I want to note that the layout on the modular grid is ambiguous. You may not always be able to enter information into blocks, because interfaces are a graphical display of data. I proceed from the principles of Data-Driven design, i.e. The main purpose of interfaces is to provide data and convenient options for interacting with them. That is why designer! = Web designer. Returning to the problem of the modular grid, I will say that it only helps in the initial arrangement of the blocks, and the final version must be affirmed with the help of a trained eye. In addition, in any entity must be zest or deviation from the rules to add vitality.

A couple of sketches of the main page:



Some solutions do not look very successful and are removed / corrected during layout. At the design stage, one should give oneself freedom and not bring everything up to the ideal.

Login page:


After sketching the desktop version, I pay attention to mobile. Is the graphic part ready? Normas. It's time to code.

Frontend first option.

As a background for the main page, I used the Three.js library to work with WebGL. The triangles float freely and “follow” the mouse. Looking ahead, I’ve said that in reincarnation I refused Three.js and did it on css + png, because the library weighs ~ 570kb and it seemed wasteful to use it for one simple effect. In development, I stick to installations: minimalism, performance, ease of support. Since about 3/4 of social networks are used from mobile, priority was given to lightness and speed. As a library of UI components, I took Bootstrap 4 . Without jquery, only css. I tried the bootstrap-vue wrapper, but somehow it didn’t go down. Non-valid html tags were striking and I wanted the freedom of customization. As you might have guessed, the Vue framework. I wanted to initially lay a good indexing search engines, so twirled Nuxt .

Backend first option.

Laravel . For one-man projects vue + laravel = must have. The speed of development, a large community, a bunch of ready-made packages. API-first architecture (the backend is initially developed as an API).
What is API without documentation? ApiDoc is a great thing that can generate documentation from PHPDoc. Routing customized and rendered route files from a single api.php, i.e. one file, one route. For convenience and to generate documentation. Inspiration scooped from Apiato . A good starter kit for the API, stuffed with different design patterns and original architectural Porto , designed to break the application into modules, but in fact leading to the monolith. Judging by the repository, the project was abandoned more than a year ago. Most likely, due to the active distribution of microservice architecture.

Rest, pumping skills

It was 2018. In the first version I managed to implement registration, authentication, profile page with editing, settings page. There was little time in the evenings. Then I just started the vue path, and ssr on nuxt was capricious. As a result, after 4-5 months was blown away. It was an ambitious project and didn’t have enough skill to lift it without falling down. For 2018, I strongly pulled myself up as a full stack developer, mastered docker, and in the beginning of 2019 I started everything from scratch. Well, almost from scratch.

The second option (2019), release

Frontend second option.

I refused nuxt ssr - the layer from node.js requires additional attention, and I did not see any need for it specifically on this project. Bootstrap replaced by Quasar - a full-fledged vue UI (and not only) framework (why I’ve told you about it below). Interfaces are completely redone, gone from the VC-style concept. Now insta-style. Added the ability to create three types of publications: photos, videos and text. In the layout used 24 column grid. Now the service looks like this:


Yes, you can make the top menu transparent. But you need to be able to say no. I finally drew the main page again. Therefore, do not go into details before the full picture. Sooner or later you will want to change everything and no matter how beautiful the decision was. Of course, the site is fully adapted:


About TypeScript. I tried to implement it, but later I cut it out, because strong typing requires more time for the placement of types and interfaces. I came to the conclusion that TS without strict mode does not make sense. It is true - why typing without specifying types. In strict mode, you have to describe everything and it is at least + 30% of the development time. And if you have not approved the data exchange scheme with the backend, you will have to be constantly distracted by minor edits. In some places, you will need to ignore compiler errors by adding the @ ts-ignore comment to the code just because you are not responsible for third-party code that does not fully support TS. In addition, all the benefits of TS are revealed in complex logical calculations, i.e. typing .vue files is somewhat redundant. I will be glad to hear comments on this topic.

When the front was 90% complete, I plowed up Browserstack and tested the application on Safari. I do not regret the money spent, because I managed to fix a couple of simple but critical bugs. Minute bombolaylo. Safari, when will you start thinking about users and developers? For years, do not fix bugs. Especially sticky scrolling modalka. I have not found a 100% working way for how to make Safari scroll content correctly in a modal window. I would be glad if someone came across and tells you the solution.

In addition to the main application, I also made a simple admin panel with my api:


There is nothing remarkable in the admin. Just UI coverage for some features, because of which too lazy to climb into the database and edit the data by hand.

Backend of the second option.

Laravel . Mandatory validation of all incoming data, cors headers, additional security headers secure headers , following the RESTful specification (somehow try JSON-RPC), Fractal to transform the output data to the front. Try-catch of everything so that the user does not press the mouse, but gets a clear reason for the error. Automatic dumps of both databases using db-dumper . I did not write any automated testing, for it is limited in time. It is necessary to pump up and try TDD , it may not turn out much to increase the development time or even reduce.

Separately, I want to say that I avoid the use of abstractions in the initial stages of design, if we can now do without them. Premature use of them leads to the complexity of the application module, which can never be used. Solve problems as they are received. Yes, it’s not easy to maintain a balance between architecture and deadlines, and this only comes with experience, but it’s better to spend time thinking through the database, and you can rewrite the application code at any time. The most important resource we have is time. It is better to release a non-perfect product and be the first than to catch up with competitors. And they will.

Problem stagnation

The launch took place in late May. I started advertising and almost immediately came across a similar service. Yes, they essentially implemented the same idea. 2 years earlier. It was necessary to better explore the market and monitor it constantly for new services. But the problem is not even that. In the process of discussions, reflections and just life experience, I came to the conclusion that the problem of employing people of art is much deeper and perhaps a specialized social network does not help. This is a market problem of job shortages. In which direction to develop the product, I do not know exactly. Now the project is experiencing stagnation.

Under the hood

Total

Despite the current situation with my views on the peculiarities of the art market, I do not regret a few hundred hours spent. The process was fascinating, gave a bunch of experience and not only programmer. I made the service the way I thought and was proud of the final implementation. I was moved by the belief that I could help creative people. This was the main motivation. Maybe the original non-commercial approach put the project in a difficult position? There is a (controversial) opinion that it is necessary to start either a business or nothing. It is sad, but sometimes it is better to stop in time than to do what you do not believe. If a new understanding comes in which direction to move, I will continue to develop. I will be flattered by your opinions.