Skip to content

📋 Full stack app using React as the frontend with a node.js/express/MongoDB with Mongoose backend

Notifications You must be signed in to change notification settings

AndrewJBateman/mern-stack-tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚡ MERN Full Stack Tracker

  • Mongo Express React Node (MERN) full-stack app, integrates React frontend with Node.js backend.
  • Tutorial code - see 👏 Inspiration below but with customisations - particularly the mongoose connection script is more detailed and react frontend table has proper Bootstrap buttons to avoid error messages with edit & delete links.
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 General info

📚 Backend

  • MongoDB Atlas used as the backend database - requires mongodb to be running (or use Mongoose and Heroku mLab to access)
  • Mongoose models used to interact with the database
  • Postman used to test the backend, although the tutorial uses Insomnia, a similar REST API
  • Note: I used 'my ip address' as the whitelist network access in MongoDB.Atlas but this required daily updating when my ip address changed - otherwise with a non-matching ip address the backend simply did not work. Better to use the localhost address to avoid this problem but may be less secure.
  • Node.js routes used with controller functions
  • Nodejs diagram

📚 Frontend

  • React frontend includes a very simple Bootstrap navbar with just 3 links: home (the complete list of users/exercises), Add Exercise & Add User
  • Main content is a React table with 5 columns - see screenshots for details

📷 Screenshots

Backend screenshot Backend screenshot

Frontend screenshot Frontend screenshot Frontend screenshot

📶 Backend Technologies

📶 Frontend Technologies

💾 Setup - Backend

  • Change to /backend directory
  • Install dependencies using npm i
  • Install nodemon globally if you don't already have it
  • Register with MongoDB Atlas, create & configure a database cluster and add cluster connection string to .env file
  • Run nodemon server for a dev server
  • Navigate to http://localhost:5000/. The server will automatically reload if you change any of the source files

💾 Setup - Frontend

  • From top-level directory mern-stack-tracker run npm start. Frontend will open at http://localhost:3000/

💻 Code Examples

  • Extract from server.js - connects to database using mongoose
const uri = process.env.ATLAS_URI;
const options = {
  useNewUrlParser: true,
  useCreateIndex: true,
  useUnifiedTopology: true
}

mongoose
  .connect(uri, options)
  .catch(error => console.log(error));

const connection = mongoose.connection;
connection.once('open', () => {
console.log("MongoDB database connection established successfully");
});
mongoose.connection.on('error', err => {
  logError('mongoose connection error', err);
});
  • Extract from exercise-list.js - using lifecycle method componentDidMount() to get list of exercises from backend database using Axios http client, after component output has been rendered to the DOM
  componentDidMount() {
    axios.get('http://localhost:5000/exercises/')
      .then(response => {
        this.setState({ exercises: response.data })
      })
      .catch((error) => {
        console.log(error);
      })
  }

🆒 Backend Features

  • All data stored in collections in a mongoDB Atlas database that costs nothing to use in the free tier option. Data can be edited from the mongoDB.Atlas collection or from within the React frontend

🆒 Frontend Features

📋 Status & To-Do List

  • Status: Working full-stack app
  • To-Do: Nothing

👏 Inspiration

📁 License

  • N/A.

✉️ Contact