You will probably see that web page is completely normal on a computer screen, but mobile page is a mess. I am sorry for that, not the best frontend developer.
# you might need to make the script executable
# chmod +x scripts/start.sh (optional)
bash scripts/start.shthat is it. now go to localhost:333.
-
You need latest or modern browsers, I am using js-bson library of MongoDB which requires top-level-await feature. Check browser compability table right here.
-
If you are having issues mounting the volumes, especially on OSX, you might need to create
container-dataandkeysfolders manually and add them to thefile sharingin Docker settings. -
If you want to see the data live, you can do
❯ docker exec mongodb mongosh
Current Mongosh Log ID: 66139dd81bff5e5777403e98
Connecting to: mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.2to get the connection string and use it in MongoDB Compass along with the user&password in the .env file.
I will not go into technical details here.
When you first navigate to localhost:333, you will see our one and only page, the index:
Frontend is really really simple. Screen is divided into two.
- Google Maps
- Info Panel
- Wipe Earthquakes
- Submit Earthquakes
- Connected / Reconnect
- Latest Earthquakes Table.
Only 6 main components. Starting from Submit Earthquakes,
We have two script. First, Feed a Single Earthquake and the second, Feed Earthquakes from USGS Dumps. Yes, there is no random earthquake input in random intervals. I cannot simulate good enough data to make our screenshots, or your viewing experience better.
When you load the index page, a websocket connection to the backend will be created. This will be the backbone of our index/hot reload of our data. If you see the text "Listening for changes..." at the bottom left, then you are good to go.
Clicking our first dialog:
2024-04-09.20-24-03.mp4
As you see, after we feed the single earthquake to the system, table will get updated and a new marker will be added to the map. Mudanya, Bursa in this case. You can see the details of earthquake if you either
- click the marker
- click the corresponding row in latest earthquakes
Second dialog:
2024-04-09.22-07-49.mp4
In this option, you can feed a GeoJSON dump to the Mongo.
As the change stream/documents are processed, you can view the data inserted one by one. Or, you can simply refresh the page, and view everything from the dump. When you refresh the page, remaining of the batch will not be streamed to you, but streaming will continue for other users connected during bulk insert.
Table also have a search functionality:
2024-04-09.22-39-38.mp4
For wiping everything:
2024-04-09.22-40-47.mp4
As I said, frontend is really simple, and probably not the nicest job you will see. I am mainly backend developer, soo. Still did my best. I hope you like it.
Quasar w/ Vite does that in cold start, unfortunately. Currently, there is nothing wrong in production mode, and Dockerfile is set to the production, but dev mode force refreshes itself with no reason. See => quasarframework/quasar#12933