192 líneas
6.8 KiB
Markdown
192 líneas
6.8 KiB
Markdown
# 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)
|