Skip to content

Latest commit

 

History

History
92 lines (60 loc) · 2.92 KB

File metadata and controls

92 lines (60 loc) · 2.92 KB

Frontend Mentor - Interactive comments section solution

Live Site

Project preview

Table of contents

Overview

Running this project on your machine

This project was bootstrapped with Create React App

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

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.

Screenshots

Mobile

Desktop

Links

My process

Built with

  • Mobile-first workflow
  • Semantic HTML5 markup
  • CSS custom properties
  • SASS modules
  • Flexbox
  • CSS Grid
  • React - JS library
  • Redux

What I learned

It was an awesome project. I could practice all the fundamentals of React as well as Redux. Initially, I used the Context API to menage the global app data. However, it became unproductive when the possibility to make a reply of a comment reply was added. So it was a great project to practice the main React features

Continued development

Now that I feel confident with React, I plan to learn React Router and Framer Motion so that I can make beautiful, animated SPAs.