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
  • Link
• My process
  • Built with
  • Useful resource
• Author

Overview

The challenge

Users are 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: Access the website with the same state as when it was closed, as everything is stored on the server side via a REST API
• Bonus: See the past time up to the time the comment or reply was created. For this purpose unix timestamps are created, stored and retrieved.

Screenshot

Link

• Current solution url: https://interactive-comments-section-production.up.railway.app/
• Old solution url of project without MERN stack (only used react and JSON server) as the REST API: https://interactive-comments-section-xi.vercel.app/ (hosted on Vercel)

My process

Built with

• MERN stack
  • MongoDB - modern, fast and lightweight database
  • Express.js - Node.js web framework
  • React - client-side JavaScript framework
  • Node.js - premier JavaScript web server
• SCSS for clean, easy and less CSS
• Flexbox
• Mobile-first workflow

Useful resource

• Using CORS in Express - short, helpful and easy-to-follow article on how to add cors supoort in express
• React re-renders guide - comprehensive guide on React re-renders, this guide explains what re-renders are, what necessary and unnecessary re-render is and what can trigger a React component re-render
• React Docs - Docs of React

Author

• Frontend Mentor - @LuckyChimp