SkDev — Frontend (React)

Proyecto frontend desarrollado con Create React App. Esta carpeta contiene la aplicación React principal y la navegación multi-página ya implementada mediante React Router.

Estado actual

• Aplicación creada con Create React App.
• Navegación con react-router-dom (React Router v7).
• Páginas implementadas: Home, Login, Signup, Pricing & Contact.
• Componentes principales: Navbar, Hero, FeatureCard, Footer y CustomButton.
• CustomButton se implementó como un componente reutilizable de Material UI con soporte para temas de color y colores hexadecimales personalizados.
• Assets estáticos en public/ y src/assets/.
• Pruebas básicas configuradas con @testing-library.

Tecnologías

• React 19
• react-router-dom
• @mui/material
• react-icons
• @testing-library/react
• Create React App

Estructura relevante

• public/: index.html, manifest.json & robots.txt
• src/: index.js, App.js, App.css, index.css & reportWebVitals.js
• src/components/: navbar.jsx, hero.jsx, featureCard.jsx, footer.jsx & customButton.jsx
• src/pages/: home.jsx, login.jsx, signup.jsx, pricing.jsx & contact.jsx
• src/assets/: recursos estáticos (imágenes, fuentes, etc.)

Rutas disponibles

• / → Home
• /login → Login
• /signup → Signup
• /pricing → Pricing
• /contact → Contact

Instalación y ejecución (desarrollo)

1. Abrir terminal en la carpeta skdev:

npm install
npm start

2. Abrir en el navegador:

http://localhost:3000

Scripts disponibles

• npm start — servidor de desarrollo
• npm test — ejecuta pruebas
• npm run build — build de producción
• npm run eject — expone la configuración (operación irreversible)

Tests

• Tests unitarios básicos en App.test.js usando @testing-library.

Notas / Consideraciones

• El Navbar usa useNavigate y useLocation para controlar navegación y ocultar la barra en páginas de auth.
• La aplicación ya tiene navegación SPA con rutas para login, registro, pricing y contacto.

Próximos pasos a seguir

• Agregar validación y manejo de estado en Login y Signup.
• Integrar APIs o backend para autenticación y datos de pricing.
• Mejorar diseño responsivo y animaciones.

---