Project "Social Network - app Social Media - Frontend" | Проєкт "Social Network - додаток Social Media - Frontend"

---

Навігація | Navigation on README:

• Мета проєкту | Project Goal
• Склад команди | Team
• Перелік технологій | Technologies
• Стиль написання коду | Code writing style
• Деталі роботи у команді | Details of teamwork
• Опис екранів | Screens description
• Як встановити та запустити проєкт? | How to install and run the project?
• Висновок | Conclusion

Мета проєкту | Project Goal

Цей проєкт — навчальний повнофункціональний мобільний застосунок соціальної мережі. Він буде корисний початківцям, які хочуть на практиці вивчити розробку мобільних застосунків на React Native + Expo, роботу з real-time комунікацією через Socket.IO, модульну архітектуру FED, авторизацію через JWT та валідацію форм через React Hook Form + Yup.

---

This project is an educational, fully functional mobile social media application. It will be useful for beginners who want to practise mobile development with React Native + Expo, real-time communication via Socket.IO, modular FED architecture, JWT authentication, and form validation with React Hook Form + Yup.

Склад команди | Team

• Julia Ovcharenko
• Oleksandr Voloshyn

---

Перелік технологій | Technologies

---

Стиль написання коду | Code writing style

1. Код розподіляється за логічними шарами модульної архітектури:

   

• app — файлова маршрутизація через Expo Router (entry points).
• components — UI-компоненти для побудови екранів.
• hooks — кастомні хуки (socket, форми, авторизація тощо).
• shared — перевикористовувані типи, утиліти, константи.
• assets — статичні ресурси (зображення, шрифти, іконки).

2. Найменування файлів формується через крапку відповідно до призначення:

   • screen.tsx
   • types.ts

3. Для відступів використовується один Tab (4 пробіли).

4. Компоненти — функціональні, з використанням хуків.

5. Стилізація через StyleSheet.create() від React Native.

---

1. Code is organized into logical layers of modular architecture:

• app — file-based routing via Expo Router (entry points).
• components — UI components used to build screens.
• hooks — custom hooks (socket, forms, auth, etc.).
• shared — reusable types, utilities, constants.
• assets — static resources (images, fonts, icons).

1. File names are formed with a dot according to their purpose:

   • screen.tsx
   • types.ts

2. Indentation uses one Tab (4 spaces).

3. Components are functional, using hooks.

4. Styling via StyleSheet.create() from React Native.

---

Деталі роботи у команді | Details of teamwork

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

Ключові аспекти роботи:

1. Розподіл задач відбувався регулярно, відповідно до поточних потреб проєкту та взаємних домовленостей.
2. Ми спільно обговорювали архітектуру, планували реалізацію та узгоджували підходи до написання коду, щоб уникнути конфліктів та забезпечити цілісність проєкту.
3. Кожен учасник працював у власній Git-гілці, після чого зміни проходили перевірку та вливалися до основної гілки через pull request.
4. Підтримували регулярний звʼязок через повідомлення та дзвінки — узгоджували задачі, ділились прогресом та оперативно вирішували питання.

---

Ключові навички, застосовані в командній роботі:

1. Планування та декомпозиція задач.
2. Контроль версій (Git): робота у гілках, pull request-и, вирішення конфліктів.
3. Регулярна комунікація та взаємодія в парі.
4. Гнучкість та адаптація в умовах нестабільності.
5. Дотримання дедлайнів.

---

The project was carried out as a team. Our collaboration was built on mutual support, regular communication, and joint problem-solving.

Key aspects of the work:

1. Task distribution occurred naturally, according to the project's current needs and our mutual agreements.
2. We jointly discussed the architecture, planned the implementation, and agreed on coding approaches to avoid conflicts and ensure the project's integrity.
3. Each team member worked in their own Git branch, after which changes were reviewed and merged into the main branch via pull requests.
4. We maintained regular contact through messages and calls — aligning on tasks, sharing progress, and resolving questions promptly.

---

Key skills applied in teamwork:

1. Planning and task decomposition.
2. Version control (Git): branch workflow, pull requests, conflict resolution.
3. Regular communication and pair interaction.
4. Flexibility and adaptability under unstable conditions.
5. Meeting deadlines.

---

Опис екранів | Screens description

Екран реєстрації | Registration Screen

---

Екран реєстрації нового користувача. Користувач вводить електронну пошту та пароль. Після відправки форми на вказану пошту надсилається лист із кодом підтвердження. Користувач вводить код у відповідне поле — і лише після цього акаунт активується та видається JWT-токен. Валідація форми реалізована через React Hook Form + Yup.

---

New user registration screen. The user enters their email and password. After submitting the form, a confirmation code is sent to the provided email address. The user enters the code in the verification field — only after that is the account activated and a JWT token issued. Form validation is handled by React Hook Form + Yup.

---

Екран входу | Login Screen

---

Екран авторизації користувача. Користувач вводить електронну пошту та пароль для входу в акаунт. Токен зберігається в AsyncStorage для підтримки сесії.

---

User authentication screen. The user enters their email and password to log in. The token is stored in AsyncStorage to maintain the session.

---

Головний екран (стрічка) | Home Screen (Feed)

---

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

---

The main application screen with a post feed. The user sees posts from other users and can browse and interact with content.

---

Екран Публікацій (стрічка) | Publications Screen (Feed)

---

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

---

The application screen with a post feed. The user sees only his posts and can browse and interact with content.

---

Екран профілю | Profile Screen

---

Екран власного профілю користувача. Тут відображаються аватар, імʼя та біографія. Є можливість редагувати особисті дані та завантажити нове фото через Expo Image Picker. Профіль містить вкладки «Особиста інформація» та «Альбоми».

---

The current user's profile screen. It displays the avatar, name, bio. The user can edit their profile data and upload a new photo via Expo Image Picker. The profile includes "Personal Info" and "Albums" tabs.

---

Екран альбомів | Albums Screen

---

Вкладка «Альбоми» в профілі містить два розділи:

• Мої фото — користувач може створювати власні альбоми у вигляді фотоколажів. Кожен альбом має назву і набір фотографій, які відображаються у сітці.
• Аватарки — автоматично зберігається вся історія аватарів профілю, щоб можна було переглянути або відновити попереднє фото.

---

The "Albums" tab on the profile page includes two sections:

• My Photos — the user can create custom albums displayed as photo collages. Each album has a title and a grid of images.
• Avatar History — automatically stores the full history of profile pictures, allowing the user to view or restore a previous avatar.

---

Екран сторінки іншого користувача | User Profile Page Screen

---

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

• Надіслати запит у друзі — якщо запит ще не відправлено.
• Скасувати запит — якщо запит вже відправлено й очікує підтвердження.
• Прийняти / Відхилити — якщо цей користувач надіслав вам запит.
• Видалити з друзів — якщо ви вже друзі.

Обмін особистими повідомленнями доступний лише між взаємними друзями.

---

The profile page of another user. Displays their avatar, name, counters (posts, followers, friends), feed posts, and albums. Depending on the relationship status between users, different actions are shown:

• Send Friend Request — if no request has been sent yet.
• Cancel Request — if a request has already been sent and is pending.
• Accept / Decline — if this user sent you a friend request.
• Remove Friend — if you are already friends.

Private messaging is only available between mutual friends.

---

Екран чату | Chat Screen

---

Екран real-time чату між користувачами, доступний лише для друзів. Реалізований через Socket.IO. Підтримуються особисті та групові чати. Повідомлення відображаються в режимі реального часу без необхідності оновлення сторінки.

---

A real-time chat screen available only between friends, implemented via Socket.IO. Supports both private and group chats. Messages appear in real time without the need to refresh.

---

Екран Not Found | Not Found Screen

---

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

---

Navigation error screen. Displayed if the user navigated to a non-existent route. The user is prompted to return to the home screen.

---

Як встановити та запустити проєкт? | How to install and run the project?

For any OS

1. Перед початком переконайтесь, що на вашому компʼютері встановлено:

• Node.js (рекомендовано LTS-версію) | Перевірка / Check:

  node -v

• Git | Перевірка / Check:

  git --version

• Expo CLI:

  npm install -g expo-cli

• На телефоні — застосунок Expo Go (Android / iOS) або налаштований емулятор.

---

Make sure you have installed on your computer:

• Node.js (LTS version recommended)
• Git
• Expo CLI
• Expo Go app on your phone (Android / iOS) or a configured emulator.

---

2. Склонуйте репозиторій з GitHub | Clone the repository from GitHub:

   git clone https://github.com/your-repo/socialmedia-frontend

3. Перейдіть в папку проєкту | Go to the project folder:

   cd socialmedia-frontend

4. Встановіть залежності | Install dependencies:

   npm install

5. Запустіть проєкт | Start the project:

   npx expo start

6. Відскануйте QR-код у застосунку Expo Go або запустіть на емуляторі:

   # Android
   npm run android
   
   # iOS
   npm run ios
   
   # Web
   npm run web

7. Вітаємо! Ви локально запустили проєкт!

---

Congratulations! You have successfully run the project locally.

---

Висновок | Conclusion

Робота над цим проєктом стала цінним досвідом створення повнофункціонального мобільного застосунку на React Native + Expo. Команда успішно опанувала ключові технології: компонентний підхід, файлову навігацію через Expo Router, real-time комунікацію через Socket.IO та авторизацію на основі JWT.

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

Проєкт можна розвивати далі:еалізувати стрічку рекомендацій або додати підтримку офлайн-режиму.

---

Working on this project was a valuable experience in building a fully functional mobile application with React Native + Expo. The team successfully mastered key technologies: the component-based approach, file-based navigation via Expo Router, real-time communication via Socket.IO, and JWT-based authentication.

Despite tight deadlines and power and internet outages, we managed to build a fully functional application with a clear modular architecture. Working in branches, maintaining regular communication, and supporting each other allowed us to distribute tasks effectively and avoid code conflicts.

The project can be developed further: implementing a recommendations feed, or adding offline mode support.