This is a frontend dashboard application for displaying information collected by IoT devices. It is built with the React framework Next.js. For more detailed explanations, please take a look at our wiki.
To get a local copy running, follow these steps:
- Clone the repository:
git clone [email protected]:TinyAIoT/trashcan-frontend.git - Install NodeJS
- Install the dependencies:
npm install - Obtain the
.envvariables (-> cf. documentation) - Run the development server:
npm run dev - Open http://localhost:3000 in the browser
- The website auto-updates while editing the code
- Dashboards for different kind of IoT devices: Smart Trashcans and Smart Noise Sensors
- Dashboard for Smart Trashcans
- Overview page: Shows aggregated information: Which trashbins are on which fill and battery level, how many sensors are broken, etc.
- Map page: Locations and detailed information of the trashbins
- Route Planning page: Plan routes to empty trashbins, assign them to drivers and export them to Google Maps
- Trashbins (Overview) page: Sort and search through the trashbins according to their attributes
- Trashbins (Detail) page: View the history and detailed information for the selected trashbin
- Project Settings page: Customize the UI to suit your needs
- Dashboard for Smart Noise Sensor
- Overview page: Shows history of noise levels measured by the noise sensor and confidence of ML model
- Project Settings page: Customize the UI to suit your needs
- Login Page: Login (TODO: Signup)
- Account Settings: Logout (TODO: Change password, theme, language)