Project Overview:
This project involved developing MercaNews, a news website created using Vue.js. The primary objective was to create a responsive platform for displaying news articles and live sports scores. Ultimately, MercaNews provides users with a seamless browsing experience, showcasing the power of web development.
Project Execution Process:
- Web Scraping for News: First, I developed a Node.js function to scrape news articles from various sources. Then, I stored the data in Firebase for dynamic display on MercaNews.
- Web Scraping for Scores: Next, I created another Node.js function to scrape live sports scores. Similarly, this data was also stored in Firebase for real-time updates on MercaNews.
- Data Fetching: I utilized Axios to make API calls for fetching news articles and scores from Firebase, ensuring MercaNews always has the latest information.
- Responsive Design: Furthermore, I implemented Bootstrap and BootstrapVue to ensure a responsive layout. As a result, users can access MercaNews on various devices.
- Dynamic Components: I created dynamic components for displaying news articles and live scores on MercaNews. Additionally, I used vue-carousel and vue-slick-carousel for engaging visual elements.
- Date Formatting: I employed Moment.js and vue-moment to format and display publication dates and times for each news article on MercaNews.
- Ad Integration: Finally, I integrated vue-google-adsense for monetization through ads displayed alongside news content on MercaNews.
Final Outcome:
In conclusion, the result is a fully functional news website called MercaNews that effectively displays the latest news articles and live sports scores. With a user-friendly interface, MercaNews leverages real-time data fetching, web scraping, and responsive design. Consequently, it enhances user experience and keeps visitors informed. This project showcases my skills in web development using Vue.js to create dynamic and engaging user experiences.