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
  • Useful resources
• Author

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: https://www.frontendmentor.io/solutions/fullstack-comment-section-svelte-knex-express-nDcE5gJTpT
• Live Site URL: https://fm-comments.herokuapp.com/

My process

Built with

• Svelte - Frontend library
• Vite - Bundler and development server
• Knex - SQL query builder
• Express - Node server framework
• PostgreSQL - Database
• Heroku - Hosting platform

What I learned

• Vite templates to get started with library of choice
• How to make your project use ESModules
• How to set up an sqlite3 database
• How to set up Knex to create (somewhat) DB agnostic queries
• Basic useage of Svelte
• CORS
• Body Parser not needed in Express anymore
• Static routes in Express
• Heroku deployment (do you ever really know this?)

Useful resources

• Svelte Tutorial
• Mask to change svg color on hover - Change svg color on hover without using it inline. Required some tweaks from the example. Also needed a polyfill for Chromium (see caniuse).
• Getting set up with Knex - Very descriptive tutorial that needed to be adapted for ESModules.
• Cross Reference setting up Knex - Used information here to verify and see a second perspective.

Author

• Website - loganwoolf.github.io
• Frontend Mentor - @loganwoolf
• Twitter - @logan__woolf