Open In App

Simple Journal App with MERN Stack

Last Updated : 03 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Simple Journal App is a great way to showcase your understanding of full-stack development. In this project, we will be making a Blogging website using MERN stack (MongoDB, ExpressJS, React, NodeJS). We will be using React.js framework and tailwind CSS for our frontend and express.js and MongoDB as our backend. This project will showcase how to upload, View, save, and make blogs as well as keep a record of users on your site.

Project Preview:

Screenshot-2024-03-09-022206

Prerequisites:

  1. MongoDB
  2. Express.js
  3. React.js
  4. Node.js
  5. TinyMce
  6. Tailwind CSS

Approach:

  • Decide on all the functionalities that need to be added in the project
  • Chose the required dependencies and modules that need to be added to the project and install them
  • Start working on backend
  • Make routes needed divide them into user routes and post routes
  • start working on front end
  • make the required components
  • make pages with the said components
  • in app.jsx routes which page should lead to where
  • link backend and frontend

Steps to Create the Application:

Step 1. Create a folder for the project using the following command.

mkdir blogit
cd blogit

Step 2. Create the backend folder.

mkdir backend
cd backend

Step 3: Initialize the Node application using the following command.

npm init -y

Step 4: Install the required dependencies.

npm install mongoose express jsonwebtoken cors
npm install --save-dev nodemon

Folder Structure(backend):

Screenshot-2024-03-08-170803

Frontend Project structure

Dependencies:

"dependencies": {
    "cors": "^2.8.5",
    "express": "^4.19.2",
    "jsonwebtoken": "^9.0.2",
    "mongoose": "^8.2.4"
  },
  "devDependencies": {
    "nodemon": "^3.1.0"
  }

Example: Create the required files and add the following codes.

Javascript 
//index.js

const UserRouter = require("./routes/user.js")
const express = require("express")
const mongo = require("mongoose");
const PostRouter = require("./routes/post.js");
const cors = require("cors")
const app = express();
app.use(cors())
const port = 8000;
app.use(express.json())

app.listen(port, () => {
    console.log(`Server live at http://localhost:${port}`)
})

app.use('/api/v1/user', UserRouter)
app.use('/api/v1/blog', PostRouter)
JavaScript 
//db.js

const mongoose = require('mongoose')

mongoose.connect("Your MongoDB URI")

const userSchema = new mongoose.Schema({
    Username: {
        type: String,
        required: true,
        unique: true,
        trim: true,
        lowercase: true,
        minLength: 3,
        maxLength: 30
    },
    password: {
        type: String,
        required: true,
        minLength: 8,
    },
})

const PostSchema = new mongoose.Schema({
    title: {
        type: String,
        required: true
    },
    content: {
        type: String,
        required: true,
    },
    createdAt: {
        type: Date,
        default: Date.now
    },
    author: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true }
})

const User = mongoose.model("User", userSchema)
const Post = mongoose.model("Post", PostSchema)

module.exports = { User, Post }
JavaScript 
//config.js

const JWT_SECRET = "Its Your Secret"

module.exports = { JWT_SECRET }
JavaScript 
//routes/user.js

const { JWT_SECRET } = require("../config.js")
const jwt = require("jsonwebtoken")
const express = require("express")
const { User } = require("../db")
const mongo = require("mongoose")

const UserRouter = express.Router();

UserRouter.post('/signup', async (req, res) => {
    const existingUser = await User.findOne({
        Username: req.body.username
    })
    if (existingUser) {
        return res.status(411).json({
            message: "Username already taken/Incorrect inputs"
        })
    }
    try {
        const user = await User.create({
            Username: req.body.username,
            password: req.body.password,
        });
        const token = jwt.sign({ id: user._id }, JWT_SECRET);
        return res.json({ token });
    } catch (e) {
        res.status(403).json({ e });
    }
});
UserRouter.post('/signin', async (req, res) => {
    const user = await User.findOne({
        Username: req.body.username,
        password: req.body.password
    })
    console.log("d" + user)
    if (user) {
        const token = jwt.sign({
            userId: user._id
        }, JWT_SECRET);

        res.json({
            token: token
        })
        return;
    }
    res.status(411).json({
        message: "Error while logging in"
    })

});
module.exports = UserRouter
JavaScript 
//routes/post.js

const { JWT_SECRET } = require("../config.js")
const jwt = require("jsonwebtoken")
const express = require("express")
const { Post, User } = require("../db")

const PostRouter = express.Router();

const authMiddleware = (req, res, next) => {
    const authHeader = req.headers.authorization;
    if (!authHeader || !authHeader.startsWith('Bearer ')) {
        return res.status(403).json({});
    }
    const token = authHeader.split(' ')[1];
    try {
        const decoded = jwt.verify(token, JWT_SECRET);
        req.userId = decoded.userId;
        next();
    } catch (err) {
        return res.status(403).json({});
    }
};

PostRouter.use('/*', authMiddleware)
PostRouter.get('/bulk', async (req, res) => {

    const blogs = await Post.find({}).populate('author', 'Username');
    return res.json({ blogs });

});

PostRouter.post('/post', async (req, res) => {
    const userId = req.userId;

    const body = req.body;
    const post = await Post.create({
        title: body.title,
        content: body.content,
        author: userId,
    });

    return res.json({
        id: post._id,
    });
});

PostRouter.get('/uname', async (req, res) => {
    const id = req.userId
    const user = await User.findById(id)
    return (res.json({ uname: user.Username }))
})

PostRouter.get('/:id', async (req, res) => {

    const id = req.params.id;
    const blog = await Post.findById(id).populate('author', 'Username')

    return res.json(blog)
});

module.exports = PostRouter;

To start the backend run the following command.

nodemon index.js


Step 5: Create the frontend application using the following command.

npm create vite@latest

name the project accordingly and chose react for framework and then variant javascript

Screenshot-2024-03-09-015213

Initiating frontend with vite


Step 6: Install all the dependencies we need run the commands in the terminal

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm i axios react-router-dom html-react-parser
npm install --save @tinymce/tinymce-react

Step 7: Replace content of tailwind.config.js file with the below code

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 8. Remove all the content in app.css and index.css

Step 9. Create a file config.js in frontend/src and add the below code in your index.css and config.js. Change the URL in config.js to be that of your Backend server

CSS 
/*src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
JavaScript 
//src/config.js

export const BACKEND_URL = "http://localhost:8000"


Folder Structure:

Screenshot-2024-03-16-155142

Dependencies:

"dependencies": {
    "@tinymce/tinymce-react": "^5.0.0",
    "axios": "^1.6.8",
    "html-react-parser": "^5.1.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3",
    "vite": "^5.2.0"
  }

Step 10: Create the required files as shown in folder structure and add the following codes.

Javascript 
//components/header.jsx

import { Link } from "react-router-dom";

export const HeaderS = ({ type }) => {
    return (
        <div className="px-10 flex-col justify-center">
            <div className="text-3xl font-extrabold">
                {type === "signup" ? "Create an Account" : "Log in To your Account"}
            </div>
            <div className="text-slate-400 mb-4 ">
                {type === "signup"
                    ? "Already have a Account?"
                    : "Dont Have a Account yet?"}
                <Link
                    className="pl-2 underline"
                    to={type === "signup" ? "/signin" : "/signup"}
                >
                    {type === "signup" ? "Sign in" : "Signup"}
                </Link>
            </div>
        </div>
    );
};
JavaScript 
//components/Auth.jsx

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { BACKEND_URL } from "../config";
import { HeaderS } from "./header";

export const Auth = ({ type }) => {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const navigate = useNavigate();
    async function sendRequest() {
        try {
            console.log(`${BACKEND_URL}/api/v1/user/${type}`);
            const response = await axios
                .post(`${BACKEND_URL}/api/v1/user/${type}`, {
                    username: username,
                    password: password,
                });
            console.log(response);
            const jwt = response.data.token;
            console.log(jwt);
            localStorage.setItem("token", "Bearer " + jwt);

            navigate("/blogs");
        } catch (e) {
            alert(
                "Error, Try again| use a diffrent username | 
        make sure username is atleast 3 characters
         long and password 8 characters "
            );
        }
    }
    return (
        <div className="h-screen flex justify-center flex-col">
            <div className="flex justify-center">
                <div>
                    <HeaderS type={type}></HeaderS>

                    <LabelledInput
                        label="Username"
                        placeholder="Alucard"
                        onChange={(e) => {
                            setUsername(e.target.value);
                        }}
                    />
                    <LabelledInput
                        label="Password"
                        type={"password"}
                        placeholder="Apassword"
                        onChange={(e) => {
                            setPassword(e.target.value);
                        }}
                    />
                    <button
                        onClick={sendRequest}
                        type="button"
                        className="mt-8 w-full text-center text-white 
            bg-gray-800 hover:bg-gray-900 focus:outline-none
             focus:ring-4 focus:ring-gray-300 font-medium 
             rounded-lg text-sm px-5 py-2.5 me-2 mb-2"
                    >
                        {type === "signup" ? "SignUp" : "Sign in"}
                    </button>
                </div>
            </div>
        </div>
    );
};

function LabelledInput({ label, placeholder,
    onChange, type = "text" }) {
    return (
        <div className="mt-3 ">
            <label className="block mb-2 text-sm 
      font-medium text-gray-900">
                {label}
            </label>
            <input
                onChange={onChange}
                type={type}
                className="bg-gray-50 border border-gray-300 
        text-gray-900 text-sm rounded-lg focus:ring-blue-500 
        focus:border-blue-500 block w-full p-2.5"
                placeholder={placeholder}
            />
        </div>
    );
}
JavaScript 
//components/Quote.jsx

export const Quote = () => {
    return (
        <div className="bg-slate-200 h-screen flex justify-center flex-col">
            <div className="flex justify-center">
                <div className="max-w-md ">
                    <div className="text-3xl font-bold">A great Bloging site</div>
                    <div className="text-xl font-semibold flex text-left mt-2">
                        LuffyToro
                    </div>
                    <div className="text-m font-sm text-slate-400 flex text-left">
                        CEO Akifena
                    </div>
                </div>
            </div>
        </div>
    );
};
JavaScript 
//pages/signup.jsx


import { Auth } from "../components/Auth"
import { Quote } from "../components/Quote"

export const Signup = () => {
    return <div>
        <div className="grid lg:grid-cols-2">
            <div>
                <Auth type="signup" />
            </div>
            <div className="hidden lg:block">
                <Quote></Quote>
            </div>
        </div>
    </div>
}
JavaScript 
//pages/signin.jsx

import { Auth } from "../components/Auth"
import { Quote } from "../components/Quote"

export const Signin = () => {
    return <div>
        <div className="grid lg:grid-cols-2">
            <div>
                <Auth type="signin" />
            </div>
            <div className="hidden lg:block">
                <Quote></Quote>
            </div>
        </div>
    </div>
}
JavaScript 
// frontend/App.jsx

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { Signin } from './pages/signin'
import { Signup } from './pages/signup'


function App() {

    return (
        <>
            <BrowserRouter>
                <Routes>
                    <Route path="/signup" element={<Signup />} />
                    <Route path="/signin" element={<Signin />} />
                    <Route path="" element={<Signin />}></Route>
                </Routes>
            </BrowserRouter>
        </>
    )
}

export default App
JavaScript 
//components/Blogcard.jsx

import { Link } from "react-router-dom";

export const Blogcard = ({ id, authorName, title, 
    content, publishedDate }) => {
    return (
        <Link to={`/blog/${id}`}>
            <div className="border-b border-slate-200 p-4
             w-screen max-w-screen-md cursor-pointer">
                <div className="flex w-full">
                    <div className="flex justify-center flex-col">
                        <Avatar name={authorName} />
                    </div>
                    <div className="font-extralight pl-2
                     flex justify-center flex-col">
                        {authorName}
                    </div>
                    <div className="flex justify-center flex-col pl-2">
                        <Circle></Circle>
                    </div>
                    <div className="pl-2 font-thin text-slate-500
                     flex justify-center flex-col">
                        {publishedDate}
                    </div>
                </div>
                <div className="pt-3 text-xl font-semibold">{title}</div>
                <div className="pt-1 text-md font-thin">
                    {convHtml(content).slice(0, 100) + "..."}
                </div>
                <div className="text-slate-400 test-sm font-thin pt-4">
                    {`${Math.ceil(content.length / 500)} 
                     minute(s) read`}
                </div>
            </div>
        </Link>
    );
};

export function Circle() {
    return <div className="bg-slate-400 w-1 h-1 rounded-full"></div>;
}
export function Avatar({ name }) {
    return (
        <div className="relative inline-flex items-center justify-center
         w-7 h-7 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
            <span className="font-medium text-gray-600 dark:text-gray-300">
                {name[0]}
            </span>
        </div>
    );
}

function convHtml(html) {
    const plainText = html.replace(/<\/?[^>]+(>|$)/g, "");
    return plainText;
}
JavaScript 
// frontend/src/components/Appbar.jsx

import { Link } from "react-router-dom"
import { Avatar } from "./Blogcard"

export const AppBar = () => {
    return <div className="py-2 border-b flex
     justify-between px-10">
        <Link to={'/blogs'}>
            <div className="pt-2">
                Medium
            </div>
        </Link>
        <div >
            <Link to={'/publish'}>
                <button type="button" className="text-white
             bg-green-700 hover:bg-green-800 focus:outline-none
              focus:ring-4 focus:ring-green-300 font-medium 
              rounded-full text-sm px-5 py-2.5 text-center
               me-5" >Publish</button>
            </Link>
            <Avatar name={localStorage.getItem("Username")}>

            </Avatar>
        </div>
    </div>
}
JavaScript 
//components/BlogPage.jsx

import { AppBar } from "./Appbar"
import { Avatar } from "./Blogcard"
import parse from 'html-react-parser'

export const BlogPage = ({ blog }) => {
    const RederedC = parse(blog.content)
    console.log(RederedC)
    return (<div>
        <AppBar name={blog.author.Username} />
        <div className="grid grid-cols-12 px-10 w-full
     pt-12 max-w-screen-2xl">
            <div className=" col-span-8">
                <div className="text-5xl font-extrabold">
                    {blog.title}
                </div>
                <div className="text-slate-500 pt-2">
                    Posted on 2nd Dec 2032
                </div>
                <div className="pt-4">
                    {RederedC}
                </div>
            </div>
            <div className="col-span-4">
                <div className="text-slate-600">
                    Author
                </div>
                <div className="flex">
                    <div className="pr-2 flex justify-center flex-col">
                        <Avatar name={blog.author.Username || "Anon"}></Avatar>
                    </div>
                    <div>
                        <div className="text-xl font-bold">
                            {blog.author.Username || "Anonymous"}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    )
}
JavaScript 
//components/tinytext.jsx

import React, { useRef, useState } from "react";
import { Editor } from "@tinymce/tinymce-react";
import { BACKEND_URL } from "../config";
import axios from "axios";
import { useNavigate } from "react-router-dom";

export function Editortiny() {
    const editorRef = useRef(null);
    const [title, stitle] = useState("");

    let ctemp = "";
    const navigate = useNavigate();

    async function sendRequest() {
        try {
            const lk = `${BACKEND_URL}/api/v1/blog/post`;
            if (ctemp === "") {
                console.log("input empty");
                return;
            }

            const response = await axios.post(
                lk,
                {
                    title: title,
                    content: ctemp,
                },
                {
                    headers: {
                        Authorization: localStorage.getItem("token"),
                    },
                }
            );

            navigate(`/blog/${response.data.id}`);
        } catch (e) { }
    }
    const savedata = async () => {
        if (editorRef.current) {
            ctemp = await editorRef.current.getContent();
            sendRequest();
        } else {
            return null;
        }
    };

    return (
        <div>
            <div className="flex justify-center w-full pt-8">
                <div className="max-w-screen-lg w-full me-20">
                    <input
                        onChange={(e) => {
                            stitle(e.target.value);
                        }}
                        className="m-5  bg-gray-50 border border-gray-300
                         text-gray-900 text-sm rounded-lg 
                         focus:ring-blue-500 focus:border-blue-500
                          block w-full p-2.5"
                        placeholder="Title"
                    />
                </div>
            </div>
            <div className="p-6">
                <Editor
                    apiKey="YOUR_API_KEY"
                    onInit={(evt, editor) =>
                        (editorRef.current = editor)}
                    initialValue="<p>This is the initial content
                     of the editor.</p>"
                    init={{
                        height: 750,
                        menubar: false,
                        plugins: [
                            "advlist",
                            "autolink",
                            "lists",
                            "link",
                            "image",
                            "charmap",
                            "preview",
                            "anchor",
                            "searchreplace",
                            "visualblocks",
                            "code",
                            "fullscreen",
                            "insertdatetime",
                            "media",
                            "table",
                            "code",
                            "help",
                            "wordcount",
                        ],
                        toolbar:
                            "undo redo | blocks | " +
                            "bold italic forecolor | alignleft aligncenter " +
                            "alignright alignjustify | bullist numlist outdent indent | " +
                            "removeformat | help",
                        content_style:
                            "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
                    }}
                />
                <div className="flex justify-center flex-col pt-5">
                    <button
                        onClick={savedata}
                        type="button"
                        className="text-white bg-blue-700 hover:bg-blue-800
                         focus:outline-none focus:ring-4 focus:ring-blue-300
                          font-medium rounded-full text-sm px-5 py-2.5
                           text-center me-2 mb-2"
                    >
                        Submit
                    </button>
                </div>
            </div>
        </div>
    );
}
JavaScript 
//hooks/index.js

import { useEffect, useState } from "react";
import { BACKEND_URL } from "../config";
import axios from "axios";

export const useBlog = ({ id }) => {
    const [loading, setLoading] = useState(true);
    const [blog, setBlog] = useState(null);

    useEffect(() => {
        axios
            .get(`${BACKEND_URL}/api/v1/blog/${id}`, {
                headers: {
                    Authorization: localStorage.getItem("token"),
                },
            })
            .then((response) => {
                setBlog(response.data);
                setLoading(false);
            });
    }, [id]);
    getuname();
    return {
        loading,
        blog,
    };
};

export const useBlogs = () => {
    const [loading, setLoading] = useState(true);
    const [blogs, setBlogs] = useState([]);

    useEffect(() => {
        axios
            .get(`${BACKEND_URL}/api/v1/blog/bulk`, {
                headers: {
                    Authorization: localStorage.getItem("token"),
                },
            })
            .then((response) => {
                setBlogs(response.data.blogs);
                setLoading(false);
            });
    }, []);
    getuname();
    return {
        loading,
        blogs,
    };
};

const getuname = () => {
    useEffect(() => {
        axios
            .get(`${BACKEND_URL}/api/v1/blog/uname`, {
                headers: {
                    Authorization: localStorage.getItem("token"),
                },
            })
            .then((response) => {
                localStorage.setItem("Username", response.data.uname);
            });
    }, []);
};
JavaScript 
//pages/Blog.jsx

import { useParams } from "react-router-dom";
import { useBlog } from "../hooks";
import { BlogPage } from "../components/BlogPage";

export const Blog = () => {
    const { id } = useParams();
    const { loading, blog } = useBlog({
        id: id || ""
    });
    if (loading) {
        return <div>
            loading...
        </div>
    }
    return <div>
        <BlogPage blog={blog} />
    </div>
}
JavaScript 
//pages/Blogs.jsx

import { AppBar } from "../components/Appbar"
import { Blogcard } from "../components/Blogcard"
import { useBlogs } from "../hooks";

export const Blogs = () => {
    const { loading, blogs } = useBlogs();
    if (loading) {
        return <div>
            Loading...
        </div>
    }

    return (<div>
        <AppBar />
        <div className="flex justify-center">
            <div className="max-w-xl ">
                {blogs.map(blog => <Blogcard
                    authorName={blog.author.Username || "Anon"}
                    title={blog.title}
                    publishedDate={blog.createdAt.substring(0, 10)}
                    content={blog.content}
                    id={blog._id}>
                </Blogcard>)}
            </div>
        </div>
    </div>
    )
}
JavaScript 
//pages/publish.jsx

import { AppBar } from "../components/Appbar"
import { Editortiny } from "../components/tinytext"


export const Publish = () => {

    return <div>
        <AppBar />
        <Editortiny />
    </div>
}
JavaScript 
//App.jsx


import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { Signin } from './pages/signin'
import { Blog } from './pages/Blog'
import { Blogs } from './pages/Blogs'
import { Signup } from './pages/signup'
import { Publish } from './pages/publish'

function App() {

    return (
        <>
            <BrowserRouter>
                <Routes>
                    <Route path="/signup" element={<Signup />} />
                    <Route path="/signin" element={<Signin />} />
                    <Route path="/blog/:id" element={<Blog />} />
                    <Route path="/blogs" element={<Blogs />} />
                    <Route path="/publish" element={<Publish />}></Route>
                    <Route path="" element={<Signin />}></Route>
                </Routes>
            </BrowserRouter>
        </>
    )
}

export default App


Step 11. For the next step we will be using tinymce library, and you will need a API key to use there text editor
you can get one for free using the following steps:

  1. go to https://www.tiny.cloud/
  2. Log in or Signup to your account
  3. Go To https://www.tiny.cloud/my-account/integrate/#react to get your API Key.

To start the frontend run the following command

npm run dev

Output:

screen-capture

Blogging website



K
kunwar1234cx78
Improve
Next Article
Travel Journal App with MERN Stack with API

Similar Reads

Travel Journal App with MERN Stack with API
In this article, we are going to explore the project which is a travel journalling app, where users can log in and register, make journal entries describing the various places they traveled to, and also upload their images. They can search through the various entries they've made and also delete them. The website enables authentication and authoriz
25 min read
5 Simple Steps for Authentication and Authorization in MERN Stack
Implementing authentication and authorization in a MERN stack application is crucial for ensuring the security of your application and protecting sensitive data. Here's an elaboration on the five simple steps you can take to achieve this: Table of Content Implementing Authentication and Authorization in MERN App:How Authentication is done in MERN S
8 min read
Difference between MEAN Stack and MERN Stack
Web development is a procedure or process for developing a website. A website basically contains three ends: the client side, the server side, and the database. These three are different sides of an application that combine together to deliver an application; all ends are implemented separately with different technologies. MEAN and MERN are the tec
3 min read
MERN Stack vs Java Full Stack
A website is a collection of various web pages made by the most popular technologies, like HTML, CSS, and JavaScript, along with other front-end and back-end technologies. A website contains primarily three sides: a client side, a server side, and a database. When it comes to the three sides of a website complete together, it is called a stack. In
6 min read
Restaurant App using MERN Stack
Creating a Restaurant app will cover a lot of features of the MERN stack. In this tutorial, we'll guide you through the process of creating a restaurant application using the MERN stack. The application will allow users to browse through a list of restaurants, view their menus, and add items to a shopping cart. Preview of final output: Let us have
11 min read
Bookstore Ecommerce App using MERN Stack
Bookstore E-commerce project is a great way to showcase your understanding of full-stack development. In this article, we'll walk through the step-by-step process of creating a Bookstore E-commerce using the MERN (MongoDB, Express.js, React, Node.js) stack. This project will showcase how to set up a full-stack web application where users can view,
8 min read
Stock Market Portfolio App using MERN Stack
The Stock Market Portfolio project is a web application that helps to efficiently manage and track stock market investments and portfolios. In this article, we will see a step-wise process of building a Stock Market Portfolio using the power of the MERN stack. Project Preview: Let us have a look at how the final output will look like Prerequisites:
5 min read
Task Manager App using MERN Stack
Task Manager is very crucial to manage your tasks. In this article, we are going to develop a task manager application using the MERN stack. This application helps users to manage their tasks efficiently, offering essential features like creating new tasks, editing existing ones, and deleting tasks as needed. We'll walk through the step-by-step pro
10 min read
Quiz App using MERN Stack
In this article, we’ll walk through the step-by-step process of creating a complete quiz application with MongoDB, ReactJS, ExpressJS, and NodeJS. This application will provide users with a user-friendly interface for taking and submitting quizzes and a scoreboard to check their standing among others. Prerequisites:React JSMongoDBExpressJSNodeJSMER
15 min read
Note-Taking App with Status Tracker using MERN Stack
In this article, we will be creating a simple note-taking application with functionalities to create a note, delete a note, edit a note, and view the note. The project uses NodeJS as a backend server with Postman API to post and get the notes from the HTTP request. It uses ExpressJS as a framework in the backend and MongoDB to create a database and
15 min read
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox