Hello Paris single page application

Need: Develop a static HTML/Javascript single page application, based on a DataTable main
component with sorting/filtering capabilities and a UI Kit.

This is the table mockup (details can vary depending on UI kit chosen):

The data comes from a single JSON file regularly updated. The sample for dev is:
https://storage.googleapis.com/hello-paris-feed/Paris_incidents_recap_sample.json

The file is loaded on first visit, then if the user clicks on ‘refresh’.

There should be 7 columns:

• 1st column should display the metro line icon based on a mapping table (about 20 Line
Names/SVG Icons).
• The “Type” column should be using a color coding (badge UI) based on “Maintenance” json
Boolean field (True => “Travaux”, False or not set (default) =>”Incident”)
• The description column is text (truncated, mouseover information for full text)
• Last update column (“Dernière info”)
• Duration formatted date/text column “Duree” should be “{Start Time = Month Day HH:MM }
=> {End Time = Month Day HH:MM}”. The date to be displayed in locale user format (using
toLocaleDateString..). The 2 dates for StartTime and EndTime from JSON is in ISO 8601 format
like "2023-10-12T14:30:00.000Z".
• Direction and Stations are optional text columns from JSON values

Frameworks and UI KIT

The Javascript Framework choice is open (JQuery, Vue, React..)

The choice of UI kit is open but should support a Table component and be open for future evolutions
(menus, etc..), for example:

- https://mdbootstrap.com/ (open source)

- https://keenthemes.com/metronic
- Other..

The default language should be French.

The ‘Creer une alerte’ button is experimental and should open a (modal) signup registration popup
based on external javascript code like Brevo/Mailchimp.. : see example
https://storage.googleapis.com/hello-paris-feed/index.html.

Deliverable:

- Shared repository (github..)

- Should work on static hosting (AWS S3, Google Storage..)