smisyuk4/Photo-social-net

Мобільний додаток

Соціальна мережа де користувачі можуть публікувати свої фотографії.

Клієнтська частина

• React native
• Expo
• Redux (збереження та передача даних про користувача)
• demo video on android
• demo video on ios

Серверна частина

Firebase, де зберігаються аватари користувача, фотографії постів, а також всі текстові поля. Вони між собою пов`язані.

• вигляд об`єкту - публікація (post):

• вигляд об`єкту - коментар (comment):

Макет

Для проекту був розроблений дизайн, по ньому деякі моменти були не зрозумілими, а документація відсутня, тому зробив частину функціоналу на свій розсуд.

• Figma

Дорожня карта користувача

1. Реєстрація (екран реєстрації)

• заповнити поля форми
• додати аватар з галереї. За замовчуванням зображення котиків

2. Перегляд публікацій всіх користувачів (екран публікації)

• перегляд геолокаціі публікації
• перегляд та коментування публікацій

3. Cтворення нової публікації (екран створення публікації)

• завантажити фото / зробити новий знімок
• написати заголовок до публікації. За замовчуванням «Незабутня подія»
• змінити геолокацію (кнопка), перетягнути маркер на потрібне місце. За замовчуванням геолокація мобільного пристрою.
• написати назву геолокації. За замовчуванням місто та вулиця де знаходиться мобільний пристрій

4. Перегляд власних публікацій (екран користувача)

• завантаження нового аватару з галереї

Тестування додатку

1. Запуск на сервері Expo

Потрібно скачати додаток Expo на телефон, а для ios ще необхідно зробити авторизацію інакше політика не дозволить.

2. Клонування проекту собі на ПК та запуск локально

Обовʼязково створіть файл .env на рівні з App.js і запишіть в нього наступні змінні з своїми значеннями:

API_KEY=...
AUTH_DOMAIN=...
PROJECT_ID=...
STORAGE_BUCKET=...
MESSAGING_SENDDER_ID=...
APP_ID=...
MEASUREMENT_ID=...

Після цього потрібно завантажити модулі npm i, а вже тоді запускати сервер npm start

Допомогали тестувати

• Iryna Rybka - Front-end Developer
• Olena Boiko - QA Engineer
• Vitalii Volianyk - Full Stack Developer
• Marharyta Okhten - Front-end Developer

Коли не зміг розібратись з деякими багами, то звернувся до спільноти в лінкедін, а там двоє розробників допомогли:

• Max Pashynov - React / React Native Developer
• Mykyta Rusyn - React Native Developer

Про мене та процес розробки

Я fullstack розробник початківець. Вивчаю JavaScript, React, React Native, Node JS...

• Linkedin

• GitHub

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

Також слідкував за роботою додатку у React Native Debuger, там відловлював помилки та контролював данні в Redux та state компонентів

Всі виникаючі питання вирішував в більшості самотужки за допомогою пошуків відповідей у інтернеті. Окрім офіційної документації найбільше користі принесли такі ресурси як:

• stackoverflow
• medium