Este proyecto representa la página principal de mi Trabajo de Fin de Ciclo desarrollado con React y Tailwind CSS. La iniciativa surge como parte de los requisitos establecidos por mi profesor de interfaces, quien asignó la tarea de crear el frontend de la página principal para el proyecto de fin de curso.
➡️ Demo desplegada en GitHub Pages: Haz click aquí
La guía de estilos completa del proyecto la puedes encontrar aquí.
El diseño visual de la página principal se ha elaborado utilizando Figma. Puedes acceder al mockup y explorar la representación visual del proyecto aquí.
- Gestión de cookies: Se incluye un banner para aceptar o rechazar cookies, con funcionalidad para crear cookies según las preferencias del usuario.
- Función de determinación de estación: Basado en la fecha actual, se muestra información relevante sobre la estación del año.
- Estilo collage-bento: La estética de la tienda sigue un estilo collage-bento, lo que la hace visualmente atractiva y única.
- Estética cuidada: Se han seleccionado colores y tipografías específicas, descritas en el archivo de configuración de Tailwind CSS, para crear una experiencia estética coherente.
- Barra de navegación: Permite realizar búsquedas, registrarse o acceder al inicio de sesión de manera intuitiva.
- Footer completo: Incluye un footer con información de copyright, enlaces importantes y una opción de inscripción a una newsletter.
- Uso de enlaces especiales "mailto:" y "tel:": Se utilizan en el footer enlaces mailto: para direcciones de correo electrónico y enlaces tel: para números de teléfono, facilitando la comunicación directa con los usuarios.
- Diseño responsive: La tienda se adapta a diferentes dispositivos y tamaños de pantalla.
- SEO mejorado: Se utilizan etiquetas de meta y enlaces adecuados para mejorar el SEO y la visibilidad en los motores de búsqueda.
- Adaptado para Open Graph, Apple Web App Meta y Twitter Cards: Se han implementado etiquetas adecuadas para una mejor visualización y compatibilidad en plataformas como Facebook, Twitter y dispositivos de Apple.
- Accesibilidad: La tienda ha sido evaluada con la herramienta WAVE para garantizar la accesibilidad sin errores.
- Optimización del rendimiento: Se han optimizado las métricas clave de rendimiento, como Largest Contentful Paint, Cumulative Layout Shift, First Contentful Paint, Time to First Byte y First Input Delay, asegurando una experiencia de usuario fluida.
- Favicons adaptados: Se proporcionan favicons optimizados para diferentes dispositivos y navegadores.
- Iconos de FontAwesome: Se utilizan iconos de FontAwesome para mejorar la usabilidad y la estética de la interfaz.
- Integración de Google Fonts: Se integra la API de Google Fonts para garantizar una amplia variedad de tipografías disponibles para la personalización.
- Automatización de tareas del desarrollo: Se utiliza tasks.json de Visual Studio Code para la automatización de tareas de desarrollo, lo que facilita el proceso de desarrollo y mantenimiento del proyecto.
- Despliegue en GitHub Pages: La aplicación está desplegada en GitHub Pages para una fácil accesibilidad y visualización en línea.
- React: El proyecto está construido con React, una biblioteca de JavaScript que facilita la creación de interfaces de usuario interactivas.
- Tailwind CSS: Se ha empleado Tailwind CSS como framework de estilos para agilizar y simplificar el desarrollo de la interfaz.
La estructura del proyecto sigue las mejores prácticas de organización de un proyecto React, dividiéndolo en componentes reutilizables y contenedores lógicos. Aquí hay un vistazo rápido a la estructura de carpetas:
- /public
- /src
- App.jsx
- index.css
- main.jsx
Esta estructura es bastante estándar para proyectos React con Vite y Tailwind CSS. La carpeta public contiene archivos estáticos. La carpeta src contiene el código fuente de la aplicación, con subcarpetas para componentes y estilos. Los archivos de configuración y otros archivos principales están en la raíz del proyecto.
- Clona este repositorio en tu máquina local:
git clone https://github.com/CrisCorreaS/TomaTe-homepage.git - Instala las dependencias:
cd TomaTe-homepagenpm install - Ejecuta la aplicación:
npm start
Esto iniciará la aplicación en modo de desarrollo y podrás verla en tu navegador predeterminado.
Este proyecto tiene como objetivo principal facilitar mi aprendizaje en tecnologías clave para el desarrollo web.
Tip
A la hora de desarrollar el proyecto, te pueden venir bien los siguientes recursos:
- Para empezar:
- Para desplegar en GitHub Pages:
- VSCode
- HTML:
- Validador HTML W3C
- seotoolseye.com -> Proporciona una variedad de herramientas gratuitas para ayudar a mejorar el rendimiento de un sitio web
- opengraph.xyz -> Nos permite previsualizar y generar etiquetas Open Graph
- Herramienta para revisar etiquetas de Open Graph
- Herramienta para revisar etiquetas de Twitter (X) Cards
- Generador de flavicons
- TailwindCSS:
- JavaScript:
- React:
- Google Fonts:
- Font Awesome:
- Cursos y Recursos:
- Tutorial de Cómo Aprender TailWinds
- Tutorial de cómo hacer una web con React + Vite + TailWindCSS
- frontendchecklist.io -> Nos ayuda a verificar una lista de 92 comprobaciones de todos los elementos que debe tener un Front-End para que esté completo y optimizado.
- Tutorial de React de MiduLive
- Herramientas:
- frontendchecklist.io -> Nos ayuda a verificar una lista de 92 comprobaciones, organizadas por prioridad y categoría, de todos los elementos que debe tener un Front-End para que esté completo y optimizado. Estas comprobaciones están divididas por temas, como el head, el SEO, CSS, accesibilidad... Es muy útil porque permite asegurar que no se pasa nada por alto en el desarrollo de un sitio web
- Generador de flavicons -> Nos permite generar favicons de alta calidad, adaptados a diferentes plataformas y navegadores, para nuestro sitio web. Podemos enviar una imagen de nuestro logo y nos crea los flavicons
- caninclude.glitch.me -> Nos ayuda a comprobar si una etiqueta HTML puede incluirse dentro de otra. Para ello, debemos introducir la etiqueta padre y la etiqueta hijo y la web mostrará un mensaje indicando si la inclusión es válida o no
- Colecciones, Librerías y Plantillas de Componentes de TailwindCss:
Note
Al intentar desplegar el proyecto en GitHub Pages tuve varios errores y problemas, así que aquí voy a traer una guía paso a paso muy simple de cómo hacer el deploy de una aplicación de React con Vite. Ten en cuenta de que yo parto desde la perspectiva de que ya hemos acabado el proyecto, está en el repositorio y solo nos falta desplegarlo:
- 1- Instalamos gh-pages como una dependencia de desarrollo del proyecto con el comando
npm install --save-dev gh-pages - 2- En el archivo package.json añadimos la línea
"name": "nombre-proyecto"al principio del cuerpo principal (en este caso sería"name": "tomate-homepage") y en "scripts" añadimos"predeploy": "npm run build", "deploy": "gh-pages -d dist". Puedes ver el archivo en el el repositorio. - 3- En el archivo vite.config.js dentro del "export default defineConfig({...})" tenemos que añadir la línea
base: "/nombre-repositorio/", en mi casobase: "/TomaTe-homepage/" - 4- Hacemos un git add, git commit y git push de todos los cambios.
- 5- Ejecutamos el comando
npm run deployy ya habríamos desplegado nuestra página en GitHub Pages, lo cual podemos comprobar llendo al apartado de "Actions" Si hacemos cambios y queremos desplegar de nuevo, si ya hemos hecho los cinco pasos anteriores, ahora solo nos queda volver a guardar todos los cambios y ejecutarnpm run deploy
Este proyecto está licenciado bajo MIT License.