⏳ TimeLoop

In French

Introduction

Ce projet, sous la forme d'un petit site Internet, a été réalisé quelques temps après la disparition d'un proche. C'est dans ces moments-là que l'on prend pleinement conscience de la valeur particulière du temps. C'est pourquoi j'ai décidé de me lancer dans la création de ce projet : un compte à rebours permettant d'estimer facilement et simplement les temps restants ou écoulés depuis un événement historique ou une date personnalisée définie par l'utilisateur, afin de ne jamais oublier à quel point le temps passe.

Ce projet a été réalisé avec Svelte 🚀, s'appuie sur la bibliothèque NumberFlow, et ne propose pas de fonctionnalités avancées pour éviter d'utiliser un quelconque serveur back-end. Il s'agit donc d'un site totalement statique qui peut être hébergé sur n'importe quel serveur Web.

[!IMPORTANT] L'entièreté du code de ce projet est commenté dans ma langue natale (en français) et n'est pas voué à être traduit en anglais par soucis de simplicité de développement.

Installation

[!WARNING] Le déploiement en environnement de production nécessite un serveur Web déjà configuré comme Nginx, Apache ou Caddy pour servir les fichiers statiques générés par Vite.

Développement local

• Installer NodeJS LTS (>20 ou plus) ;
• Installer les dépendances du projet avec la commande npm install ;
• Démarrer le serveur local Vite avec la commande npm run dev.

Déploiement en production

• Installer NodeJS LTS (>20 ou plus) ;
• Installer les dépendances du projet avec la commande npm install ;
• Compiler les fichiers statiques du site Internet avec la commande npm run build ;
• Utiliser un serveur Web pour servir les fichiers statiques générés à l'étape précédente.

[!TIP] Pour tester le projet, vous pouvez également utiliser Docker. Une fois installé, il suffit de lancer l'image Docker de développement à l'aide de la commande docker compose up --detach --build. Le site devrait être accessible à l'adresse suivante : http://localhost:5173/. Si vous souhaitez travailler sur le projet avec Docker, vous devez utiliser la commande docker compose watch --no-up pour que vos changements locaux soient automatiquement synchronisés avec le conteneur. 🐳

[!CAUTION] L'image Docker ne peut pas et n'a pas été conçue pour fonctionner dans un environnement de production. Ce projet génère des fichiers statiques que vous devez servir avec un serveur Web déjà configuré et respectant aux bonnes pratiques de sécurité et d'optimisation. ⚠️

In English

Introduction

This project, a small website, was created shortly after the death of a family member. That's when you really realize how valuable time is. That is why I decided to start this project: a countdown that makes it easy to estimate the time remaining or elapsed since a historical event or a custom date defined by the user, to never forget how time flies.

This project was created with Svelte 🚀, is based on the [NumberFlow] library, and does not offer any advanced features to avoid using any back-end server. This is a completely static site that can be hosted on any web server.

[!IMPORTANT] The whole code of this project is commented in my native language (in French) and will not be translated in English for easier programming.

Setup

[!WARNING] Deployment in a production environment requires a pre-configured web server such as Nginx, Apache, or Caddy to serve the static files generated by Vite.

Local development

• Install NodeJS LTS (>20 or higher) ;
• Install project dependencies using npm install ;
• Start Vite local server using npm run dev.

Production deployment

• Install NodeJS LTS (>20 or higher) ;
• Install project dependencies using npm install ;
• Build static website files using npm run build ;
• Remove development dependencies using npm prune --production ;
• Use a web server to serve the static files generated in the previous step.

[!TIP] To try the project, you can also use Docker installed. Once installed, simply start the development Docker image with docker compose up --detach --build command. The website should be available at http://localhost:5173/. If you want to work on the project with Docker, you need to use docker compose watch --no-up to automatically synchronize your local changes with the container. 🐳

[!CAUTION] The Docker image cannot and was not designed to run in a production environment. This project generates static files that must be served with a pre-configured web server adhering to security and optimization best practices. ⚠️