vie-publique.sn

Sommaire

1. Présentation
2. ROADMAP
3. Stack
4. Structure du projet
5. Prérequis
6. Creation
7. Setup
8. Development Server
9. Dev Containers
10. Production

Présentation

Plateforme Web citoyenne dédiée à la promotion de la transparence et de l'accessibilité à l'information publique au Sénégal.

C'est une plateforme participative, collective, ouverte et open source visant à rendre accessible au grand public les informations publiques (rapports d'audit, budget, journal officiel, lois et règlements, code général, nominations etc.).

⚠️ AVERTISSEMENT IMPORTANT
Projet initié dans l'urgence pour répondre à l'indisponiblité du site de la cours des comptes le 01/05/2024. Les data (metadata sur les rapports et les pdf) on été incluses directement dans le repo git. Ce point sera corrigé très rapidement en séparant les data du code.

Roadmap

https://github.com/Code-for-Senegal/vie-publique.sn/wiki/ROADMAP

Stack

• Vue 3

• Nuxt 3

  • Nuxt UI pour les composants UI
  • Nuxt SEO pour optimiser SEO référencement naturel
  • Nuxt Content pour générer du contenu statique en markdown
  • nuxt-gtag pour le suivi Google Analytics

• Tailwind css pour le style UI

• ES lint et prettier pour le code Style

• Brevo (ex Sendinblue) pour la newsletter

• Package Manager: npm

• Bundler: Vite

• Nom de domaine

  • DNS vie-publique.sn acheté via OVH

• Hébergement

  • projet déployé chez Vercel

Structure du projet

vie-publique.sn/
├── assets/            # Ressources non compilées comme les styles et les images
├── components/        # Composants Vue réutilisables
├── layouts/           # Modèles de mise en page pour ton application
├── pages/             # Les pages de ton application basées sur les routes
├── plugins/           # Plugins JavaScript que tu souhaites exécuter avant l'instance root Vue
├── static/            # Fichiers statiques servis directement depuis la racine
└── public/            # Dossier publique avec les rapports pdf
└── content/           # Dossier content pour les contenus statiques markdown
└── server/            # parter serveur API
└── nuxt.config.ts     # Nuxt root config file
└── eslint.config.mjs  # ESLint config file
└── .prettierrc        # Prettier Config file

Prérequis

• Node.js > v18.0.0

Setup

Make sure to install the dependencies:

npm install

Development Server

1. Environnement de variable fichier .env

Créer un fichier .env en copiant le fichier .env.example à la racine du projet et y définir la variable d'environnement pour l'ID de Google Analytics ou le DNS

exemple:

GTAG_ID=G-XXXXXX
NUXT_PUBLIC_SITE_URL=https://www.vie-publique.sn
PUBLIC_SHOW_PINNED_PEOLPLES=false
PUBLIC_SHOW_SCANDALS=false
PUBLIC_SHOW_BAROMETER=true
BREVO_API_KEY=xxx
BREVO_LIST_ID=xxx

vous pouvez mettre des valeurs fictives en local

2. Development server

npm run dev

Votre application Nuxt 3 devrait maintenant être accessible à l'adresse http://localhost:3000 et se recharger automatiquement lorsque vous modifiez vos fichiers source.

Accès au viewer tailwind http://localhost:3000/\_tailwind

3. IDE

Pour VSCode, installer ces 2 extensions :

• Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• ESLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Executer la commande 'npm run lint' pour vérifier si le code style est correct ou 'npm run lint:fix' pour fixer automatiquement les issues.

Utiliser les Dev Containers

Vous pouvez utiliser Docker avec l'extension Dev Containers

1. Exécutez Docker

docker-compose up --build

ou

docker compose up

2. Assurez-vous que Docker n'est pas en cours d'exécution

docker compose stop

Votre application Nuxt 3 devrait maintenant être accessible à l'adresse http://localhost:3000 et se recharger automatiquement lorsque vous modifiez vos fichiers source.

En savoir plus : https://code.visualstudio.com/docs/devcontainers/containers

Production

Build the application for production:

# npm
npm run build

Locally preview production build:

# npm
npm run preview

Check out the deployment documentation for more information.