MERN app demonstrating basic CRUD operations .

Related tags

React souvenir
Overview

Souvenir

Website : https://mjsouvenir.netlify.app/

  • This is a full stack application made using MERN concepts
  • Used MongoDB atlas for database and redux to dispatch actions
  • Created fully responsive frontend using React and materialUI
  • Server side deployed using Heroku : https://souvenir-mj.herokuapp.com/
  • Client side deployed using Netlify

There are 5 main actions in this application

  1. Fetching all posts
  2. Creating a post
  3. Updating a post
  4. Deleting a post
  5. Like a post

Each of these actions have been implemented by following a structured process as follows:

  1. Adding a route of the action to routes in server
  2. Adding this functionality to controllers in server
  3. Making an api call for the action in client
  4. Adding an action with respect to the api in actions on client side
  5. Adding the reduced version of this action in reducers on client side
  6. Using these actions on client side components

Problem faced : Mongoose Schema timestamp not working, so I had to remove the timestamp of all posts

You might also like...

A basic React/NextJS project showing how to use the Flow Client Library (FCL)

A basic React/NextJS project showing how to use the Flow Client Library (FCL)

How to use the Flow Client Library (FCL) with SvelteKit Everything you need to build a SvelteKit project with the Flow Client Library (FCL). For a Sve

Sep 24, 2022

Parcel Next JS - A simple website with Authentication and basic API calls to a backend system.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jan 2, 2022

Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries.

Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries.

Math Magicians Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries. Screen

Oct 20, 2022

here in this git repo you will get react js basic layout, having in responsive mode.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Feb 23, 2022

🔄 Basic project to start studying React and Typescript. With it you can translate text to binary or morse language. This project addresses the creation of routes and components.

max-conversion Projeto criado para iniciar nos estudos de React e Typescript Basic project to gain knowledge in react Na plataforma Ă© possĂ­vel convert

Feb 12, 2022

Webpack is an open-source JavaScript module bundler. This includes basic setup files to help me not redo all the setups for webpack when starting a new project.

Webpack Setup Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as

Jun 23, 2022

Basic React Project with React Router, ContextAPI and Login

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2023

The chat app built with microservice architecture, the app using: Lerna, pm2, GraphQL

The chat app built with microservice architecture, the app using: Lerna, pm2, GraphQL

Microservice Chat App A microservice app! Built With Lerna pm2 Graphql Sequelize Socket.io About The Project Here's why: I want learn socket.io and mi

Aug 27, 2022

Recipe providing mobile app, User selects ingredients in pantry and is then provided recipes for those ingredients. App contains a signup/login, meal planner and grocery list pages.

Recipog Student Information Name Connor de Bruyn Username Destiro Assignment SWEN325 A2 Description “Recipog” is a recipe providing app that allows th

Dec 26, 2021
Owner
null
An Admin Panel developed for simplifying the process of CRUD operations in the database.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Chetan Thakral 6 Dec 15, 2022
This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the source code concise.

React Hook Component State This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the so

Yongwoo Jung 2 May 15, 2022
BookAttic is an online bookstore made using the MERN stack.

BookAttic is an online bookstore made using the MERN stack. Link to the website. Table of contents General info Technologies Setup General info This p

Chirag Datwani 32 Nov 19, 2022
Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

Redux-Toolkit CRUD example with React Hooks, Axios & Web API Build Redux-Toolkit CRUD application with React Hooks and Rest API calls in that: Each it

null 69 Dec 27, 2022
An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

CRUD app with React and Firebase 9 An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) produc

JĂșlio Bem 3 Sep 28, 2021
Nextjs CRUD with React Context API and Tailwind CSS

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Fazt Web 23 Sep 25, 2022
Hotel Booking System Built In MERN (MongoDB, ExpressJs, ReactJs, Nodejs) Stack.

Setting Up The Project Please Run The Commands Below to Run the Project git clone https://github.com/yishakdotjs/yishakdotjs-Hotel-Booking-System-Fron

Yishak Abraham 1 Feb 3, 2022
Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models

@mainmatter/ember-api-actions This is an Ember.js addon allowing you to easily implement non-CRUD actions for your Ember Data models. Compatibility Em

Mainmatter 6 Dec 15, 2022
This is a challenge intiated by ModelSis. It consists in building a basic fullstack web app

modelsis-react-fullstack ?? Description This is a challenge intiated by ModelSis. It consists in building a basic fullstack web app. The current repos

RĂ©gis 1 Jan 21, 2022
Math Magicians! This is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make basic calculations and read a random math-related quote.

Math Magicians Math Magicians is the first React Project I'm building. The main objective of this is to understand React features with a project-based

Andrés Felipe Arroyave Naranjo 7 Feb 26, 2022