Frontend Mentor - Interactive comments section solution

This is a solution to the Interactive comments section 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
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Create, Read, Update, and Delete comments and replies
• Upvote and downvote comments
• Bonus: If you're building a purely front-end project, use localStorage to save the current state in the browser that persists when the browser is refreshed.
• Bonus: Instead of using the createdAt strings from the data.json file, try using timestamps and dynamically track the time since the comment or reply was posted.

Screenshot

Links

• Solution URL: solution URL
• Live Site URL: Live site

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vue - JS library
• Typescript
• Sass - For styles

What I've learned

While working with this project I learned how to use git and github more proficiently. We used issues on github, used project, and branched, as well as solve merge conflicts. We also used a design first approach. We had created a figma file, showing the app destructured into atoms, molecules and organisms, which means breaking down the app into small individual pieces that can me combined into bigger pieces. This method is very structural and is good for working in teams.

As for the coding we used Typescript and learned using pinia, a state management plugin for vuejs. When we have hit a wall a couple of times, but that's part of the learning process. The trickiest part was a component that takes a loop in a loop and finding the id from props of a deep nested children. We had to revise our approach. An way to solve our challenge is to normalize the data and use actions from the store to find the id of the comments and replies. Normalizing is a new concept for us, and it's not easy to implement. In the end used pinia, a vue store to solve our issue.

Time wise project took longer than anticipated.

Continued development

In the future, this project can be a full stack app.

Useful resources

• v-model - This helped for solving the typing in the textarea. I really liked this pattern and will use it going forward.
• complex objects - This is an amazing forum which helped me understand that nested elements are a pain, and there's a good way to do it. Even though we didn't Use it, I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @tenderking
• Frontend Mentor - @P4P1-ND

Acknowledgments

This project was a teamwork effort by https://github.com/P4P1-ND and https://github.com/tenderking. It was pleasure working together and we learned a lot from each other.

Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VSCode + Volar

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's .vue type support plugin by running Volar: Switch TS Plugin on/off from VSCode command palette.