Skip to content

CRUD, single-page, and interactive comment section having Redux as the global state management and Local Storage for saving app data

Notifications You must be signed in to change notification settings

isaacnovaes/react-interactive-comments-section

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

CRUD, single-page, and interactive comment section having Redux as the global state management and Local Storage for saving app data

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published