Para este proyecto nos hemos centrado en el diseño y desarrollo de una página web de una empresa agencia de marketing cuyo foco de actividad son varias como la realización de spots televisivos, videoclips de grupos musicales, campañas publicitarias y un largo devenir de futuros proyectos.
- Figma: Para el diseño inicial, así como definición de variables que usaremos posteriormente en nuestro código.
- Vite: Como herramienta de desarrollo para crear un entorno rápido y eficiente.
- React: Para la construcción de la interfaz de usuario basada en componentes reutilizables.
- TypeScript: Para agregar tipado estático y mejorar la mantenibilidad del código.
- Tailwind CSS: Para el diseño y estilización con clases utilitarias, permitiendo una maquetación rápida y responsiva.
Básicamente lo único que vamos a necesitar es tener instalado Node.js en nuestro sistema.
-
Clona el repositorio Abre una terminal y ejecuta el siguiente comando: git clone https://github.com/oligarc/HIVE-MIND.git Entra con cd HIVE-MIND
-
Instalar dependencias Una vez dentro del proyecto ejecuta: npm install Este comando instalará todas las dependencias que encontramos en nuestro package.json
-
Iniciar el servidor de desarrollo Para arrancar la aplicación en modo desarrollo ejecuta: npm run dev Esto iniciará el servidor de desarrollo de Vite, y podrás acceder a la aplicación en tu navegador en la dirección que se indique en la terminal
A continuación, os dejamos una primera vista de nuestros componentes antes de que clonéis el repositorio o bajéis el código.
Nótese que Whakoom.com no es nuestro proyecto y simplemente lo hemos puesto para referenciar mejor el componente.
Wafae:
- Sistema de diseño en Figma.
- Elección de fuentes y paleta de colores.
Óliver:
- Diseño de componentes.
- Exportación de estilos a Tailwind CSS.
- Implementación de componentes en React.
- Organización y estructuración del código.
- Readme.
Para visitar nuestro sistema de diseño utilizado en la aplicación Figma, puedes hacerlo presionando en el siguiente enlace
Por favor, sentíos libres a la hora de comentar y darnos feedback. Será de mucha ayuda