Quote CRUD App build with React.js

We frontend developers are not limited to only one framework for building Single Page Applications (SPA). Recently I have been working mostly with Vue.js framework for building those applications but I wanted to extend my knowledge further and learn how React.js works under the hood. So, I created this simple Quote CRUD app with the purpose of applying React.js concepts and shared it with you. 😊

The purpose of this app is as a user to be able to create, read, edit and delete a quote. Technologies and React concepts I applied in this app:

• Quickly get started with create-react-app CLI ✅
• Created class components for showing and creating quotes. ✅
• Instead of writing pure vanilla JS for creating HTML elements and appending to DOM I learned to use JSX and understood that everything in React is JavaScript. ✅
• In order to navigate between pages, I installed a react-router. ✅
• Local state in React class components and setState method for mutating the state values. ✅
• As my app began to grow I noticed that it could be better to separate it in multiple function components and reuse those components. ✅
• Controlled components for handling user form inputs and events. ✅
• Props for passing data between components and conditional rendering to render part of the code/component. ✅
• React-bootstrap is used for UI components. ✅
• Sass as CSS pre-processor for component styling. ✅
• React masonry CSS for masonry layout. ✅
• Firebase real database for saving, fetching and updating the data. ✅
• For this tiny app I would probably not need an extra library for managing the state of this application however I wanted to integrate Redux and hold the application state into a store, using reducers to specify how the application's state changes, using actions to send data from my application to the store by dispatching, etc. ✅

Link: Quote app

I hope you find it interesting!

Cheers 🍻
Stay healthy!