Building a Custom Content Management System with Vue.js and Firebase

After launching my personal website, I found myself in need of a simple yet effective way to manage my content. While I could have opted for a pre-built content management system, I decided to seize the opportunity to enhance my skills in Vue.js. This led to the development of a more complex project that turned out to be both challenging and rewarding.

For this project, I used similar technologies as my personal site, but with added functionalities. My personal website primarily reads data from the Firebase Realtime Database, while my new project, console.valentingavran.com, not only reads but also writes data into the database and handles user authentication for the admin.

Firebase Realtime Database

One of the significant advantages of using the Firebase Realtime Database is its flexible security rules. I configured the database to allow any visitor to read data without authentication, which means that everyone can access my projects and other information on valentingavran.com. For writing data, however, I implemented stricter rules requiring users to authenticate with a username and password. Thanks to the integrated Firebase JavaScript library, writing data is almost as straightforward as reading it.

Another remarkable feature of the Firebase Realtime Database is its real-time synchronization capabilities. Any changes made to the database are instantly updated across all active clients without needing to refresh the page. While this feature is powerful, I found it somewhat excessive for my specific use case, but it adds a layer of dynamism to the application that is hard to overlook.

User Interface and Deployment

Just like my personal website, this project has its own GitHub repository with a configured workflow for automatic deployment. This ensures that any updates I make are seamlessly reflected on the live site. I also placed a strong emphasis on creating an appealing user interface, optimized for all screen sizes, to enhance the overall user experience.

Conclusion

The project not only allowed me to apply my Vue.js skills but also provided a practical solution for content management on my website. The combination of Firebase's powerful database features with a custom-built front end has resulted in a smooth, user-friendly experience for both me and my website visitors.

Here are some screenshots that showcase the finished web application: