Fullstack CRUD application using Fastify, React, Redux & MongoDB Part-1

Let’s create something interesting

Jatin Kumar
May 25 · 16 min read

Things to know before getting started

Project Setup

mkdir fastify-react-crud
cd fastify-react-crud
touch .babelrc
mkdir server                     
mkdir src && cd src
touch index.html index.js menu.js menu.css
mkdir components && cd components
touch form.js menuItem.js
cd ..
mkdir redux/actions
mkdir redux/reducers
mkdir redux/store
cd redux/actions && touch actions.js && cd ../../
cd redux/reducers && touch reducer.js && cd ../../
cd redux/store && touch store.js cd ../../../../
npm init -y
npm i --save react react-dom redux react-redux redux-thunk uuid 
npm i --save redux-devtools-extension
npm i --save-dev parcel-bundler 
npm i --save-dev @babel/plugin-proposal-class-properties
"scripts": {
   "dev": "parcel src/index.html"
}
{ 
   "plugins": [ "@babel/plugin-proposal-class-properties" ]
}
fastify-react-crud
|--node_modules        // contains node modules
|--server              // will contain server related files
|--src                 // will contain cleint side related files
|----components        // will contain child components of menu.js
|------form.js         // form component for Addition & Updation
|------menuItem.js     // component to display menu item
|----redux             // contains redux related files & folders
|------actions         
|--------actions.js    // contains redux actions
|------reducers
|--------reducer.js    // contains redux reducer
|------store
|--------store.js      // here we create redux store
|----menu.css          // will contain css code 
|----menu.js           // will contain react code
|----index.html        // will contain html template
|----index.js          // will contain react code
|--package.json
|--.babelrc            // babel plugin config

Let’s start building our React-Redux Frontend!

Quick Structure Analysis

Application component structure

Enter Redux !


Let’s create something presentable!

What’s next ?

The Startup

Medium's largest active publication, followed by +469K people. Follow to join our community.

Jatin Kumar

Written by

A Fullstack React Developer | Designer | Blogger | Visit www.jatinkumar.tech to know more about me

The Startup

Medium's largest active publication, followed by +469K people. Follow to join our community.