https://github.com/addreeh/json-color-aph
🎨 JSON Color APH - Visualiza y explora paletas de colores definidas en JSON con Next.js, React, TypeScript y Tailwind CSS. Ideal para diseñadores y desarrolladores.
https://github.com/addreeh/json-color-aph
color color-picker json nextjs palette react tailwindcss typescript viewer
Last synced: 4 months ago
JSON representation
🎨 JSON Color APH - Visualiza y explora paletas de colores definidas en JSON con Next.js, React, TypeScript y Tailwind CSS. Ideal para diseñadores y desarrolladores.
- Host: GitHub
- URL: https://github.com/addreeh/json-color-aph
- Owner: addreeh
- Created: 2025-02-22T10:52:25.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-22T11:02:33.000Z (4 months ago)
- Last Synced: 2025-02-22T12:18:26.243Z (4 months ago)
- Topics: color, color-picker, json, nextjs, palette, react, tailwindcss, typescript, viewer
- Language: TypeScript
- Homepage: https://json-color-aph.vercel.app/
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 JSON Color APH
JSON Color APH es una aplicación web desarrollada con **Next.js**, **React**, **TypeScript** y **Tailwind CSS** que te permite visualizar y explorar paletas de colores definidas en un archivo JSON.
Esta herramienta está diseñada para facilitar la inspección y comparación de colores, ideal para diseñadores y desarrolladores que trabajan con sistemas de color o desean probar combinaciones de paletas de manera rápida e interactiva. 🚀
## ✨ Características
- 🎨 **Visualización de colores**: Muestra en forma de grid los colores definidos en un archivo JSON.
- 🔍 **Interfaz interactiva**: Explora cada color y observa detalles como su valor hexadecimal o RGB.
- ⚡ **Desarrollo moderno**: Construida con Next.js y Tailwind CSS para un rendimiento óptimo y diseño responsivo.
- 🛡️ **Uso de TypeScript**: Mejora la mantenibilidad y robustez del código.
- 🎨 **Estilo personalizable**: Gracias a Tailwind CSS, adapta fácilmente el diseño visual según tus necesidades.
## 💻 Instalación
1. 🔧 **Clona el repositorio**
```bash
git clone https://github.com/addreeh/json-color-aph.git
cd json-color-aph
2. 📦 Instala las dependencias
Con npm:
```bash
npm install
```
O con yarn:
```bash
yarn install
```
## ▶️ Uso
Para iniciar el servidor de desarrollo, ejecuta:
```bash
npm run dev
```
o, si usas yarn:
```bash
yarn dev
```
Luego, abre http://localhost:3000 en tu navegador para ver la aplicación en acción.
## 🗂️ Estructura del proyecto
- 📁 app/ – Configuración principal de Next.js.
- 📁 components/ – Componentes React reutilizables (por ejemplo, el grid de colores y el visor individual).
- 📁 hooks/ – Hooks personalizados para gestionar el estado o interactuar con los datos.
- 📁 lib/ – Funciones y utilidades generales.
- 📁 public/ – Archivos estáticos como imágenes, fuentes o el JSON con los colores.
- 📁 styles/ – Archivos de estilos (Tailwind CSS y otros).
## 🛠️ Tecnologías utilizadas
- 🔥 Next.js – Framework para React con renderizado del lado del servidor y generación de sitios estáticos.
- ⚛️ React – Biblioteca para construir interfaces de usuario.
- 📝 TypeScript – Superset de JavaScript que añade tipado estático.
- 💅 Tailwind CSS – Framework de utilidades para estilos rápidos y personalizables.
## 🤝 Contribuciones
¡Las contribuciones son bienvenidas! Si deseas mejorar o extender la funcionalidad del proyecto:
- 🍴 Haz un fork del repositorio.
- 🌿 Crea una rama para tu nueva funcionalidad:
```bash
git checkout -b feature/nueva-funcionalidad
```
- 💾 Realiza tus cambios y haz commit.
- 🚀 Envía un Pull Request para revisión.