Skip to content

jleonardoDeveloper/IdatgramReactNative

BranchesTags

Repository files navigation

Idatgram - Instagram Clone con React Native

Aplicación educativa de red social desarrollada con React Native + Expo, TypeScript, NativeWind (Tailwind) y SQLite. Incluye arquitectura profesional con patrones MVVM, gestión de estado global y base de datos local escalable.

🎯 Características Implementadas

✅ Autenticación - Login/Register con validación
✅ Feed de Posts - Carga infinita, likes, comentarios, guardar
✅ Historias - Creación y visualización con expiración 24h
✅ Perfiles - Ver/editar perfil, follow system, stats
✅ Búsqueda - Búsqueda de usuarios en tiempo real
✅ Notificaciones - Sistema de notificaciones por tipo (like, comment, follow)
✅ Comentarios - Posts, replies anidadas, likes en comentarios
✅ Cámara - Captura y edición de fotos antes de compartir
✅ Base de Datos - SQLite con 10 tablas normalizadas

🏗️ Stack Tecnológico

Frontend: React Native 0.76 | Expo 54 | TypeScript 5.9 | NativeWind
Navegación: React Navigation 7.x (Stack + Bottom Tabs)
Estado Global: Zustand 4.5
Base de Datos: SQLite (expo-sqlite 13.4)
API: Axios 1.7 (lista para backend real)
Media: expo-camera, expo-image-picker
Storage: AsyncStorage para persistencia
Utilidades: 35+ helpers para validación, fecha, permisos, IDs únicos

📁 Estructura del Proyecto

src/
├── database/              # SQLite + Repositorios CRUD
│   ├── sqlite.ts         # ORM/Query builder
│   ├── userRepository.ts
│   ├── postRepository.ts
│   ├── commentRepository.ts
│   ├── storyRepository.ts
│   └── notificationRepository.ts
├── store/                # Zustand stores (auth, posts, stories, search, activity)
├── navigation/           # React Navigation config
├── screens/              # 15 pantallas (auth, tabs, detalles, settings, cámara)
├── components/           # UI.tsx - 8 componentes reutilizables
├── types/                # 15+ tipos TypeScript
├── services/             # 6 módulos API listos para backend
├── utils/                # 35+ helpers (validación, fecha, permisos, IDs)
└── api/                  # Cliente Axios configurado

🗄️ Base de Datos (SQLite)

10 Tablas normalizadas:

  • users - Perfiles de usuario
  • posts - Posts con caption, imagen, ubicación
  • comments - Comentarios + replies
  • stories - Historias con expiración 24h
  • post_likes, comment_likes - Interacciones
  • saved_posts, user_follows - Relaciones
  • story_views - Seguimiento de vistas
  • notifications - Sistema de notificaciones

Características: Foreign keys, cascading deletes, indexes para performance

� Instalación Rápida

npm install                    # Instalar dependencias
npm start                      # Iniciar servidor Expo
npm run ios                    # Emulador iOS
npm run android                # Emulador Android
npm run lint                   # Verificar código
npm run format                 # Formatear código

📱 Pantallas Implementadas (15)

Pantalla Estado ✓ Funcional
Login Implementada ✓
Register Implementada ✓
Home/Feed Implementada ✓ - Ver posts, stories, like, comentar
Search Implementada ✓ - Buscar usuarios
Add Post Implementada ✓ - Cámara + edición
Activity Implementada ✓ - Notificaciones por tipo
Profile Implementada ✓ - Ver/editar perfil, posts, guardados
PostDetail Implementada ✓ - Ver post + comentarios
UserProfile Implementada ✓ - Perfil de otros usuarios
Comments Implementada ✓ - Ver todas las respuestas
Followers/Following Implementada ✓ - Listas de relaciones
Likes Implementada ✓ - Usuarios que dieron like
StoryViewer Implementada ✓ - Visor 24h con progress
Camera Implementada ✓ - Captura y flip camera
EditPhoto Implementada ✓ - Caption, ubicación, post
SavedPosts Implementada ✓ - Grid de guardados
EditProfile Implementada ✓ - Avatar, bio, website
Settings Implementada ✓ - Logout

⚠️ QUÉ FALTA PARA QUE SEA COMPLETO FUNCIONALMENTE

🔴 CRÍTICO (No funciona sin esto)

  1. Backend API Real

    • Conectar a servidor backend real
    • Reemplazar mock data con respuestas del servidor
    • Actualizar src/api/client.ts con API_URL real
    • Implementar autenticación JWT real
    • Archivos afectados: src/services/api.ts, src/api/client.ts

  2. Sincronización de Datos

    • Sincronizar posts locales con servidor al crear
    • Sincronizar likes/unlikes en tiempo real
    • Sincronizar follows/unfollows
    • Impacto: Las acciones del usuario solo afectan BD local, no el servidor

  3. Imágenes

    • Upload de imágenes a CDN (AWS S3, Cloudinary, etc.)
    • Reemplazar URIs locales con URLs públicas
    • Placeholder mientras cargan imágenes
    • Archivos: src/screens/camera/EditPhoto.tsx, src/services/api.ts

🟠 IMPORTANTE (Funcionalidad incompleta)

  1. Notificaciones Push

    • Configurar FCM (Firebase Cloud Messaging)
    • Registrar tokens de dispositivo en servidor
    • Recibir notificaciones en tiempo real en background
    • Badge en app icon
    • Archivo: src/utils/helpers.ts (stubs de permisos listos)

  2. Ubicación en Tiempo Real

    • Obtener ubicación actual del usuario
    • Mostrar ubicación en posts
    • Sugerencias de ubicación cercana
    • Librería: expo-location@^16.5.5 ya instalada

  3. Autenticación

    • Pantalla "Forgot Password"
    • Recuperación de contraseña por email
    • Verificación de email
    • Cambiar contraseña en Settings
    • Logout en todos los dispositivos

  4. Performance & Optimización

    • Lazy loading de imágenes en feed
    • Paginación optimizada (actualmente carga 20/vez)
    • Caché inteligente de imágenes
    • Sincronización offline con queue

  5. Búsqueda Avanzada

    • Buscar hashtags (#)
    • Buscar ubicaciones
    • Buscar posts por contenido
    • Filtros (fecha, popularidad)

🟡 MEJORAS UX/Funcionalidades Extra

  1. Edición de Contenido

    • Editar posts (caption, ubicación)
    • Editar comentarios
    • Eliminar propios comentarios con confirmación
    • Marcar como spam/reportar

  2. Mensajería Directa

    • Nueva pantalla: Direct Messages
    • Chat 1-a-1
    • Mensajes con hora de lectura
    • Indicador de "escribiendo..."

  3. Filtros & Edición de Fotos

    • Filtros de Instagram en cámara
    • Ajustes de brillo/contraste
    • Recorte de imagen
    • Stickers en stories

  4. Menciones & Hashtags

    • @mencionar en comentarios
    • Sugerencias de usuario al escribir @
    • Notificación al ser mencionado
    • Página de hashtag con posts relacionados

  5. Interacciones Sociales

    • Emojis en reacciones de posts
    • Compartir en historias
    • Compartir perfil
    • Bloquear usuarios

  6. Estadísticas del Perfil

    • Insights de posts (impresiones, saves)
    • Análisis de followers (gráficos)
    • Mejor hora para publicar
    • Dashboard para creadores

🔧 Cómo Conectar Backend Real

Paso 1: Configurar API_URL

// src/api/client.ts
const API_BASE_URL = process.env.API_URL || 'https://api.idatgram.com';

export const apiClient = axios.create({
  baseURL: API_BASE_URL,
  timeout: 10000,
});

Paso 2: Implementar Login Real

// src/store/authStore.ts
const login = async (email: string, password: string) => {
  const response = await apiClient.post('/auth/login', { email, password });
  const { token, user } = response.data;
  
  set({ user, token, isLoading: false });
  await AsyncStorage.setItem('authToken', token);
};

Paso 3: Sincronizar Todas las Operaciones

  • Reemplazar llamadas locales (postRepository.createPost()) con postsService.createPost()
  • Actualizar store para hacer API calls en lugar de DB local
  • Mantener cache local para offline support

Paso 4: Implementar Upload de Imágenes

// En EditPhoto.tsx
const formData = new FormData();
formData.append('image', {
  uri: photoUri,
  type: 'image/jpeg',
  name: 'photo.jpg',
});

const { imageUrl } = await apiClient.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
});

📊 Datos de Prueba

Usuario Demo (sin backend):

Email: test@example.com
Password: password123

Roles de Prueba:

  • Admin: Acceso a todas las funciones
  • Usuario Regular: Solo sus propios posts
  • Usuario Bloqueado: Sin acceso a ciertos usuarios

🏛️ Patrones de Arquitectura Implementados

✅ Repository Pattern - DB abstraction (5 repositorios CRUD)
✅ Zustand Stores - State management global por dominio
✅ Component Composition - UI components reutilizables en UI.tsx
✅ Type-Safe Navigation - TypeScript para rutas de React Navigation
✅ Service Layer - Abstracción de API (6 servicios)
✅ Async Operations - Loading/error states en stores
✅ Optimistic Updates - Like/unlike con rollback
✅ Transaction Support - Operaciones atómicas en SQLite

🔗 Endpoints API Listos (30+)

Auth: login, register, getCurrentUser, logout
Posts: getPost, createPost, updatePost, deletePost, getFeed, likePost, savePost
Users: getProfile, updateProfile, followUser, getFollowers, searchUsers
Comments: getComments, createComment, deleteComment, likeComment
Stories: createStory, getStories, viewStory
Notifications: getNotifications, markAsRead

📈 Línea de Tiempo para completar la solución

Prioridad Tarea Tiempo Complejidad
P0 Backend API + Auth real 1-2 días Alto
P0 Upload de imágenes 1 día Medio
P1 Notificaciones push 1-2 días Medio
P1 Ubicación en tiempo real 4 horas Bajo
P2 Mensajería directa 2-3 días Alto
P2 Filtros y edición fotos 1-2 días Medio
P3 Offline support completo 1 día Medio
P3 Tests unitarios 2-3 días Medio

📚 Documentación Incluida

  • README.md (este archivo) - Setup y guía
  • Comentarios en código fuente
  • Tipos TypeScript documentados con JSDoc
  • Ejemplos en utils/helpers.ts

🧪 Testing (Estructura Lista)

// Tests unitarios listos para implementar
describe('authStore', () => {
  it('debe hacer login correctamente', async () => {
    // TODO: Implementar
  });
});

describe('postsRepository', () => {
  it('debe crear post con relaciones', async () => {
    // TODO: Implementar
  });
});

🔒 Seguridad

Implementado:

  • ✅ Validación de inputs en todos los forms
  • ✅ Tokens JWT listos (estructura)
  • ✅ Headers de autenticación en requests
  • ✅ AsyncStorage para tokens
  • ✅ HTTPS-only API ready

Pendiente:

  • Rate limiting en API
  • CSRF protection
  • Validación server-side
  • Encriptación de datos sensibles
  • Seguridad de permisos (RBAC)

🚀 Deployment

# Build para producción iOS
npx eas build --platform ios --release

# Build para producción Android
npx eas build --platform android --release

# Enviar a App Store
npx eas submit --platform ios

# Enviar a Play Store
npx eas submit --platform android

🤯 ¿Algún problema?

Errores Comunes:

  • Database not initialized: Reinicia la app, se inicializa en App.tsx
  • Cannot find image: Verifica URIs en src/utils/helpers.ts
  • Navigation error: Revisa tipos en src/navigation/types.ts

Debugging:

npm start --verbose          # Ver logs detallados
# O en DevTools: Console.log o inspect con React DevTools

🚨Para otros problemas, comentar en la sesiones semanales del curso en cualquier momento!!!

Versión: 1.0.0
Última actualización: Marzo 2026
Autor: Julio Leonardo
Licencia: MIT

🎉 ¡Listo para extender, mejorar y publicar!

About

Aplicación Idatgram para el curso de desarrollo de aplicaciones móviles I

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages