|
1 | | -# React + TypeScript + Vite |
| 1 | +# Flight Inspectors |
| 2 | +Flight Inspectors is a data visualization project that explores the history of plane crashes from 1908 to 2024. The project aims to provide insights into the causes and trends of plane crashes over time, as well as to raise awareness about aviation safety. |
2 | 3 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 4 | +## Prerequisites |
| 5 | +- [Node.js / NPM](https://nodejs.org/en/download) |
| 6 | +- [Git](https://git-scm.com/install/) |
4 | 7 |
|
5 | | -Currently, two official plugins are available: |
6 | | - |
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) |
9 | | - |
10 | | -## React Compiler |
11 | | - |
12 | | -The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information. |
13 | | - |
14 | | -Note: This will impact Vite dev & build performances. |
15 | | - |
16 | | -## Expanding the ESLint configuration |
17 | | - |
18 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
19 | | - |
20 | | -```js |
21 | | -export default defineConfig([ |
22 | | - globalIgnores(['dist']), |
23 | | - { |
24 | | - files: ['**/*.{ts,tsx}'], |
25 | | - extends: [ |
26 | | - // Other configs... |
27 | | - |
28 | | - // Remove tseslint.configs.recommended and replace with this |
29 | | - tseslint.configs.recommendedTypeChecked, |
30 | | - // Alternatively, use this for stricter rules |
31 | | - tseslint.configs.strictTypeChecked, |
32 | | - // Optionally, add this for stylistic rules |
33 | | - tseslint.configs.stylisticTypeChecked, |
34 | | - |
35 | | - // Other configs... |
36 | | - ], |
37 | | - languageOptions: { |
38 | | - parserOptions: { |
39 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
40 | | - tsconfigRootDir: import.meta.dirname, |
41 | | - }, |
42 | | - // other options... |
43 | | - }, |
44 | | - }, |
45 | | -]) |
| 8 | +## Run |
46 | 9 | ``` |
47 | | - |
48 | | -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
49 | | - |
50 | | -```js |
51 | | -// eslint.config.js |
52 | | -import reactX from 'eslint-plugin-react-x' |
53 | | -import reactDom from 'eslint-plugin-react-dom' |
54 | | - |
55 | | -export default defineConfig([ |
56 | | - globalIgnores(['dist']), |
57 | | - { |
58 | | - files: ['**/*.{ts,tsx}'], |
59 | | - extends: [ |
60 | | - // Other configs... |
61 | | - // Enable lint rules for React |
62 | | - reactX.configs['recommended-typescript'], |
63 | | - // Enable lint rules for React DOM |
64 | | - reactDom.configs.recommended, |
65 | | - ], |
66 | | - languageOptions: { |
67 | | - parserOptions: { |
68 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
69 | | - tsconfigRootDir: import.meta.dirname, |
70 | | - }, |
71 | | - // other options... |
72 | | - }, |
73 | | - }, |
74 | | -]) |
| 10 | +npm run dev |
75 | 11 | ``` |
| 12 | +Open [http://localhost:5174/](http://localhost:5174/) with your browser to view the website. |
| 13 | + |
| 14 | +You can also visit the deployed version of the website hosted on GitHub Pages at [https://com-480-data-visualization.github.io/flight-inspectors/](https://com-480-data-visualization.github.io/flight-inspectors/). |
| 15 | + |
| 16 | +## Analysis |
| 17 | +### Datasets |
| 18 | +The primary dataset we will be working with is a dataset of plane crashes from 1908 to 2024 found on [Kaggle by Luiscé Francisco](https://www.kaggle.com/datasets/luiscfrancisco/plane-crashes-dataset/data). As a complement, we will be using the airports, routes, and airlines datasets from [OpenFlights](https://openflights.org/data), a free, high-quality and comprehensive aviation database. |
| 19 | + |
| 20 | +### Run the data analysis |
| 21 | +TODO |
| 22 | + |
| 23 | +## Contributors |
| 24 | +| Student's name | SCIPER | Contribution | |
| 25 | +| -------------- | ------ | ------------ | |
| 26 | +| Nicolas Karmolinski | 316655 | TODO | |
| 27 | +| Roméo Maignal | 360568 | TODO | |
| 28 | +| Jakub Kielar | 423372| TODO | |
| 29 | + |
| 30 | +## Stack |
| 31 | +- Scripting language: [TypeScript](https://www.typescriptlang.org/) |
| 32 | +- UI/UX framework: [React](https://react.dev/) |
| 33 | +- Build tool: [Vite](https://vite.dev/) |
| 34 | +- Runtime environment: [Node.js](https://nodejs.org/en) |
| 35 | +- Package manager: [NPM](https://docs.npmjs.com/) |
| 36 | + |
| 37 | +<div inline style="display: flex; gap: 1rem; margin-top: 1rem;" bb> |
| 38 | +<img width="50" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=original" alt="TypeScript" title="TypeScript"/> |
| 39 | +<img width="50" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=original" alt="React" title="React"/> |
| 40 | +<img width="50" src="https://v2.vitejs.dev/logo.svg" alt="Vite" title="Vite"/> |
| 41 | +<img width="50" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg" alt="Node.js" title="Node.js"/> |
| 42 | +<img width="50" src="https://upload.wikimedia.org/wikipedia/commons/d/db/Npm-logo.svg?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=original" alt="npm" title="npm"/> |
| 43 | +</div> |
0 commit comments