amazingandyyy / Mern
Licence: mit
ð MERN stack 2.0 - MongoDB, Express, React/Redux, Node
Stars: â 175
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Mern
Angular Full Stack
Angular Full Stack project built using Angular, Express, Mongoose and Node. Whole stack in TypeScript.
Stars: â 1,261 (+620.57%)
Mutual labels: mongodb, express, expressjs, starter-kit, jwt, boilerplate
Mern Boilerplate
Fullstack boilerplate with React, Redux, Express, Mongoose, Passport Local, JWT, Facebook and Google OAuth out of the box.
Stars: â 112 (-36%)
Mutual labels: mongodb, express, fullstack, jwt, boilerplate
Starter Nodejs Rest
DEPRECATED!! Starter for a Node.js REST Application using MongoDB and JSON Web Token
Stars: â 29 (-83.43%)
Mutual labels: mongodb, express, starter-kit, jwt, boilerplate
Mevn Boilerplate
A fullstack boilerplate with Mongo, ExpressJS, VueJS and NodeJS.
Stars: â 277 (+58.29%)
Mutual labels: mongodb, expressjs, fullstack, boilerplate
Mevn Stack
A Quickstart for building an Express API with a VueJS Admin Portal
Stars: â 178 (+1.71%)
Mutual labels: mongodb, express, expressjs, boilerplate
Fullstack Apollo Express Mongodb Boilerplate
ð¥A sophisticated GraphQL with Apollo, Express and MongoDB boilerplate project.
Stars: â 301 (+72%)
Mutual labels: mongodb, starter-kit, fullstack, boilerplate
Rest Api Nodejs Mongodb
A boilerplate for REST API Development with Node.js, Express, and MongoDB
Stars: â 672 (+284%)
Mutual labels: mongodb, express, expressjs, boilerplate
Express Mongodb Rest Api Boilerplate
A boilerplate for Node.js apps / Rest API / Authentication from scratch - express, mongodb (mongoose).
Stars: â 153 (-12.57%)
Mutual labels: mongodb, express, jwt, boilerplate
Typescript Mern Starter
Build a real fullstack app (backend+website+mobile) in 100% Typescript
Stars: â 154 (-12%)
Mutual labels: mongodb, express, fullstack
Express Jwt
An example API for creating/verifying json web tokens
Stars: â 105 (-40%)
Mutual labels: express, expressjs, jwt
Tsmean
Typescript-mysql-express-angular-node seed for your next web-app!
Stars: â 173 (-1.14%)
Mutual labels: expressjs, starter-kit, boilerplate
Aqua
ð¡ A website and user system starter
Stars: â 1,391 (+694.86%)
Mutual labels: mongodb, starter-kit, boilerplate
Oh My Fullstack
ð Full stack web application skeleton (Next.js, Redux, RxJS, Immutable, Express)
Stars: â 99 (-43.43%)
Mutual labels: starter-kit, fullstack, boilerplate
Mean Stack Angular5 Crud
MEAN Stack (Angular 5) CRUD Web Application Example
Stars: â 107 (-38.86%)
Mutual labels: mongodb, express, expressjs
Boilerplate App
A curated directory of boilerplates to help you start your projects!
Stars: â 90 (-48.57%)
Mutual labels: starter-kit, boilerplate-template, boilerplate
Express Rest Boilerplate
âïž Express starter for building RESTful APIs
Stars: â 1,794 (+925.14%)
Mutual labels: mongodb, express, boilerplate
Mern Skeleton
A MERN stack skeleton web application [Full-Stack React Projects]
Stars: â 114 (-34.86%)
Mutual labels: mongodb, expressjs, jwt
Express Graphql Typescript Boilerplate
A starter kit for building amazing GraphQL API's with TypeScript and express by @w3tecch
Stars: â 163 (-6.86%)
Mutual labels: expressjs, starter-kit, boilerplate
Nodejs Rest Api Project Structure Express
Nodejs project structure practices for building RESTful APIs using Express framework and MongoDB.
Stars: â 134 (-23.43%)
Mutual labels: mongodb, express, expressjs
Fraternate
Fraternate is a standalone copy of the GitHub organization and user interaction framework. Built with Mongo dB | Node.js® | Express.js | Handlebars.js | Bootstrap.
Stars: â 130 (-25.71%)
Mutual labels: mongodb, expressjs, boilerplate
ð MERN Stack
MongoDB, Expressjs, React/Redux, Nodejs
MERN is a fullstack implementation in MongoDB, Expressjs, React/Redux, Nodejs.
MERN stack is the idea of using Javascript/Node for fullstack web development.
clone or download
$ git clone https://github.com/amazingandyyy/mern.git
$ npm i
project structure
LICENSE
package.json
server/
package.json
.env (to create .env, check [prepare your secret session])
client/
package.json
...
Usage (run fullstack app on your machine)
Prerequirements
notice, you need client and server runs concurrently in different terminal session, in order to make them talk to each other
Client-side usage(PORT: 3000)
$ cd client // go to client folder
$ npm i // npm install pacakges
$ npm run dev // run it locally
// deployment for client app
$ npm run build // this will compile the react code using webpack and generate a folder called docs in the root level
$ npm run start // this will run the files in docs, this behavior is exactly the same how gh-pages will run your static site
Server-side usage(PORT: 8000)
Prepare your secret
run the script at the first level:
(You need to add a JWT_SECRET in .env to connect to MongoDB)
// in the root level
$ echo "JWT_SECRET=YOUR_JWT_SECRET" >> ./server/src/.env
Start
$ cd server // go to server folder
$ npm i // npm install pacakges
$ npm run dev // run it locally
$ npm run build // this will build the server code to es5 js codes and generate a dist file
Heroku
Deploy Server to$ npm i -g heroku
$ heroku login
...
$ heroku create
$ npm run heroku:add <your-super-amazing-heroku-app>
// remember to run this command in the root level, not the server level, so if you follow the documentation along, you may need to do `cd ..`
$ pwd
/Users/<your-name>/mern
$ npm run deploy:heroku
After creating heroku
remember to update the file of client/webpack.prod.js
'API_URI': JSON.stringify('https://your-super-amazing-heroku-app.herokuapp.com')
Dependencies(tech-stacks)
Client-side | Server-side |
---|---|
axios: ^0.15.3 | bcrypt-nodejs: ^0.0.3 |
babel-preset-stage-1: ^6.1.18 | body-parser: ^1.15.2 |
lodash: ^3.10.1 | cors: ^2.8.1 |
react: ^16.2.0 | dotenv: ^2.0.0 |
react-dom: ^16.2.0 | express: ^4.14.0 |
react-redux: ^4.0.0 | jwt-simple: ^0.5.1 |
react-router-dom: ^4.2.2 | mongoose: ^4.7.4 |
redux: ^3.7.2 | morgan: ^1.7.0 |
redux-thunk: ^2.1.0 |
Screenshots of this project
User visit public and Home page
After signing in user can go to account route and make request to token-protected API endpoint
Standard
BUGs or comments
Create new Issues (preferred)
Email Me: [email protected] (welcome, say hi)
Author
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].