{"id":30000669,"url":"https://github.com/abrahamspaa/mern","last_synced_at":"2026-04-11T12:03:12.487Z","repository":{"id":43525385,"uuid":"251504099","full_name":"abrahamspaa/MERN","owner":"abrahamspaa","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-05T18:01:34.000Z","size":2196,"stargazers_count":0,"open_issues_count":22,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-01-28T02:03:02.998Z","etag":null,"topics":["express","mongodb","mongoose","nodejs","reactjs","spectra"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abrahamspaa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-31T04:55:43.000Z","updated_at":"2020-04-02T14:05:33.000Z","dependencies_parsed_at":"2023-02-04T09:16:07.329Z","dependency_job_id":null,"html_url":"https://github.com/abrahamspaa/MERN","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/abrahamspaa/MERN","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abrahamspaa%2FMERN","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abrahamspaa%2FMERN/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abrahamspaa%2FMERN/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abrahamspaa%2FMERN/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abrahamspaa","download_url":"https://codeload.github.com/abrahamspaa/MERN/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abrahamspaa%2FMERN/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268837802,"owners_count":24314984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-05T02:00:12.334Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","mongodb","mongoose","nodejs","reactjs","spectra"],"created_at":"2025-08-05T05:12:09.200Z","updated_at":"2026-04-11T12:03:12.405Z","avatar_url":"https://github.com/abrahamspaa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MERN Stack \n\nMongo Express React Node (MERN) is web stack we will be using there\n\n## Objective \n\nCreate a simple post code search, which will have two screen.\n\nScreen 1 for fetching post detail from the data base. Input will be post code. Output will be details\nScreen 2 for adding postcode and detail into the data base. Input will be post code and details. Output will be Successfull message.\n\n## Despcrition \n\n| Technologies  | Type          |\n| ------------- |:-------------:|\n| Mongo         | Database      |\n| Express       | Back End      |\n| React         | Front End     |\n| Node          | Back End      |\n\n## Front End \n\nWe are using react JavaScript libary as a front end.\n\n\n### How to create ?\n\nStep 1: Create React project. Below code will install all dependencies\n```\nnpx create-react-app front-end\n```\nStep 2: To Start the application. (this will automatically opens React app on the browsers in new window) \n```\ncd front-end \u0026\u0026 npm start or yarn start\n```\nStep 3: Remove unwanted code, after removing  \n```js\n// front-end/src/App.js\n\nimport React from 'react';\nimport './App.css';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        Hello\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n\n```\n\n```css\n// front-end/src/App.css\n\n.App {\n  text-align: center;\n}\n\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n```\nStep 4: Install CSS library we are going to use spectre here \n```\nyarn add spectre.css @react-spectre/button @react-spectre/form or npm install spectre.css @react-spectre/button @react-spectre/form --save // this should be install inside front-end folder\n```\nStep 5: Import CSS library into our application on the top \n```css\n// front-end/src/App.css\n\n@import '~spectre.css/dist/spectre.min.css';\n\n```\nStep 6: Create a new PostCodeSearch component\n\n```\nmkdir src/PostCodeSearch \u0026\u0026 cd src/PostCodeSearch \u0026\u0026 touch index.js \u0026\u0026 cd ../../\n```\nStep 7: Import PostCodeSearch component into Main App\n\n```js\n// front-end/src/PostCodeSearch/index.js\n\nimport React from 'react';\n\nexport default class PostCodeSearch extends React.Component {\n  render() {\n    return (\u003ch2\u003eNow you can see PostCodeComponent\u003c/h2\u003e);\n  }\n}\n\n// front-end/src/App.js\nimport PostCodeSearch from './PostCodeSearch';\nimport React from 'react';\nimport './App.css';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        Welcome to Search\n        \u003cPostCodeSearch /\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\nStep 8: Add PostCode fields and button \n\n```js\n// front-end/src/PostCodeSearch/index.js\n\nimport { FormGroup, Input } from '@react-spectre/form';\nimport { Button } from '@react-spectre/button';\nimport React from 'react';\n\nexport default class PostCodeSearch extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      postCode: ''\n    };\n  }\n\n  handleChange(event) {\n    const { name, value } = event.target;\n\n    this.setState({\n      [name]: value\n    });\n  }\n\n  render() {\n    return (\n      \u003cform\u003e\n        \u003cFormGroup label=\"Postcode\"\u003e\n          \u003cInput \n            name=\"postCode\"\n            placeholder=\"Ex: 6000056\" \n            value={this.state.postCode} \n            onChange={event =\u003e this.handleChange(event)} /\u003e\n        \u003c/FormGroup\u003e\n\n        \u003cButton primary loading={false}\u003eSearch\u003c/Button\u003e\n      \u003c/form\u003e\n    );\n  }\n}\n```\nStep 9: Add Post Code Validation and Submit Validation \n\n```js\n// front-end/src/PostCodeSearch/index.js\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      postCode: '',\n      postCodeError: false\n    };\n  }\n  \n  isPostCodeValid = postCode =\u003e new RegExp('^[1-9][0-9]{5}$').test(postCode);\n\n  handleChange(event) {\n    const { name, value } = event.target;\n\n    this.setState({\n      [name]: value\n    });\n    \n    if (name === 'postCode') {\n      this.setState({ \n        postCodeError: !this.isPostCodeValid(value)\n      });\n    }\n    \n  }\n  \n  onSubmit(event) {\n\n    if (this.isPostCodeValid(this.state.postCode)) {\n      // Code for ajax\n    } else {\n      this.setState({ \n        postCodeError: true\n      });\n    }\n\n    event.preventDefault();\n  }\n\n  render() {\n    return (\n      \u003cform onSubmit={event =\u003e this.onSubmit(event)}\u003e\n        \u003cFormGroup label=\"Postcode\" className={ this.state.postCodeError ? 'has-error' : '' }\u003e\n          \u003cInput \n            name=\"postCode\"\n            placeholder=\"Ex: 6000056\" \n            value={this.state.postCode} \n            onChange={event =\u003e this.handleChange(event)} /\u003e\n          { \n            this.state.postCodeError ? \n              \u003cp className='form-input-hint'\u003ePlease enter valid post code\u003c/p\u003e : \n              '' \n          }\n        \u003c/FormGroup\u003e\n\n        \u003cButton primary loading={false}\u003eSearch\u003c/Button\u003e\n      \u003c/form\u003e\n    );\n  }\n}\n```\nStep 10: To Fetch the data, we need API's, so please follow Back End below till Step 5 to create a API and come back here.\n\n```js\n// front-end/src/PostCodeSearch/index.js\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      data: [],\n      postCode: '',\n      postCodeError: false\n    };\n  }\n  \n  handleChange(event) {\n    ....\n    if (name === 'postCode') {\n      this.setState({\n        data: [],\n        error: '',\n        postCodeError: !this.isPostCodeValid(value)\n      });\n    }\n  }\n  \n  async getPostCodeDetails(postcode) {\n    const host = 'http://localhost:3002',\n      url = `${host}/api/postcode?postcode=${postcode}`;\n  \n    return await (await (fetch(url))).json();\n  }\n\n  async onSubmit(event) {\n    event.preventDefault();\n\n    const postCode = this.state.postCode;\n\n    if (this.isPostCodeValid(postCode)) {\n      try {\n        const { error, data = [] } = await this.getPostCodeDetails(postCode);\n\n        this.setState({ data, error });\n      } catch (error) {\n        console.error('error', error);\n        this.setState({ error });\n      }\n    } else {\n      this.setState({ \n        postCodeError: true\n      });\n    }\n  }\n  \n  render() {\n    return (\n      \u003cReact.Fragment\u003e\n        { \n          this.state.error ? \n            \u003cdiv className='toast toast-error'\u003e{this.state.error.message}\u003c/div\u003e : \n            '' \n        }\n        \u003cform onSubmit={event =\u003e this.onSubmit(event)}\u003e\n          \u003cFormGroup label=\"Postcode\" className={ this.state.postCodeError ? 'has-error' : '' }\u003e\n            \u003cInput \n              name=\"postCode\"\n              placeholder=\"Ex: 6000056\" \n              value={this.state.postCode} \n              onChange={event =\u003e this.handleChange(event)} /\u003e\n            { \n              this.state.postCodeError ? \n                \u003cp className='form-input-hint'\u003ePlease enter valid post code\u003c/p\u003e : \n                '' \n            }\n          \u003c/FormGroup\u003e\n\n          \u003cButton primary loading={false}\u003eSearch\u003c/Button\u003e\n        \u003c/form\u003e\n\n        {\n          this.state.data.map(({ office, type, district, state }, index) =\u003e (\n            \u003cdiv key={index.toString()} className=\"card bg-primary m-1\"\u003e\n              \u003cdiv className=\"card-header\"\u003e\n                \u003cdiv className=\"card-title h5\"\u003e{office}\u003c/div\u003e\n                \u003cdiv className=\"card-subtitle\"\u003e{type}\u003c/div\u003e\n              \u003c/div\u003e\n              \u003cdiv className=\"card-body\"\u003e\n                {district}, {state}\n              \u003c/div\u003e\n            \u003c/div\u003e\n          ))\n        }\n      \u003c/React.Fragment\u003e\n    );\n  }\n\n```\n\n\n\n## Back End\n\nWe will be using Express library and Node Js\n\n### How to create ?\n\nStep 1: Installation of [Node JS](https://nodejs.org/en/download/) \n\nStep 2: Install Express JS and open http://localhost:3002/\n```\nnpx express-generator back-end --no-view \u0026\u0026 cd back-end \u0026\u0026 npm i or yarn \u0026\u0026 npm i cors or yarn add cors\n```\n```js\n// back-end/bin/www\n// change 3000 to 3002\n\nvar port = normalizePort(process.env.PORT || '3002');\n\n// back-end/app.js\nconst cors = require('cors');\n...\nvar app = express();\n\napp.use(cors());\napp.use(logger('dev'));\n```\n```\nnpm start or yarn start\n```\n\nStep 3: Create a route postcode api\n```\nmkdir back-end/routes/postcode \u0026\u0026 cd back-end/routes/postcode \u0026\u0026 touch index.js\n```\nStep 4: Code for postcode. After the every change in the code please stop(cntrl + c) and start (npm start or yarn start) server in terminal or command prompt \n```js\n// back-end/routes/postcode/index.js\n\nconst router = require('express').Router();\n\nrouter.get('/', function(req, res, next) {\n  res.send('Post code value');\n});\n\nmodule.exports = router;\n\n// back-end/app.js\nvar usersRouter = require('./routes/users');\nconst postCodeRouter = require('./routes/postcode');\n\n....\n\napp.use('/users', usersRouter);\napp.use('/api/postcode', postCodeRouter);\n\n```\nStep 5: Adding logic for getting data based on query params\n```js \n// back-end/routes/postcode/index.js\n\nrouter.get('/', function(request, respond) {\n  const postcode = request.query.postcode;\n  const postOffices = {\n    data: [\n      {\n        office: 'Iyyappanthangal',\n        type: 'Sub Office',\n        district: 'Kanchipuram',\n        state: 'Tamil Nadu'\n      },\n      {\n        office: 'Kattupakkam',\n        type: 'Branch Office',\n        district: 'Tiruvallur',\n        state: 'Tamil Nadu'\n      },\n      {\n        office: 'Poonamallee East',\n        type: 'Sub Office',\n        district: 'Tiruvallur',\n        state: 'Tamil Nadu'\n      },\n      {\n        office: 'Senneerkuppam',\n        type: 'Branch Office',\n        district: 'Tiruvallur',\n        state: 'Tamil Nadu'\n      }\n    ]\n  };\n\n  if (postcode === '600056') {\n    return respond.send(postOffices);\n  } else {\n    return respond.status(404).send({\n      error: {\n        message: `The ${postcode} not Found..!`\n      }\n    });    \n  }\n  \n});\n```\nStep 6: Install mongodb - [Read More](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/) Connecting to mongodb \n```\nyarn add mongoose or npm i mongoose\n```\n```js\n//back-end/App.js\n\nconst mongoose = require('mongoose');\n \nmongoose.connect(\n  'mongodb://localhost:27017/postcode', \n  {\n    useNewUrlParser: true,\n    useUnifiedTopology: true\n  }, \n  err =\u003e {\n    if (!err) {\n      console.log('Successfully Established Connection with MongoDB')\n    } else {\n      console.log(`Failed to Establish Connection with MongoDB with Error: ${err}`)\n    }\n  }\n);\n```\nStep 7: Create model for postcode \n```\ncd back-end/routes/postcode \u0026\u0026 touch model.js \u0026\u0026 cd ../../\n```\n```js \n// back-end/routes/postcode/model.js \n\nconst { model, Schema } = require('mongoose');\n\nexport default model('postpin', new Schema({\n  code: {\n    type: Number,\n    required: 'Post code is missing'\n  },\n  office: {\n    type: String, \n    required: 'Post office is missing'\n  },\n  district: {\n    type: String, \n    required: 'Post district is missing'\n  },\n  state: {\n    type: String, \n    required: 'Post state is missing'\n  },\n  type: {\n    type: String, \n    required: 'Type of post office is missing'\n  }\n}));\n```\nStep 8: Insert records for post code \n\n```\n// mongo shell\nmongo\n\n\u003e use postcode\n\u003e db.postpins.insertMany([\n    {\n        code: 600056,\n        office: 'Iyyappanthangal',\n        type: 'Sub Office',\n        district: 'Kanchipuram',\n        state: 'Tamil Nadu'\n      },\n      {\n        code: 600056,\n        office: 'Kattupakkam',\n        type: 'Branch Office',\n        district: 'Tiruvallur',\n        state: 'Tamil Nadu'\n      },\n      {\n        code: 600056,\n        office: 'Poonamallee East',\n        type: 'Sub Office',\n        district: 'Tiruvallur',\n        state: 'Tamil Nadu'\n      },\n      {\n        code: 600056,\n        office: 'Senneerkuppam',\n        type: 'Branch Office',\n        district: 'Tiruvallur',\n        state: 'Tamil Nadu'\n      }\n])\n```\nStep 8: Wiring up model and controller \n\n```js\n// back-end/routes/postcode/index.js \n\nconst router = require('express').Router();\nconst model = require('./model');\n\nrouter.get('/', async function(request, respond) {\n  const postcode = request.query.postcode;\n\n  try {\n    const postOffices = await model.find({ code: postcode })\n\n    if (postOffices \u0026\u0026 postOffices.length) {\n      return respond.send({\n        data: postOffices\n      });\n    } else {\n      return respond.status(404).send({\n        error: {\n          message: `The ${postcode} not Found..!`\n        }\n      });    \n    }\n  } catch (error) {\n    console.error(error)\n    return respond.status(500).send({\n      error: {\n        message: `Server error ${error}`\n      }\n    }); \n  }\n});\n\nmodule.exports = router;\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabrahamspaa%2Fmern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabrahamspaa%2Fmern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabrahamspaa%2Fmern/lists"}