Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daoud-hussain/100-days-of-mern-practices
A repo for pushing the evolution of my MERN journey.
https://github.com/daoud-hussain/100-days-of-mern-practices
expressjs mongodb nextjs nodejs reactjs
Last synced: 4 days ago
JSON representation
A repo for pushing the evolution of my MERN journey.
- Host: GitHub
- URL: https://github.com/daoud-hussain/100-days-of-mern-practices
- Owner: Daoud-Hussain
- Created: 2023-10-15T12:18:46.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-10-29T08:03:26.000Z (about 1 year ago)
- Last Synced: 2023-10-30T08:27:18.914Z (about 1 year ago)
- Topics: expressjs, mongodb, nextjs, nodejs, reactjs
- Language: JavaScript
- Homepage:
- Size: 3.04 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🌐 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
```terminal
$ git clone https://github.com/Daoud-Hussain/100-Days-of-MERN-Practices
$ yarn # or npm i
```
## project structure
```terminal
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)
## Prerequisites
- [MongoDB](https://www.mongodb.com/)
- [Node](https://nodejs.org/en/download/) ^10.0.0
- [npm](https://nodejs.org/en/download/package-manager/)
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)
```terminal
$ cd client // go to client folder
$ yarn # or npm i // npm install packages
$ 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)
```terminal
// in the root level
$ cd server
$ echo "JWT_SECRET=YOUR_JWT_SECRET" >> src/.env
```
### Start
```terminal
$ cd server // go to server folder
$ npm i // npm install packages
$ npm run dev // run it locally
$ npm run build // this will build the server code to es5 js codes and generate a dist file
```
# 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 |
## Standard
[](https://github.com/standard/standard)
## BUGs or comments
[Create new Issues](https://github.com/Daoud-Hussain/100-Days-of-MERN-Practices/issues) (preferred)
Email Me: [email protected] (welcome, say hi)
## Author
[Daoud Hussain](https://daoud-hussain.github.io/Portfolio/)