Countries | Vue 3, ASP.NET Core 8, MongoDB Atlas

What are you most proud of, and what would you do differently next time?

Technologies used:

• Frontend: HTML, SCSS, TypeScript, Vue 3, Vite
• Backend: C#, ASP.NET 8
• Database: MongoDB Atlas

What challenges did you encounter, and how did you overcome them?

The data includes information from 250 countries, which causes the page to load very slowly if all the data is loaded at once.

• To address this, I implemented pagination. Initially, only a portion of the data is loaded. As the user scrolls to the bottom of the page, additional portions of the data are loaded dynamically.

I discovered that MongoDB Atlas offers clusters and databases that restrict access to specific IP addresses only. Since I host my backend on Heroku using the dynos plan, it lacks a static IP address

• Heroku provides an add-on called QuotaGuard Static IP, which ensures outbound requests have a static IP address. I have added this IP address to MongoDB Atlas for access.
• However, I encountered an issue where I couldn't access MongoDB Atlas using the assigned IP address. I am currently investigating the cause of this issue. In the meantime, I have temporarily allowed access to the database from any IP address.

It's important to note that if a setup works on your local machine, it doesn't guarantee it will work online. Hosting involves numerous tasks and considerations to ensure everything functions correctly in a live environment.