frontend-gotosocial/README.md

GoToSocial React Frontend

Un frontend moderno y responsivo en React para GoToSocial - un servidor de red social ActivityPub rápido, divertido y pequeño.

✨ Características

🎨 Diseño Moderno

• Interfaz moderna basada en gradientes con estética limpia y profesional
• Diseño totalmente responsivo que funciona en desktop, tablet y móvil
• Navegación intuitiva con jerarquía visual clara
• Animaciones y transiciones suaves

🏠 Vistas de Timeline

• Home Timeline: Timeline personalizado para usuarios autenticados
• Public Timeline: Posts públicos globales de instancias federadas
• Local Timeline: Posts públicos solo de la instancia local
• Scroll infinito con funcionalidad de cargar más

👤 Perfiles de Usuario

• Páginas de perfil completas con avatar, biografía y estadísticas
• Pestañas de posts, medios e interacciones
• Funcionalidad de seguir/no seguir
• Estadísticas de perfil (seguidores, siguiendo, posts)

📝 Gestión de Posts

• Compositor de posts rico con controles de privacidad
• Subida de medios e imágenes con previsualización y edición de texto alternativo
• Selector de emojis con emojis comunes y inserción en posición del cursor
• Soporte para advertencias de contenido y archivos adjuntos
• Visualización completa de posts con interacciones (like, boost, reply, share)
• Conversaciones anidadas y cadenas de respuestas

🔔 Notificaciones

• Sistema de notificaciones en tiempo real
• Notificaciones categorizadas (likes, boosts, follows, menciones)
• Indicadores visuales para notificaciones no leídas

🔍 Búsqueda

• Búsqueda universal a través de cuentas, hashtags y posts
• Resultados de búsqueda con pestañas para filtrado fácil
• Sugerencias de búsqueda en tiempo real

🔐 Autenticación OAuth2

• Sistema de autenticación OAuth2 completamente funcional
• Registro automático de aplicación en instancias GoToSocial
• Intercambio seguro de códigos de autorización por tokens
• Gestión automática de refresh de tokens
• Sesiones persistentes con almacenamiento local
• Configuración de URL de instancia

Tech Stack

• React 19 - Modern React with latest features
• React Router DOM - Client-side routing
• Styled Components - CSS-in-JS for component styling
• Axios - HTTP client for API requests
• React Icons - Beautiful icon library

Getting Started

Prerequisites

• Node.js 16 or higher
• npm or yarn

Installation

1. Install dependencies:

   npm install
   

2. Start the development server:

   npm start
   

3. Open http://localhost:3000 in your browser

Autenticación OAuth2

El frontend utiliza OAuth2 para autenticación segura:

1. Ingresa la URL de tu instancia GoToSocial o Mastodon
2. Haz clic en "Conectar con OAuth"
3. Serás redirigido a la página de autorización de tu instancia
4. Autoriza la aplicación
5. Serás redirigido de vuelta e iniciarás sesión automáticamente

Funcionalidades de Medios y Emojis

• Subida de Imágenes: Selecciona hasta 4 imágenes con límite de 10MB por archivo
• Previsualización de Medios: Vista previa de imágenes antes de publicar
• Texto Alternativo: Edita el texto alternativo para accesibilidad
• Selector de Emojis: Más de 100 emojis comunes organizados para fácil selección
• Inserción Inteligente: Los emojis se insertan en la posición exacta del cursor

Configuration

Environment Variables

Create a .env file in the root directory:

REACT_APP_API_BASE_URL=https://your-gotosocial-instance.com

Production Deployment

For production deployment:

1. Build the application: npm run build
2. Serve the built files from a web server
3. Ensure your web server is configured for client-side routing
4. Configure HTTPS for OAuth security
5. Update OAuth redirect URIs in your GoToSocial instance if needed

Project Structure

src/
├── components/          # Reusable UI components
│   ├── Layout/         # Layout components (Header, Layout)
│   ├── Compose/        # Post composition components
│   └── Post/           # Post display components
├── pages/              # Page components
│   ├── HomePage.js     # Home timeline
│   ├── LoginPage.js    # Authentication
│   ├── ProfilePage.js  # User profiles
│   ├── SearchPage.js   # Search functionality
│   └── ...
├── services/           # API and external services
│   └── api.js          # GoToSocial API client
└── App.js             # Main application component

API Integration

The project includes a comprehensive API client (src/services/api.js) that implements:

• Authentication endpoints
• Timeline endpoints (home, public, local, tag)
• Status endpoints (create, delete, favorite, reblog)
• Account endpoints (profile, follow, search)
• Notification endpoints
• Search endpoints

Responsive Design

The frontend is fully responsive with breakpoints for:

• Desktop: Full three-column layout with sidebars
• Tablet: Simplified layout with hidden sidebars
• Mobile: Single-column layout optimized for touch

Screenshots

The frontend features:

• Modern gradient design with purple/blue color scheme
• Card-based layout for posts and profiles
• Intuitive navigation with clear iconography
• Responsive design that adapts to all screen sizes
• Professional typography and spacing

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify