Mern-web3 - A simple MERN stack application using React, Express, Mongo, and Web3 based authentication using MetaMask and Ethereum

Overview

machinellama/MERN-Web3

Quickly create a simple MERN stack application with key features pre-built and ready to run. Includes web3 login/authentication using MetaMask and Ethereum!

To run: yarn install and then yarn start to start the interactive CLI

  • Node and Yarn are required prerequisites
  • If using Mongo, make sure to download MongoDB, install, add bin folder to path, and run with mongod in a separate terminal

CLI

Running start will begin the CLI, which will ask for a new project name, whether you want both frontend and backend components, and ports for each. You can enter new values or press Enter for each question to accept default values.

Note: only a few questions are asked in the CLI; full configuration is in config.js (see below)

After answering questions:

  • A script will copy Webpack, Babel, Express, and React files to a new directory
  • Necessary dependencies will be installed via Yarn
  • The newly created React App can be run with yarn run dev:web (on port 5070 by default)
  • An Express server can be run by running yarn run dev (on port 4070 by default)
  • If you opted to only include frontend or backend components, the run command will just be yarn run dev for the one included

Demo of app created

screen-gif

Features

  • ReactJS
    • Functional components
    • React Routing
    • Framework for translations and themes
  • SCSS
  • MongoDB
  • Express
    • Example GET and POST endpoints
  • Authentication
    • Uses web3 and MetaMask wallet address for login (no username/password required)
  • TSOA
    • TypeScript based MVC framework for REST endpoints
  • Webpack
    • TypeScript, JavaScript, and SASS compilation
    • File resolution aliases
  • Babel
    • ES compilation
  • Prettier
    • Auto runs on commit using husky and lint-staged

Config (defaults can be changed in config.js)

config = {
  entryFile: './src/index.tsx',
  webpack: {
    htmlFilename: 'index.html',
    htmlTemplate: './public/index.html',
    openOnStart: true,
    outputFile: 'bundle.js',
    outputPath: 'dist',
    port: 5070
  },
  package: {
    author: 'author_name',
    description: 'This is a default description',
    license: 'MIT',
    projectName: 'new-project',
    repositoryType: 'git',
    repositoryURL: 'repository_url',
    version: '0.0.1'
  },
  manifest: {
    backgroundColor: '#ffffff',
    description: 'This is a description for the new project',
    display: 'fullscreen',
    icons: '[]',
    name: 'New Project Name',
    orientation: 'portrait',
    shortName: 'New Project Short Name',
    startURL: '/',
    themeColor: '#ffffff'
  },
  meta: {
    description: 'This is the meta description for the new project'
  },
  express: {
    port: 4070,
    url: 'http://localhost'
  },
  mongo: {
    port: '27017',
    url: 'mongodb://localhost'
  }
}

Donate

If you found this repo helpful and would like to donate, every bit helps!

  • BTC: bc1qr597jpxajrr5y32xxy9s90djwe27duug9jgvw5
  • ETH: 0x2c167e7C96a04218361197e1caADb1F9813c5cd9
  • DOGE: DMpw1DapRxRJoSJMA3rPWspggXQUXLwtnm
You might also like...
Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet

cronos-dapp-basic Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet You need to have node version 14

Web3-nft-dapp-tutorial - A simple web3 app for minting NFTs

Web3 - Full Tutorial The demo contains a basic web3 app and smart contract for m

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

arcinvoice.com MERN Stack Invoicing Application Built with the MERN stack (MongoDB, Express, React and NodeJS). Introduction Key Features Technologies

An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend.

An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend. All packages are structured as Yarn Workspaces and written in Typescript. In addition, the web application can be built as Docker image using a multi stage built supported Dockerfile.

An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express.
An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express.

An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express. A stack for building apps, front and back end, with just Javascript.

Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal
Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

Boilerplate with React client and Express backend written in TypeScript. Offers performance and extended functionality. Comes with SSR and without need to learn a framework. Helps to avoid frequent React-Express integration pitfalls.
Creador de tareas - MERN - MongoDB, Express, React y Node

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

Owner
"Never accept the world as it appears to be, dare to see it for what it could be"
null
Web3-citizens-app - React application based on smart contract using web3 and MetaMask extention.

Citizens App (web3-react-redux) React application based on smart contract using web3 and MetaMask extention. Start the applicarion Recomend to install

Denys Voloshyn 3 Aug 25, 2022
CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!

Book Collection List ?? Demonstration of the application | Features | Technologies used | Application installation ?? Demonstration of the application

Victor Lira 33 Nov 20, 2022
A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly.

Palo MERN boilerplate A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly on new projects. Commands: npm ins

Palo IT Singapore 10 Oct 31, 2022
This application is a decentralized version of instagram build using Ethereum & Metamask

Decentragram This application is a decentralized version of instagram build usin

null 3 Jun 28, 2022
A simple Ethereum prediction market boilerplate build on top of Moralis Web3 SDK + Ethereum Boilerplate + Chainlink + OpenZeppelin. Happy BUIIDL!

ethereum-prediction-market-boilerplate This Project is a fork of Ethereum Boilerplate and demostrates how you can build your own Ethereum Prediction M

Ethereum Boilerplates 40 Nov 25, 2022
Pet project using web3 to interact with Metamask and NeKoCoin

NekoCoin pet project A pet project for interact with ERC20 Neko Token on Binance Testnet Hand-crafted from scratches with ReactJS, Webpack, TailwindCS

Tung 5 Jan 19, 2022
A FULLSTACK Web Application built using MERN Stack (MongoDB, Express, React, Nodejs)

Socialize This is a FULLSTACK MERN Website. This Website uses Reactjs on the Fro

Shubham Patil 30 Nov 24, 2022
Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM

?? MERN Stack CRUD Application Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoos

Henok R. Bedassa 17 Nov 29, 2022
Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Scott Jason 7 Sep 21, 2022
QABAS AL ANI 1 May 29, 2022