Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johantap/next-client
https://github.com/johantap/next-client
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/johantap/next-client
- Owner: JohanTAP
- Created: 2024-11-04T21:05:14.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2024-11-04T21:23:20.000Z (about 2 months ago)
- Last Synced: 2024-11-04T22:26:30.136Z (about 2 months ago)
- Language: TypeScript
- Size: 357 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tu Imagen RX - Sistema RIS (Frontend)
Este es el repositorio del frontend del sistema RIS de **Tu Imagen RX**, una institución privada especializada en radiografía dental y maxilofacial. Este proyecto tiene como objetivo proporcionar una interfaz intuitiva y funcional para gestionar el flujo de trabajo de un sistema de información radiológica (RIS), desde la autenticación hasta la administración de usuarios y estudios.
## Tabla de Contenidos
- [Características](#características)
- [Tecnologías](#tecnologías)
- [Estructura del Proyecto](#estructura-del-proyecto)
- [Instalación](#instalación)
- [Uso](#uso)
- [Variables de Entorno](#variables-de-entorno)## Características
- **Autenticación**: Manejo del inicio de sesión con almacenamiento seguro del token.
- **Interfaz Adaptativa**: El diseño es responsive y adaptativo, optimizado para pantallas de distintos tamaños.
- **Componentes Reutilizables**: La UI se construye con componentes modulares y reutilizables para mejorar la escalabilidad.
- **Gestión de Contexto**: Utiliza Context API para manejar el estado global de autenticación en toda la aplicación.## Tecnologías
Este proyecto utiliza las siguientes tecnologías:
- **React**: Librería principal para construir la UI.
- **Next.js**: Framework de React con soporte para SSR y funcionalidades avanzadas.
- **TypeScript**: Superset de JavaScript que añade tipado estático.
- **Tailwind CSS**: Framework de utilidades para estilizar el frontend de forma rápida y eficiente.
- **Radix UI**: Componentes accesibles para mejorar la usabilidad.
- **ESLint & Prettier**: Herramientas para asegurar la calidad y consistencia del código.## Estructura del Proyecto
```bash
src/
├── public/ # Archivos públicos.
├── app/ # Páginas principales de la aplicación
│ ├── dashboard/ # Página de dashboard protegida
│ └── page.tsx # Página principal - inicio de sesión
├── components/ # Componentes de la interfaz de usuario (UI)
│ ├── ui/ # Componentes reutilizables como Input, Button, etc.
│ └── layout/ # Componentes de layout, como headers y footers
├── context/ # Contextos de React para manejo de estados globales
│ └── AuthContext.tsx # Contexto de autenticación
├── hooks/ # Hooks personalizados para lógica y manejo de estado
│ └── useLogin.ts # Hook personalizado para el manejo de inicio de sesión
├── services/ # Servicios para llamadas a la API y lógica de negocio
│ └── authService.ts # Lógica de autenticación para interactuar con la API
├── styles/ # Estilos globales y configuración de Tailwind CSS
│ └── globals.css # Estilos globales del proyecto
└── utils/ # Utilidades y funciones auxiliares
```## Instalación
Sigue los pasos a continuación para configurar el proyecto en tu entorno local.Prerrequisitos
Node.js y pnpm deben estar instalados en tu sistema.Clonar el Repositorio
Primero, clona el repositorio en tu máquina local:```bash
git clone https://github.com/JohanTAP/next-client.git
cd next-client
```Instalación de Dependencias
Usa pnpm para instalar las dependencias:```bash
pnpm install
```Configuración de Variables de Entorno
Crea un archivo .env.local en la raíz del proyecto con las siguientes variables:```bash
NEXT_PUBLIC_API_URL=
```## Uso
Para iniciar el proyecto en modo de desarrollo:```bash
pnpm dev
```
El proyecto estará disponible en http://localhost:3000.Comandos Disponibles
- **pnpm dev:** Inicia el servidor de desarrollo en http://localhost:3000.
- **pnpm build:** Compila el proyecto para producción en la carpeta .next.
- **pnpm start:** Inicia el servidor en modo producción, sirviendo los archivos compilados.
- **pnpm lint:** Ejecuta ESLint para analizar el código en busca de errores y aplicar reglas de estilo.
- **pnpm format:** Formatea el código de acuerdo con las reglas de Prettier.## Variables de Entorno
Las siguientes variables de entorno son necesarias para que el proyecto funcione correctamente:NEXT_PUBLIC_API_URL: La URL base de la API, utilizada para la autenticación y demás operaciones. Asegúrate de configurarla correctamente en tu archivo .env.local.