A lightweight message board made with MongoDB, Express, React, and NodeJS

Related tags

React Apps nodejs javascript mongodb mongoose rest-api mern hacktoberfest message-board
Overview

💬 Mini message board

browser view

A lightweight message board made with MongoDB, Express, React, and NodeJS.

📚 Libraries and tools used

Frontend

  • React: Frontend design
  • Axios: GET/POST requests with backend

Backend

  • Node: Backend environment.
  • Express: Requests management
  • Mongoose: MongoDB connection and object modeling
  • CORS: Library to allow CORS
  • Nodemon (dev): Library to hot reload the server on change

Database

Deployment

  • Docker: Project bundler in OS-level virtualization containers to work in any environment

⚙️ Run the app

Default ports:

  • Backend: 8000
  • Frontend: 3000
  • MongoDB: 27017

Option 1 (recommended): 🐳 Docker

Download the source code

git clone https://github.com/alesbe/mini-message-board.git
cd mini-message-board

Run Docker Compose

docker-compose up

Option 2: Run the project yourself

You'll need 3 different terminals, because each part works individually and does not support detached mode without docker.

1.- Setup database

Download mongodb and start the process

mongod

2.- Download the source code

git clone https://github.com/alesbe/mini-message-board.git
cd mini-message-board

3.- Setup backend server

Go to server folder and install dependencies

cd server
npm install

Then, start the server

node server.js

4.- Setup frontend

Go to project root folder and cd into client, then, install dependencies

cd client
npm install

Then, start the client

npm start
You might also like...
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
A kanban board, project and idea management app built with React and IndexedDB
A kanban board, project and idea management app built with React and IndexedDB

Roadmap A kanban board, project and idea management app built with React and IndexedDB. Demo Visit the live app Features Create boards, stories Captur

Naresh Bhusal 10 Dec 28, 2022
Bored Room - a web platform designed for people to play modern board games online with friends and strangers both asynchronously and in real time
Bored Room - a web platform designed for people to play modern board games online with friends and strangers both asynchronously and in real time

Bored Room - a web platform designed for people to play modern board games online with friends and strangers both asynchronously and in real time

null 1 May 8, 2022
A Kanban board app coded in React and with Beautiful D'n'D library.
A Kanban board app coded in React and with Beautiful D'n'D library.

A Kanban board app coded in React and with Beautiful D'n'D library. The board allows users to create, edit or cancel tasks and to organize them between columns.

Agnieszka Urbanowicz 9 Apr 1, 2022
A teaching tool to introduce youth to the concept of investing and the benefits of long-term investment. (React, NodeJS, Express, PostgreSQL, Socket.io)
A teaching tool to introduce youth to the concept of investing and the benefits of long-term investment. (React, NodeJS, Express, PostgreSQL, Socket.io)

SmartMoney is an app that teachers can use to introduce students to the concept of investment and show them how it is a smart way to grow their money.

Kurtis Grant 2 Apr 4, 2022
Yet another Kanban/Trello board lib for React.
Yet another Kanban/Trello board lib for React.

Yet another Kanban/Trello board lib for React. ▶️ Demo Usage ❓ Why? 👊 Reliable: 100% tested on CI; 100% coverage; 100% SemVer. 🎮 Having fun: Play wi

ASSEINFO 591 Dec 28, 2022
Kanmail - An email client that functions like a kanban board, for Mac/Windows/Docker
Kanmail - An email client that functions like a kanban board, for Mac/Windows/Docker

Kanmail - An email client that functions like a kanban board, for Mac/Windows/Docker

Oxygem 1.2k Jan 7, 2023
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.

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
Message in a Bottle is an interactive application where users can discover stories about the communities around them.

Message In a Bottle Find Places That Tell Stories Explore the docs » Deploy Link · Report Bug · Request Feature · Project Spec Table of Contents About

null 4 Jan 13, 2022
Comments
  • [FEAT]: Replace `localhost:8000/` text with some info

    [FEAT]: Replace `localhost:8000/` text with some info

    When running the app, accessing the server root path (localhost:8000 by default) from the browser displays Hello world!, It would be great to display some info. This is the line to be modified:

    https://github.com/alesbe/mini-message-board/blob/973cc3600b083449723279affe7278977788bafd/server/routes/home.js#L6

    Some info ideas:

    • Display server endpoints (for now /: this same page, /messages: endpoint to post and get messages)
    • Display where the frontend is running (port 3000 by default)
    • Display link to this repository
    • Anything you want!

    This server endpoint it's not intended to be accessed from the browser, so no HTML should be displayed!

    Be creative and add any cool ideas, happy hacking! 🙌

    documentation help wanted good first issue first timers only hacktoberfest 
    opened by alesbe 8
  • Fixed the issue : Replace localhost:8000/ text with some info #3

    Fixed the issue : Replace localhost:8000/ text with some info #3

    I have redirected the user to "http://localhost:3000" whenever they enter in "http://localhost:8000" Additional : Also if you want to redirect them to some other [url]:3000 then just change the URL in the "redirect" function added

    opened by meetagrawal09 3
  • [FEAT]: Replace `localhost:8000/` text with some info

    [FEAT]: Replace `localhost:8000/` text with some info

    When running the app, accessing the server root path (localhost:8000 by default) from the browser displays Hello world!, It would be great to display some info. This is the line to be modified:

    https://github.com/alesbe/mini-message-board/blob/973cc3600b083449723279affe7278977788bafd/server/routes/home.js#L6

    Some info ideas (don't copy the same exact text!):

    • Display server endpoints (for now /: this same page, /messages: endpoint to post and get messages)
    • Display where the frontend is running (port 3000 by default)
    • Display link to this repository

    If you could do this without creating extra files, like an HTML would be great! This server endpoint it's not intended to be accessed from the browser, so no HTML should be displayed!

    Be creative and add any cool ideas! 🙌

    enhancement good first issue first timers only 
    opened by alesbe 1
Owner
alesbe
Check my readme! 🤠
alesbe
GitHub
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 10 Dec 23, 2022
MERN BLOG - Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN)

MERN BLOG Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN) Configuration and Setup Key Features Technologi

Muhammet Yıldız 25 Dec 21, 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 11 Jan 2, 2023
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 205 Dec 18, 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 22 Sep 30, 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 33 Dec 1, 2022
Zomato clone with Reactjs, MongoDB, Express , Nodejs, HTML, CSS, Bootstrap, firebase

Zomato is an Indian multinational restaurant aggregator and food delivery company founded by Deepinder Goyal and Pankaj Chaddah in 2008. Zomato provides information, menus and user-reviews of restaurants as well as food delivery options from partner restaurants in select cities. As of 2019, the service is available in 24 countries and in more than 10,000 cities.

pooja yadav 11 Dec 3, 2022
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

João Melo 1 Nov 14, 2022
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 ??‍?? ​

Amine Zouitine 5 Aug 18, 2022
Full-stack application example Using NodeJS + NestJS, React + SASS, MongoDB, NX monorepo

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

null 48 Dec 23, 2022