Маркетплейс
Найкращий проєктКросплатформний мобільний маркетплейс з адаптивною темою темна/світла, бекендом Firebase, синхронізацією Firestore в реальному часі та повною підтримкою мов (EN/UK). Побудований з Expo SDK 54.
Створення сучасного маркетплейсу означає вибір між дорогим нативним розробленням для кожної платформи або повільними гібридними рішеннями. Більшість рішень не мають адаптивної теми, виглядають важко на мобільних та прив'язують до єдиної екосистеми без можливостей реального часу.
Кросплатформний маркетплейс, що забезпечує нативну якість на iOS, Android та Веб з єдиної кодової бази Expo. Має синхронізацію в реальному часі через Firebase, безперебійний процес оформлення замовлення, push-сповіщення та відшліфовану адаптивну тему, що поважає системні налаштування темного/світлого режиму.
Expo Router керує навігацією на основі файлів через 14+ екранів з захищеною авторизацією маршрутизацією. Firebase обробляє автентифікацію, Firestore забезпечує синхронізацію даних в реальному часі через прослуховувачі onSnapshot. Стан керується через React Context з користувацькими хуками. Zod схеми забезпечують типобезпечну валідацію від реєстрації до оформлення замовлення.
Згуртована дизайн-система з фіолетовим (#6055D8) акцентом, 16px радіусом меж на інпутах, кнопками у формі пігулок та послідовними відстанями. Кожен компонент автоматично адаптується до системної кольорової схеми через useColorScheme. Вісім варіантів скелетонів забезпечують плавне сприйняття завантаження на всіх екранах.
### Синхронізація в реальному часі Firestore прослуховувачі onSnapshot тримають продукти, кошик та замовлення синхронізованими між пристроями миттєво. Без опитувань, без ручного оновлення. ### Адаптивна тема Автоматичний темний/світлий режим на всіх 14+ екранах. Визначення системної кольорової схеми з плавними переходами та семантичною системою токенів. ### Повна підтримка мов Англійські та українські переклади на основі i18n-js з автоматичним визначенням мови пристрою через expo-localization. Перемикання без перезапуску додатку. ### Типобезпечні форми Zod схеми + react-hook-form керують валідацією від авторизації до оформлення. Спільний вивід типів між логікою валідації та UI. ### 8 варіантів скелетонів Анімовані скелетони завантаження для продуктів, банерів, замовлень, рядків кошика, секцій форм та іншого — без спалаху контенту, плавне сприйняття продуктивності. ### Push-сповіщення Expo Push API + Firebase Cloud Messaging v1 для оновлень замовлень та рекламних сповіщень. Перемикач системного дозволу з зворотним зв'язком в реальному часі. ### Процес авторизації Вхід email/пароль, Google Sign-In, скидання пароля та Telegram OIDC. Постійні сесії через AsyncStorage з автоматичною захищеною маршрутизацією. ### Промо-система Серверна валідація промокодів через Firestore. Налаштовувані ставки знижок та терміни дії через Firebase Console.
```ts import { onSnapshot, doc, getDoc, setDoc, serverTimestamp } from 'firebase/firestore'; export const CartService = { subscribe(callback: (items: CartItem[]) => void): Unsubscribe { const uid = auth.currentUser?.uid; if (!uid) { callback([]); return () => {}; } return onSnapshot(doc(db, 'carts', uid), (snapshot) => { callback(snapshot.exists() ? (snapshot.data().items ?? []) : []); }); }, async upsertItem(item: CartItem): Promise<void> { const uid = auth.currentUser!.uid; const cartRef = doc(db, 'carts', uid); const snapshot = await getDoc(cartRef); const currentItems: CartItem[] = snapshot.exists() ? (snapshot.data().items ?? []) : []; const idx = currentItems.findIndex(i => i.id === item.id); if (idx >= 0) { currentItems[idx].quantity += item.quantity; } else { currentItems.push(item); } await setDoc(cartRef, { items: currentItems, updatedAt: serverTimestamp() }); }, }; ``` Підписка Firestore в реальному часі через `onSnapshot` тримає кошик синхронізованим між пристроями. Метод `upsertItem` об'єднує кількості при повторному додаванні існуючого продукту — без дублікатів, без втрати даних.
Хочете побачити більше?
Перегляньте повний каталог проєктів або завантажте код.