На хакатоні у вас всього 24 години на реалізацію прототипу додатку. Тому вкрай важливо використати час ефективно та встигнути досягти бажаного результату. Ми зібрали поради, які допоможуть вам сконцентруватись на першочергових задачах.

Створіть демо-прототип, а не реальний додаток

В першу чергу ви маєте створити прототип. Він має демонструвати напрям вирішення обраної вами проблеми. Це функціональний доказ того, що у вас є що запропонувати потенційним користувачам. Він має роботи щось корисне. Та при цьому це не фінальна версія, вже готова для загального застосування.

Для користувачів Git

Якщо у вас вже є досвід роботи з Git в команді – чудово! Можете сміливо використовувати його. Заведіть собі репо на GitHub і вперед! На початку варто синхронізувати зміни та вирішувати конфлікти в коді якомога частіше. Тому перші декілька годин роботи бажано працювати лише з гілкою master. Коли у вас буде стабільна структура додатку, який щось робить – можна почати працювати в окремих гілках. Не забудьте додати node_modules в .gitignore. package-lock.json також можна ігнорувати для мінімізації конфліктів. За 24 години нові версії пакетів навряд чи вийдуть :).

Сутужно з Git – спробуйте DropBox

Якщо у вас немає досвіду використання систем контролю версій, то хакатон не найкращий час його отримати. Натомість, синхронізуйте свій код за допомогою DropBox. Тут важливо пам’ятати 2 правила:

1. Не можна декільком тіммейтам одночасно додавати npm залежності.
2. Інший тіммейт має дочекатись, щоб синхронізувались попередньо додані залежності, і тільки після цього додавати нові.

Вам може не знадобитись справжній backend

В першу чергу, на демо ви будете показувати інтерфейс додатку. Бекенд ніхто не побачить. Навіть більше – ніхто і не помітить, якщо замість запрограмованого вами бекенду у вас буде його імітація, наприклад json-server. Або ви використаєте готовий сервіс, який надасть можливість зберігати та синхронізувати дані, ідентифікувати ваших користувачів. Такий як Firebase. Ви можете навіть зберігати всі дані в localstorage чи геть лише у пам’яті поточного вікна браузера. Але це вже занадто просто :).

Будьте готові вирішити проблеми з CORS

Якщо у вас є бекенд, значить ви будете запускати два окремих сервери на різних портах. Один – сервер для розробки вашого фронтенду. Інший – власне ваш бекенд. Домен у вас буде той самий – localhost. Та для браузера, сторінка яка відправляє запит на інший порт, має отримати дозвіл на CORS (Cross Origin Resource Sharing). Для деяких бекендів достатньо додати та підключити одну залежність. Наприклад, пакет cors для Express. А json-server має налаштований CORS за замовчуванням, тож з ним не буде проблем.

Використовуйте готові UI компоненти

Зробити більше за менше часу, та ще й щось пристойного вигляду, допоможуть готові шаблони та UI компоненти. Каталоги готових шаблонів ви знайдете за посиланнями https://startbootstrap.com/template-categories/all/,  

http://getbootstrap.com/docs/4.1/examples/ та http://www.tooplate.com/. Бібліотеки готових компонентів є для всіх популярних SPA фреймворків. Для Angular можете використати ng-bootstrap чи Angular Material. Для React на ваш вибір Material-UI, Reactstrap (Bootstrap 4), Semantic UI React та багато інших.

Далі буде…

Це лише частина порад. Інші отримайте вже з перших вуст від наших менторів ;).