tandem - GitLite

KO | EN

gitlite — search

#deep-learning #sql #svg #awesome-list #macos #vue #css #tensorflow #reactjs #rust

tandem

(★ 9)

Tableau collaboratif responsive de suivi des tâches et des livrables d'un sprint

파일 탐색기

ZIP 다운로드

- - favicon.svg
  - member-arielle.jpg
  - member-diane.jpg
  - member-gabriel.jpg
  - member-jean.jpg
  - member-merveille.jpg
  - member-sandrine.jpg
  - onboarding-actions.png
  - onboarding-drag.png
  - onboarding-tabs.png
  - task-dashboard-review.jpg
  - task-mobile-testing.jpg
  - task-user-research.jpg
- - app.js
  - board.js
  - data.js
  - drag-drop.js
  - form.js
  - onboarding.js
  - state.js
.gitattributes
.gitignore
.nojekyll
index.html
README.md
robots.txt
sitemap.xml
style.css

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Tandem est un tableau de travail collaboratif réalisé en HTML, CSS et JavaScript. Il centralise les livrables d'un sprint, leur progression et les personnes responsables, puis conserve les données dans le navigateur.

![Aperçu de Tandem sur ordinateur](https://raw.githubusercontent.com/Osiris-Balonga/tandem/main/assets/images/previews/tandem-desktop.png)

<p align="center">
  <img src="assets/images/previews/tandem-mobile.png" alt="Aperçu de Tandem sur mobile" width="240" />
</p>

## Démo

- GitHub Pages : https://osiris-balonga.github.io/tandem/
- Repository : https://github.com/Osiris-Balonga/tandem

## Fonctionnalités

- Ajouter, modifier et supprimer une tâche
- Définir une priorité, une échéance et une progression
- Ajouter une image comme pièce jointe et la consulter depuis la carte
- Assigner plusieurs personnes à une même tâche
- Rechercher des membres dans le sélecteur du formulaire
- Changer l'état d'une tâche par glisser-déposer sur ordinateur
- Consulter le total, les tâches en cours, les tâches terminées et le taux de complétion
- Basculer entre les thèmes clair et sombre avec mémorisation du choix
- Conserver les données avec `localStorage`
- Utiliser l'application au clavier et avec une préférence de réduction des mouvements

## Expérience mobile

La version mobile utilise deux onglets accessibles au toucher. Les tâches de l'onglet actif sont superposées comme un paquet de cartes : seule la première carte est manipulable et la suivante apparaît après une action.

Pour agir sur une carte :

1. Maintenir le doigt sur la carte.
2. La faire glisser vers le bas de l'écran.
3. La déposer sur Supprimer ou Terminer.

Dans l'onglet Terminées, l'action Terminer devient Remettre en cours. Les formulaires et les statistiques s'ouvrent dans des sheets adaptés à l'utilisation au pouce.

Lors de la première visite sur mobile, un guide illustré en trois étapes présente ce geste. Le bouton d'aide dans l'en-tête permet de le revoir à tout moment.

## Alternative clavier

- `Entrée` sur une carte : ouvrir le formulaire de modification
- `Alt` + `Flèche gauche` ou `Alt` + `Flèche droite` : changer son état

## Lancer le projet

Ouvrir `index.html` dans un navigateur ou démarrer un serveur local :

```bash
python -m http.server 8000
```

Puis visiter `http://localhost:8000`.

## Déploiement GitHub Pages

Le projet est prêt pour une publication GitHub Pages depuis la branche `main` et le dossier racine. Le fichier `.nojekyll` désactive le traitement Jekyll, tandis que `robots.txt` et `sitemap.xml` référencent l'URL de production.

## Structure

```text
gestionnaire-taches/
|-- assets/
|   |-- images/
|   |   `-- previews/
|   |-- js/
|   |   |-- app.js
|   |   |-- board.js
|   |   |-- data.js
|   |   |-- drag-drop.js
|   |   |-- form.js
|   |   |-- onboarding.js
|   |   `-- state.js
|   `-- vendor/phosphor/
|-- .nojekyll
|-- index.html
|-- robots.txt
|-- sitemap.xml
|-- style.css
`-- README.md
```

Les scripts restent chargés comme scripts classiques avec `defer`. Cette organisation conserve l'ouverture locale directe tout en séparant les données, la persistance, le tableau, les formulaires, l'aide mobile, le glisser-déposer et l'initialisation.

Les icônes proviennent de Phosphor Icons et sont incluses localement dans le projet. Les portraits de démonstration proviennent de Random User. Les pièces jointes de démonstration sont des photographies locales adaptées au contexte de chaque tâche.

## Auteur

Projet réalisé par [Osiris Balonga](https://github.com/Osiris-Balonga) dans le cadre de l'Akieni Academy.