Covid Tracker 💊 🧫

Índice 📝

• Descripción
• Instalación
  • Requisitos previos
  • Instalación del proyecto
• Uso
• Estructura del proyecto
• Tecnologías
• Contribuición
  • Convenciones del proyecto
• Developers
• Capturas de pantalla

Descripción 💡

Proyecto de estudiantes para la creación de un tracker COVID-19, en el que se consume la API de disease.sh para extraer información de forma dinámica. Los objetivos principales del proyecto han sido aplicar conceptos fundamentales de React y del consumo de APIs.

Instalación 💾

Requisitos previos

Instalar Node.js: Descargar Node.js

Instalación del proyecto

1. Clonar el repositorio:

 git clone https://github.com/BSN-Asumiko/COVID-Tracker

2. Instalar dependencias:

 npm install

Uso ⌨️

Para visualizar el proyecto:

1. Ejecuta el servidor de desarrollo:

   npm run dev

2. Abre el local host en tu navegador para ver la aplicación.

Estructura del proyecto 📐

/
├── public
├── src
│   ├── components/
│   │   ├── homepage
│   │   ├── tracker
│   │   └── ui
│   ├── config
│   ├── hooks
│   ├── layout
│   ├── lib
│   ├── pages
│   ├── router
│   ├── services
│   ├── utils
│   ├── index.css
│   └── main.jsx
├── components.json
├── index.html
├── README.md
├── jsconfig.json
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── vite.config.js

• public/: Contiene los recursos estáticos del proyecto como imágenes, iconos y fuentes.
• src/: Contiene los archivos fuente de la aplicación.
  • components/: Contiene los componentes reutilizables de React.
    • homepage/: Contiene todos los componentes, separados por carpetas individuales, que forman la parte de homepage del proyecto.
    • tracker/: Contiene todos los componentes, separados por carpetas individuales, que forman la parte de tracker del proyecto.
    • ui/: Contiene los componentes importados de la librería shadcn.
  • config/: Contiene el arcihvo urls.js, que nos ayuda a dinamizar la llamada a la API.
  • layout: Carpeta que contiene las rutas de los dos layouts principales (homepage y tracker) de la aplicación.
  • pages: Carpeta que contiene las rutas a las páginas dinámicas de la aplicación.
  • router: Dentro del que se encuentra index.jsx, que contiene la lógica de rutas de la aplicación.
  • services: Dentro del que se encuentra useApi.jsx con la llamada a la API reutilizada en todos los apartados de la aplicación.

Tecnologías 🔬

• HTML5
• CSS3
• JavaScript
• React.js
• Vite
• TailwindCSS
• Shadcn // ui

Contribuición 💻

1. Haz fork al repositorio.
2. Crea una nueva rama: git checkout -b feature-name.
3. Haz tus cambios.
4. Haz push de tu rama: git push origin feature-name.
5. Haz un pull request.

Convenciones del proyecto

Uso de GitFlow.

Trabajamos desde y a la rama dev.

Estilos CSS con Tailwind CSS.

Usamos librería shadcn para ciertos componentes.

Nombramiento de las carpetas y documentos jsx:

 componentes
    soyUnComponente 📂
        SoyUnComponente.jsx

Developers 👩‍💻

• Jessica Arroyo
• Ekaterina Buinovskaia
• Betty Lopez
• Carla Sánchez
• Valentina Toni

Capturas de Pantalla 📸