Frontend Mentor - News homepage solution

This is a solution to the News homepage challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Toggle dark mode
• Access page with details about the article

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/news-homepage-using-vue-3-and-strapi-OMmoTHLla9
• Live Site URL: https://news-homepage-strapi-vue-viniciuscosta89.vercel.app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vue - JS framework
• TanStack Query - Powerful asynchronous state management
• Pinia - The intuitive store for Vue.js
• Vue Router - Expressive, configurable and convenient routing for Vue.js
• Vite - Frontend Tooling
• Sass - For styles
• Typescript - JavaScript with syntax for types
• Strapi - Headless CMS

What I learned

I did this challenge to remember/recap my Vue knowledge. It's been years since I worked with Vue 2 and now Vue 3 it's a little different. It was nice to see the differences between Vue 2 and Vue 3. Since I was working with React the last years I found some similiar things between them. I found Pinia way better than Vuex. Vue-router and vue-query are very similar to their React counterparts.

The greatest challenge was align a 3-column row with a 2-column row on home page so they stay horizontally aligned.

I also had an opportunity to work with Strapi as my Headless CMS.

Continued development

My plan is to get harder challenges to improve my Vue 3 knowledge.

Useful resources

• Docker with Strapi V4 - This helped me with Strapi and how to host it somewhere, along the next link.
• Deploy Strapi project on Fly.io - I'm a Front-end developer so I have to do a lot of research how to deploy the back-end part from my project.
• Documentations from Pinia, TanStack Query, Vue, Vite, Vou-Router and Strapi.

Author

• GitHub - https://github.com/viniciuscosta89
• Frontend Mentor - @viniciuscosta89

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint