A real-time environmental noise monitoring application for Lafontaine Park in Montreal, tracking the positive impact of electric vehicle adoption on urban noise pollution.
Deployed App: https://data-sciencetech.github.io/LaFontaine-Pulse/
# Install dependencies
npm install
# Start development server
npm run dev
# Open http://localhost:8080# Build for production
npm run build:gh-pages
# Deploy (automatic via GitHub Actions)
git push origin main- Real-time Noise Monitoring: Live sound level tracking at Papineau & Cartier intersection
- EV Impact Analysis: Correlates electric vehicle adoption with noise reduction
- Privacy-Compliant Analytics: Anonymized data collection respecting Quebec's Bill 64
- Bilingual Support: English and French interfaces
- Responsive Design: Works on mobile, tablet, and desktop
- Environmental Focus: Tracks positive environmental impact in Montreal's Plateau
There are several ways of editing your application.
**Use **
Simply visit the Project and start prompting.
Changes made via will be committed automatically to this repo.
Use your preferred IDE
If you want to work locally using your own IDE, you can clone this repo and push changes.
The only requirement is having Node.js & npm installed - install with nvm
Follow these steps:
# Step 1: Clone the repository
git clone https://github.com/data-sciencetech/LaFontaine-Pulse.git
# Step 2: Navigate to the project directory
cd LaFontaine-Pulse
# Step 3: Install the necessary dependencies
npm install
# Step 4: Start the development server
npm run devsrc/
βββ components/ # React components
β βββ ui/ # UI components (shadcn/ui)
β βββ ConsentDialog.tsx
β βββ NoiseChart.tsx
β βββ NoiseDisplay.tsx
βββ hooks/ # Custom React hooks
βββ lib/ # Utilities and services
β βββ analytics.ts # Privacy-compliant analytics
β βββ storage/ # Storage adapters
βββ data/ # Data models and adapters
βββ pages/ # Page components
This application implements privacy-first analytics:
- Local Storage: Data stays on user's device
- Anonymized Data: No personal information collected
- Quebec Bill 64 Compliant: Respects privacy regulations
- Optional Azure Integration: For advanced analytics
# Development
npm run dev # Start development server
npm run build # Build for production
npm run build:gh-pages # Build for GitHub Pages
npm run preview # Preview production build
# Deployment
npm run pre-deploy # Clean + build for deployment
npm run setup-azure # Setup Azure analytics (optional)
# Analytics
npm run analytics:local # Use local storage
npm run analytics:azure # Use Azure storage- URL:
https://data-sciencetech.github.io/LaFontaine-Pulse/ - Automatic deployment via GitHub Actions
- Perfect for: Public demonstrations, testing
- Enhanced analytics capabilities
- Custom domain support
- Advanced monitoring
See GitHub Pages Deployment Guide for detailed instructions.
- EV Adoption: Montreal/Quebec/Canada statistics
- Noise Modeling: DRSP noise maps validation
- Traffic Patterns: Papineau & Cartier intersection data
- Environmental Impact: Real-time correlation analysis
This project is part of Carlos Denner's environmental monitoring initiative for Montreal.
For questions about this project, contact the data-sciencetech team.
Made with β€οΈ for Montreal's environmental future
- Navigate to the desired file(s).
- Click the "Edit" button (pencil icon) at the top right of the file view.
- Make your changes and commit the changes.
Use GitHub Codespaces
- Navigate to the main page of your repository.
- Click on the "Code" button (green button) near the top right.
- Select the "Codespaces" tab.
- Click on "New codespace" to launch a new Codespace environment.
- Edit files directly within the Codespace and commit and push your changes once you're done.
This project is built with:
- Vite
- TypeScript
- React
- shadcn-ui
- Tailwind CSS
Simply open and click on Share -> Publish.
Yes, you can!
To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
Read more here: Setting up a custom domain