An application for recording daily emotions and visualizing them through an interactive chart. Built with SvelteKit, TypeScript, SCSS, and PostgreSQL, following Domain-Driven Design (DDD) principles.
- Node.js
- Docker and Docker Compose
- npm
Install project dependencies:
npm installThe application uses PostgreSQL through Docker. Start the database container:
npm run db:startThis command runs docker-compose up which starts a PostgreSQL container on port 5432.
The project includes Storybook for component documentation and development. To start Storybook:
npm run storybookThis will launch Storybook on port 6006 (http://localhost:6006).
The project uses SCSS for styling with a design token system:
src/lib/styles/
├── tokens/ # Design tokens (colors, typography, spacing, etc.)
├── components/ # Component-specific styles
└── main.scss # Main entry point for all styles
- The project currently shows deprecation warnings related to Sass
@importrules. These are scheduled to be removed in Dart Sass 3.0.0. - A future task will be to migrate all imports to the
@usesyntax according to the Sass migration guide.
The application includes a structured component library organized as follows:
src/lib/components/
├── emotions/ # Emotion-specific components
│ ├── EmotionCalendar.svelte
│ ├── EmotionChart.svelte
│ └── EmotionPicker.svelte
├── ui/ # UI components
│ └── DecorativeElements.svelte
└── layout/ # Layout components
Each component has corresponding Storybook stories to document usage and variations.
Para aplicar cambios al esquema de la base de datos:
# Sincronizar esquema con la base de datos
npm run db:push
# Generar migraciones
npm run db:migrate
# Iniciar el panel de gestión de la base de datos
npm run db:studioInicia el servidor de desarrollo:
npm run dev
# O inicia el servidor y abre la app en una nueva pestaña del navegador
npm run dev -- --openEjecuta los tests unitarios con Vitest:
npm run test:unitEjecuta los tests end-to-end con Playwright:
# Ejecutar todos los tests E2E
npm run test:e2e
# Ejecutar en modo UI para desarrollo
npx playwright test --ui
# Ejecutar tests específicos
npx playwright test src/routes/emotions/emotions.test.tsThe application implements a solution for handling SvelteKit hydration issues in Playwright tests. This approach prevents tests from interacting with elements before they are fully hydrated.
How it works:
-
In
src/routes/+layout.svelte, the app adds a CSS class to thebodyelement after hydration:onMount(() => { document.body.classList.add('hydrated'); });
-
Each Playwright test waits for this class before interacting with the page:
await page.waitForSelector('body.hydrated', { state: 'attached', timeout: 5000 });
Best practices for e2e tests:
- Always wait for hydration before interacting with elements
- Use
.first()when multiple elements match a selector to avoid strict mode violations - Prefer indexed selectors (e.g.,
.nth(1)) over text-matching selectors for better reliability - Add appropriate timeouts for complex UIs
Ejecuta todos los tests (unitarios y E2E):
npm run testGenera una versión de producción de la aplicación:
npm run buildPrevisualiza la versión de producción:
npm run previewnpm run format: Formatea el código usando Prettiernpm run lint: Ejecuta el linter (Prettier + ESLint)npm run check: Verifica la sincronización de SvelteKit y comprueba los tipos TypeScript
src/
├── lib/
│ ├── components/ # Componentes reutilizables
│ ├── server/
│ │ └── db/ # Configuración y esquema de la base de datos
│ ├── stores/ # Almacenes globales (estado)
│ └── types.ts # Definiciones de tipos
├── routes/
│ ├── emotions/ # Feature "Emociones"
│ └── history/ # Feature "Historial"
└── tests/ # Tests E2E y BDD