MERN BLOG - Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN)

Overview

MERN BLOG

Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN)

Configuration and Setup

In order to run this project locally, simply fork and clone the repository or download as zip and unzip on your machine.

  • Open the project in your prefered code editor.
  • Go to terminal -> New terminal (If you are using VS code)
  • Split your terminal into two (run the Frontend on one terminal and the Backend on the other terminal)

In the first terminal

$ cd Frontend
$ npm install (to install frontend-side dependencies)
$ npm run  start (to start the frontend)

In the second terminal

  • cd Backend and Set environment variables in config.env under ./config
  • Create your mongoDB connection url, which you'll use as your MONGO_URI
  • Supply the following credentials
#  ---  Config.env  ---

NODE_ENV = development
PORT =5000
URI =http://localhost:3000
MONGO_URI =
JWT_SECRET_KEY =
JWT_EXPIRE = 60m
RESET_PASSWORD_EXPIRE = 3600000 

# Nodemailer

SMTP_HOST =smtp.gmail.com
SMTP_PORT =587
EMAIL_USERNAME = [email protected]
EMAIL_PASS = your_password
# --- Terminal ---

$ npm install (to install backend-side dependencies)
$ npm start (to start the backend)

Key Features

  • User registration and login
  • Authentication using JWT Tokens
  • Story searching and pagination
  • CRUD operations (Story create, read, update and delete)
  • Upload user ımages and story ımages to the server
  • Liking stories and adding stories to the Reading list
  • Commenting on the story
  • Skeleton loading effect
  • Responsive Design

Technologies used

This project was created using the following technologies.

Frontend

  • React js - JavaScript library that is used for building user interfaces specifically for single-page applications
  • React Hooks - For managing and centralizing application state
  • react-router-dom - To handle routing
  • axios - For making Api calls
  • Css - For User Interface
  • CK-Editor - Rich Text Editor
  • uuid - For random id generator
  • React icons - Small library that helps you add icons to your react apps.

Backend

  • Node js -A runtime environment to help build fast server applications using JS
  • Express js -The server for handling and routing HTTP requests
  • Mongoose - For modeling and mapping MongoDB data to JavaScript
  • express-async-handler - Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers
  • jsonwebtoken - For authentication
  • bcryptjs - For data encryption
  • Nodemailer - Send e-mails from Node.js
  • dotenv - Zero Dependency module that loads environment variables
  • multer - Node.js middleware for uploading files
  • slugify - For encoding titles into a URL-friendly format
  • cors - Provides a Connect/Express middleware

Database

  • MongoDB - It provides a free cloud service to store MongoDB collections.

Screenshots

picture1


login


register


picture2


picture7


picture5


picture3


picture4


picture6


forgotPassword

Author

License

MIT License

Copyright (c) 2022 Muhammet Yıldız

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

You might also like...
It concerns the solution of the desired task in applying for a job. MERN (MongoDB, Express, React, Node)
It concerns the solution of the desired task in applying for a job. MERN (MongoDB, Express, React, Node)

grocery-shopping-list It concerns the solution of the desired task in applying for a job. A shopping list application has been created using MERN (Mon

 Full-stack application example Using NodeJS + NestJS, React + SASS, MongoDB, NX monorepo
Full-stack application example Using NodeJS + NestJS, React + SASS, MongoDB, NX monorepo

Full-stack application example Using NodeJS + NestJS, React + SASS, MongoDB, NX monorepo

Most advanced open-source Headless CMS built in NodeJS and React. Written in Typescript!
Most advanced open-source Headless CMS built in NodeJS and React. Written in Typescript!

Burdy The most powerful and flexible open-source headless cms. We took the inspiration from WordPress plugin system (hooks and actions) and have built

Small training project in React, NodeJs, Express and MangoDB made in few days to learn React
Small training project in React, NodeJs, Express and MangoDB made in few days to learn React

🧑‍💻 ​ Small training project in React, NodeJs, Express and MangoDB made in few days to learn React 🧑‍💻 ​

A real-time webchat made using React, NodeJs/Express and Typescript. I intend to update the project with new functionalities and bug-corrections.

web-chat-real-time A real-time webchat made using React, NodeJs/Express and Typescript. I intend to update the project with new functionalities and bu

react-blog: a personal blog system written in React
react-blog: a personal blog system written in React

🖥️react-blog:用React写的一款个人博客系统,有博客展示页面和后台管理页面,可以管理文章、分类、标签、相册、说说、时间轴、留言、友链等信息。

Project Remix Blog - A Simple blog built with Remix (A Full Stack React Framework) and Prisma DB

Project Remix Blog - A Simple blog built with Remix (A Full Stack React Framework) and Prisma DB

Fullstack app using react, express and DataStax AstraDB

This was created on a live stream Tech used: ReactJS ExpressJS DataStax Folder structure: backend: RESTful API frontend: ui Environment variables requ

Financial Dashboard - Fullstack MERN app
Financial Dashboard - Fullstack MERN app

🌟 Financio | Financial Dashboard - Fullstack App 🌟 Link to App Use the Test User with some dummy data: E: [email protected] / P: test1234 Or signup a new

Comments
  • What is going here

    What is going here

    https://github.com/Muhammet-Yildiz/Mern-Blog/blob/226f8f15461961ea0a1f5aeb0435bdb62b61cdfc/Backend/Models/story.js#L66-L74

    why did you write this hook and why you don't need to call the next()

    opened by jewel109 1
  • Bump terser from 5.10.0 to 5.14.2 in /Frontend

    Bump terser from 5.10.0 to 5.14.2 in /Frontend

    Bumps terser from 5.10.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Can't Understand here . Need help.

    Can't Understand here . Need help.

    https://github.com/Muhammet-Yildiz/Mern-Blog/blob/ecd0a207e94b5950ff6d708226cdbbe1bbef6f96/Backend/Controllers/story.js#L90

    How to post {activeUser} in req.body?

    opened by jewel109 1
Owner
Muhammet Yıldız
Computer Engineering at Sakarya University
Muhammet Yıldız
Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

?? Shopping App ?? Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). ⚡️ ⚡️ ⚡️ Kiwi Shop ⚡️ ⚡️ ⚡️ ?? Table of contents Main

Tomiwa Adeyemi 9 Jul 27, 2022
Mernmap Open Source Application Built With The MERN(Mongodb , ExpressJS, ReactJS, NodeJS)

Meanmap MERNMAP is an interactive map for mern(MongoDB, ExpressJS, ReactJS, NodeJS) Stack Developers all over the world. It provides an avenue where a

Ayeni Olusegun 9 May 24, 2021
Bug-Blog - A Blogging Web App built with MERN Stack

Bug Blog It's a Blogging Web App built with MERN Stack , where users can create

Aaditya 9 Sep 16, 2022
A social-network project with MERN (MongoDb, Express, ReactJs, NodeJs) + tailwindCss

Introduction This is a social-network project with MERN (MongoDb, Express, ReactJs, NodeJs) + tailwindCss Page (Not logged) Home. Login. Register. For

Frost 29 Sep 13, 2022
MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.

MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.

oğulcan erişti 54 Sep 22, 2022
Payload - A free and open-source TypeScript headless CMS & application framework built with Express, MongoDB and React.

Payload A free and open-source TypeScript headless CMS & application framework built with Express, MongoDB and React. Features Completely free and ope

null 2 Aug 28, 2022
Backend for probook social media app using Nodejs, mongodb, express, jwt etc. Frontend is React, redux, material ui.

Probook - A social media app Probook App | A Social Media App An social media platform built using ReactJS, Redux Toolkit,Material UI, Node, Express,

Wasif Baliyan 21 Sep 26, 2022
E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

Jose Furtado 9 Jul 10, 2022
Discord-clone - Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Express, MongoDB and Redis

Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Ex

Milad Ranjbar 195 Sep 20, 2022
A fullstack DApp NFT Marketplace Made with NodeJS, Hardhat, Solidity, ReactJS, NextJS and Vercel.

??️ NFT Marketplace This is a fullstack DApp NFT Marketplace built as a study project to learn more about blockchain and smart contract development. M

John Oseni 3 Jun 5, 2022