Skip to content

Commit 927b666

Browse files
jhonattanjhonattan
committed
docs(readme): se documenta el proyecto en el archivo README.md.
1 parent a659dad commit 927b666

File tree

1 file changed

+252
-38
lines changed

1 file changed

+252
-38
lines changed

‎README.md‎

Lines changed: 252 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,264 @@
1-
# React + TypeScript + Vite
1+
# 🛒 Full Stock Frontend
22

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3+
> Tienda online especilizada en productos como polos, tazas y stickers con tematica para desarrolladores, incluye chatbot AI integrado.
44
5-
Currently, two official plugins are available:
5+
### ✨ Características principales
66

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7+
- 🛍️ **Catálogo de productos** con variantes (tallas, tamaños) y precios dinámicos
8+
- 🤖 **Chatbot AI** que conoce inventario, precios y puede recomendar productos
9+
- 🛒 **Carrito de compras** persistente con gestión de sesiones
10+
- 📱 **Diseño responsive** optimizado para móviles y desktop
11+
- ⚡ **Server-Side Rendering** con React Router v7
12+
- 🔍 **Filtros avanzados** por categoría, precio y variantes
13+
- 💳 **Gestión de precios** con modificadores por variante
914

10-
## Expanding the ESLint configuration
15+
## 🛠️ Stack Tecnológico
1116

12-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
17+
### **Frontend**
1318

14-
- Configure the top-level `parserOptions` property like this:
19+
- **Framework**: React 19.1 con TypeScript
20+
- **Routing**: React Router v7 (con SSR)
21+
- **Styling**: Tailwind CSS + shadcn/ui
22+
- **Build Tool**: Vite 6.0.1
23+
- **State**: React useState/useEffect + URL state
24+
25+
### **Backend**
26+
27+
- **Runtime**: Node.js (integrado con React Router)
28+
- **Database**: PostgreSQL con Prisma ORM
29+
- **AI**: Google Gemini AI para chatbot
30+
- **Session**: Cookie-based sessions
31+
32+
### **Dev Tools**
33+
34+
- **Testing**: Vitest + React Testing Library
35+
- **Linting**: ESLint + TypeScript ESLint
36+
- **Formatting**: Prettier
37+
- **Git Hooks**: Husky + lint-staged
38+
39+
## 🚀 Instalación
40+
41+
### **Prerrequisitos**
42+
43+
- Node.js 18+
44+
- npm/yarn/pnpm
45+
- PostgreSQL database
46+
- Google AI API Key
47+
48+
### **1. Clonar repositorio**
49+
50+
```bash
51+
git clone [email protected]:codeableorg/fullstock-frontend.git
52+
cd fullstock-frontend
53+
```
54+
55+
### **2. Instalar dependencias**
56+
57+
```bash
58+
npm install
59+
# o
60+
yarn install
61+
# o
62+
pnpm install
63+
```
64+
65+
### **3. Configurar variables de entorno**
66+
67+
```bash
68+
# Crear archivo .env
69+
cp .env.example .env
70+
```
71+
72+
Completar con tus valores:
73+
74+
```env
75+
# Database
76+
DATABASE_URL="postgresql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME}?schema=public"
77+
78+
# Google AI
79+
GOOGLE_API_KEY="tu_google_ai_api_key"
80+
```
81+
82+
### **4. Configurar base de datos**
83+
84+
```bash
85+
# Generar cliente Prisma
86+
npx prisma generate
87+
88+
# Ejecutar migraciones
89+
npx prisma migrate dev
90+
91+
# (Opcional) Seed con datos de ejemplo
92+
npx prisma db seed
93+
```
94+
95+
### **5. Ejecutar en desarrollo**
96+
97+
```bash
98+
npm run dev
99+
# o
100+
yarn dev
101+
# o
102+
pnpm dev
103+
```
104+
105+
🎉 **¡Listo!** Abre [http://localhost:5173](http://localhost:5173)
106+
107+
## 📁 Estructura del Proyecto
108+
109+
```
110+
fullstock-frontend/
111+
├── 📁 prisma/ # Esquemas y migraciones de DB
112+
│ ├── schema.prisma # Modelo de datos
113+
│ └── migrations/ # Historial de migraciones
114+
├── 📁 src/
115+
│ ├── 📁 components/ # Componentes reutilizables
116+
│ │ ├── ui/ # Componentes base (shadcn/ui)
117+
│ │ └── layout/ # Layouts y navegación
118+
│ ├── 📁 routes/ # Páginas y rutas (React Router v7)
119+
│ │ ├── _index.tsx # Homepage
120+
│ │ ├── products/ # Páginas de productos
121+
│ │ ├── category/ # Páginas de categorías
122+
│ │ └── cart/ # Carrito de compras
123+
│ ├── 📁 services/ # Lógica de negocio
124+
│ │ ├── product.service.ts # Gestión de productos
125+
│ │ ├── cart.service.ts # Gestión de carrito
126+
│ │ └── chat.service.ts # Chatbot AI
127+
│ ├── 📁 models/ # Tipos TypeScript
128+
│ ├── 📁 lib/ # Utilidades
129+
│ └── 📁 db/ # Configuración de Prisma
130+
├── 📁 public/ # Assets estáticos
131+
├── 📄 package.json # Dependencias y scripts
132+
├── 📄 tailwind.config.js # Configuración de Tailwind
133+
├── 📄 vite.config.ts # Configuración de Vite
134+
└── 📄 README.md # Este archivo
135+
```
136+
137+
## 🎮 Scripts Disponibles
138+
139+
```bash
140+
# Desarrollo
141+
npm run dev # Servidor de desarrollo
142+
npm run build # Build para producción
143+
npm run start # Servidor de producción
144+
npm run preview # Preview del build
145+
146+
# Base de datos
147+
npm run db:generate # Generar cliente Prisma
148+
npm run db:migrate # Ejecutar migraciones
149+
npm run db:seed # Llenar con datos de ejemplo
150+
npm run db:studio # Abrir Prisma Studio
151+
152+
# Testing
153+
npm run test # Ejecutar tests
154+
npm run test:watch # Tests en modo watch
155+
npm run test:coverage # Coverage report
156+
157+
# Code Quality
158+
npm run lint # Ejecutar ESLint
159+
npm run lint:fix # Arreglar errores de lint
160+
npm run type-check # Verificar tipos TypeScript
161+
```
162+
163+
## 🔧 Configuración Adicional
164+
165+
### **Google AI Setup**
166+
167+
1. Ve a [Google AI Studio](https://aistudio.google.com/)
168+
2. Crea un nuevo proyecto
169+
3. Genera una API Key
170+
4. Agrégala a tu `.env` como `GOOGLE_API_KEY`
171+
172+
## 🤖 Chatbot Features
173+
174+
El chatbot AI tiene conocimiento completo de:
175+
176+
- **Inventario**: Productos disponibles, precios, variantes
177+
- **Categorías**: Polos, Stickers, Tazas, etc.
178+
- **Variantes**: Tallas (S, M, L), Tamaños (3×3, 5×5, 10×10 cm)
179+
- **Precios**: Precios base + modificadores por variante
180+
- **Carrito**: Productos que ya tiene el usuario
181+
182+
### Ejemplos de interacción:
15183

16-
```js
17-
export default tseslint.config({
18-
languageOptions: {
19-
// other options...
20-
parserOptions: {
21-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22-
tsconfigRootDir: import.meta.dirname,
23-
},
24-
},
25-
})
26184
```
185+
Usuario: "¿Tienen stickers de 10×10 cm?"
186+
Bot: "¡Sí! Tenemos Stickers JavaScript en 10×10 cm por S/8.00. ¿Te interesa?"
187+
188+
Usuario: "¿Qué tallas tienen en polos?"
189+
Bot: "Nuestros polos vienen en S (S/20.00), M (S/22.00) y L (S/23.00)."
190+
```
191+
192+
## 🧪 Testing
27193

28-
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29-
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
194+
```bash
195+
# Ejecutar todos los tests
196+
npm run test
31197

32-
```js
33-
// eslint.config.js
34-
import react from 'eslint-plugin-react'
198+
# Tests específicos
199+
npm run test src/services/chat.service.test.ts
200+
npm run test src/routes/product/
35201

36-
export default tseslint.config({
37-
// Set the react version
38-
settings: { react: { version: '18.3' } },
39-
plugins: {
40-
// Add the react plugin
41-
react,
42-
},
43-
rules: {
44-
// other rules...
45-
// Enable its recommended rules
46-
...react.configs.recommended.rules,
47-
...react.configs['jsx-runtime'].rules,
48-
},
49-
})
202+
# Coverage
203+
npm run test:coverage
50204
```
205+
206+
### **Estructura de tests**
207+
208+
- Unit tests para services
209+
- Integration tests para loaders
210+
- Component tests para UI
211+
- E2E tests con Playwright
212+
213+
## 🚀 Deployment
214+
215+
### **Docker**
216+
217+
```dockerfile
218+
# Dockerfile incluido en el proyecto
219+
docker build -t fullstock .
220+
docker run -p 3000:3000 fullstock
221+
```
222+
223+
## 🤝 Contribuir
224+
225+
1. **Fork** el repositorio
226+
2. **Crea** una branch: `git checkout -b feature/nueva-funcionalidad`
227+
3. **Commit** tus cambios: `git commit -m 'feat: add nueva funcionalidad'`
228+
4. **Push** a la branch: `git push origin feature/nueva-funcionalidad`
229+
5. **Abre** un Pull Request
230+
231+
### **Convenciones de commits**
232+
233+
Usamos [Conventional Commits](https://www.conventionalcommits.org/):
234+
235+
```bash
236+
feat(chat): add variant knowledge to system prompt
237+
fix(product): resolve price calculation for variants
238+
docs(readme): update installation instructions
239+
```
240+
241+
## 📝 Roadmap
242+
243+
- [ ] 🔐 Autenticación de usuarios
244+
- [ ] 💳 Integración con pasarelas de pago Culqi
245+
- [ ] 🌙 Modo oscuro
246+
247+
## 📄 Licencia
248+
249+
Este proyecto está bajo la licencia [MIT](./LICENSE).
250+
251+
## 👨‍💻 Autor
252+
253+
**Jota(Jhonattan Saldaña Camacho)**
254+
255+
- GitHub: [@tuusuario](https://github.com/jhonattan)
256+
- LinkedIn: [Tu LinkedIn](https://www.linkedin.com/in/jhonattansaldana/)
257+
- Email: [email protected]
258+
259+
## 🙏 Agradecimientos
260+
261+
- [shadcn/ui](https://ui.shadcn.com/) por los componentes base
262+
- [React Router](https://reactrouter.com/) por el framework fullstack
263+
- [Google AI](https://ai.google.com/) por la API de Gemini
264+
- [Vercel](https://vercel.com/) por el hosting gratuito

0 commit comments

Comments
 (0)