# 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:
   ```bash
   npm install
   ```

2. Start the development server:
   ```bash
   npm start
   ```

3. Open [http://localhost:3000](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:

```env
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](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](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](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](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](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](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](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)