mitlist/fe
mohamad 5a2e80eeee feat: Enhance WebSocket connection handling and introduce skeleton components
This commit includes several improvements and new features:

- Updated the WebSocket connection logic in `websocket.py` to include connection status messages and periodic pings for maintaining the connection.
- Introduced new skeleton components (`Skeleton.vue`, `SkeletonDashboard.vue`, `SkeletonList.vue`) for improved loading states in the UI, enhancing user experience during data fetching.
- Refactored the Vite configuration to support advanced code splitting and caching strategies, optimizing the build process.
- Enhanced ESLint configuration for better compatibility with project structure.

These changes aim to improve real-time communication, user interface responsiveness, and overall application performance.
2025-06-28 23:02:23 +02:00
..
.vscode migrate to vue+vueuse+valerieui bc quasar customisation is sad 2025-05-13 19:23:15 +02:00
dev-dist migrate to vue+vueuse+valerieui bc quasar customisation is sad 2025-05-13 19:23:15 +02:00
e2e feat: Enhance WebSocket connection handling and introduce skeleton components 2025-06-28 23:02:23 +02:00
public Add project documentation and production deployment guide 2025-06-02 18:07:41 +02:00
src feat: Enhance WebSocket connection handling and introduce skeleton components 2025-06-28 23:02:23 +02:00
.editorconfig migrate to vue+vueuse+valerieui bc quasar customisation is sad 2025-05-13 19:23:15 +02:00
.env feat: Enhance application configuration and logging with new features 2025-06-27 11:55:29 +02:00
.gitattributes migrate to vue+vueuse+valerieui bc quasar customisation is sad 2025-05-13 19:23:15 +02:00
.gitignore feat: Integrate Storybook for component development 2025-05-31 14:43:59 +02:00
.prettierrc.json Update logging level to INFO, refine chore update logic, and enhance invite acceptance flow 2025-06-07 22:07:35 +02:00
Dockerfile fastapi-users, oauth, docker support, cleanup 2025-05-14 00:10:31 +02:00
Dockerfile.prod Update Dockerfile to use npm install and modify PWA theme and background colors in vite.config.ts 2025-06-02 18:07:41 +02:00
env.d.ts migrate to vue+vueuse+valerieui bc quasar customisation is sad 2025-05-13 19:23:15 +02:00
eslint.config.ts feat: Enhance WebSocket connection handling and introduce skeleton components 2025-06-28 23:02:23 +02:00
index.html Refactor GroupsPage and ListDetailPage for improved loading and error handling 2025-06-05 00:46:23 +02:00
package-lock.json chore: Remove package-lock.json and enhance financials API with user summaries 2025-06-28 21:37:26 +02:00
package.json chore: Remove package-lock.json and enhance financials API with user summaries 2025-06-28 21:37:26 +02:00
playwright.config.ts migrate to vue+vueuse+valerieui bc quasar customisation is sad 2025-05-13 19:23:15 +02:00
postcss.config.cjs phase 2 - ui refactor 2025-06-28 14:15:03 +02:00
README.md chore: Remove package-lock.json and enhance financials API with user summaries 2025-06-28 21:37:26 +02:00
tailwind.config.ts chore: Remove package-lock.json and enhance financials API with user summaries 2025-06-28 21:37:26 +02:00
tsconfig.app.json chore: Remove package-lock.json and enhance financials API with user summaries 2025-06-28 21:37:26 +02:00
tsconfig.json migrate to vue+vueuse+valerieui bc quasar customisation is sad 2025-05-13 19:23:15 +02:00
tsconfig.node.json migrate to vue+vueuse+valerieui bc quasar customisation is sad 2025-05-13 19:23:15 +02:00
tsconfig.vitest.json phase 2 - ui refactor 2025-06-28 14:15:03 +02:00
vite.config.ts feat: Enhance WebSocket connection handling and introduce skeleton components 2025-06-28 23:02:23 +02:00
vitest.config.ts migrate to vue+vueuse+valerieui bc quasar customisation is sad 2025-05-13 19:23:15 +02:00

fe

This template should help get you started developing with Vue 3 in Vite.

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

# Frontend only
npm run dev:fe

# Start both frontend & backend in two terminals
npm run dev:be
npm run dev:fe

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug

Lint with ESLint

npm run lint