Loading repository data…
Loading repository data…
BCoder-X / repository
**BikeStore - SENA Project 2025** es un e-commerce moderno enfocado en la venta de bicicletas, accesorios y repuestos. Desarrollado con **React, TypeScript y Vite**, cuenta con carrito dinámico, panel lateral, autenticación y diseño responsive. Su estilo combina tonos rojos y negros para una experiencia visual atractiva.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Bike Store es un proyecto completo de e-commerce moderno, desarrollado como parte del Proyecto Formativo SENA (2025).
Combina un frontend profesional y dinámico con un backend estructurado y documentado, enfocado en ofrecer una experiencia de usuario fluida, atractiva y funcional.
| Rol | Nombre | Responsabilidades principales |
|---|---|---|
| 🎨 Diseño, Frontend & Backend Developer | Bryan David López Campos (BCoder-X) | Diseño UI/UX, maquetado completo, desarrollo de la lógica, implementación funcional del frontend y backend, conexión con MySQL y optimización general del sistema. |
| ⚙️ Documentación técnica | Mario | Apoyo en la documentación y organización técnica del proyecto. |
| 🧾 Soporte y documentación general | Jhonathan | Documentación complementaria, apoyo a la documentacion. |
💡 Nota: El diseño, codificación e implementación completa del frontend y backend fueron realizados íntegramente por Bryan David López Campos (BCoder-X).
Bike Store es una plataforma web para la venta de bicicletas, accesorios y repuestos, con enfoque en rendimiento, modularidad y estética moderna.
Aplica buenas prácticas de desarrollo web tanto en frontend como backend, asegurando escalabilidad, accesibilidad y una arquitectura limpia.
:root {
--color-primary: #ffffff; /* Blanco - fondo principal limpio */
--color-secondary: #e50914; /* Rojo moderno - acentos y botones */
--color-dark: #121212; /* Negro profundo - texto y contraste */
--color-gray-dark: #2b2b2b; /* Gris oscuro - fondos secundarios */
--color-gray-light: #e6e6e6; /* Gris claro - bordes y fondos suaves */
--color-success: #27ae60; /* Verde éxito - mensajes o confirmaciones */
--color-error: #ff3b30; /* Rojo error - alertas y validaciones */
}
| Variable | Uso principal | Descripción |
|---|
--color-primary | Fondo general | Limpieza, modernidad |
--color-secondary | Botones, acentos | Rojo vibrante y atractivo |
--color-dark | Texto principal | Contraste ideal y profesional |
--color-gray-dark | Header/Footer | Apariencia elegante y sólida |
--color-gray-light | Fondos secundarios | Equilibrio visual |
--color-success | Éxito | Verde fresco, moderno |
--color-error | Alertas | Rojo claro, fácil lectura |
| Herramienta | Versión recomendada | Descripción |
|---|---|---|
| Node.js | ≥ 18.x | Entorno de ejecución para JavaScript |
| npm | ≥ 9.x | Gestor de dependencias |
| Git | ≥ 2.x | Control de versiones |
git clone https://github.com/BCoder-X/BCoder-X.BikeStore-SenaProject2025.git
cd BCoder-X-bike-store-senaproject2025
cd frontend
npm install
Si necesitas instalarlas manualmente, ejecuta:
npm install react-router-dom
npm install lucide-react
npm install react-icons
npm install framer-motion
npm install sweetalert2
...
| Librería | Uso principal |
|---|---|
| React Router DOM | Sistema de rutas y navegación |
| Lucide React | Iconografía moderna |
| React Icons | Íconos extendidos |
| Framer Motion | Animaciones fluidas |
| TypeScript | Tipado seguro |
| Vite | Entorno de desarrollo rápido |
npm run dev
Luego abre en tu navegador:
👉 http://localhost:5173
🖥️ Frontend y Backend: Desarrollado, codificado y documentado por Bryan David López Campos (BCoder-X).
Incluye diseño en Figma, estructura visual y lógica React.
⚙️ Documentacion: Documentado por Mario
🧾 Documentación técnica y soporte: Jhonathan, encargado de la documentación general.
Bike Store - SENA Project 2025
Desarrollado por el equipo de formación SENA — ADSO
📅 Año: 2025
📍 Proyecto educativo con fines de aprendizaje y demostración profesional.
⭐ Si este proyecto te gusta, apóyalo con una estrella en GitHub. ¡Gracias por visitar Bike Store!
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
The React Compiler is currently not compatible with SWC. See this issue for tracking the progress.
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(["dist"]),
{
files: ["**/*.{ts,tsx}"],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
]);
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";
export default defineConfig([
globalIgnores(["dist"]),
{
files: ["**/*.{ts,tsx}"],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs["recommended-typescript"],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
]);