167
README.md
167
README.md
@@ -1,43 +1,164 @@
|
||||
# Getting Started with Create React App
|
||||
# GoToSocial React Frontend
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
Un frontend moderno y responsivo en React para GoToSocial - un servidor de red social ActivityPub rápido, divertido y pequeño.
|
||||
|
||||
## Available Scripts
|
||||
## ✨ Características
|
||||
|
||||
In the project directory, you can run:
|
||||
### 🎨 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
|
||||
|
||||
### `npm start`
|
||||
### 🏠 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
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
### 👤 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)
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
### 📝 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
|
||||
|
||||
### `npm test`
|
||||
### 🔔 Notificaciones
|
||||
- Sistema de notificaciones en tiempo real
|
||||
- Notificaciones categorizadas (likes, boosts, follows, menciones)
|
||||
- Indicadores visuales para notificaciones no leídas
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
### 🔍 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
|
||||
|
||||
### `npm run build`
|
||||
### 🔐 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
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
## Tech Stack
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
- **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
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
## Getting Started
|
||||
|
||||
### `npm run eject`
|
||||
### Prerequisites
|
||||
- Node.js 16 or higher
|
||||
- npm or yarn
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
### Installation
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
1. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
2. Start the development server:
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
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
|
||||
|
||||
|
||||
Referencia en una nueva incidencia
Block a user