├── public
├── favicon.ico
├── manifest.json
└── index.html
├── src
├── index.js
├── App.test.js
├── index.css
├── App.css
├── components
│ ├── navbar.component.js
│ ├── create-user.component.js
│ ├── exercises-list.component.js
│ ├── create-exercise.component.js
│ └── edit-exercise.component.js
├── App.js
├── logo.svg
└── serviceWorker.js
├── README.md
├── backend
├── models
│ ├── user.model.js
│ └── exercise.model.js
├── package.json
├── routes
│ ├── users.js
│ └── exercises.js
├── server.js
└── package-lock.json
├── .gitignore
└── package.json
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/beaucarnes/mern-exercise-tracker-mongodb/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(, document.getElementById('root'));
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Code for MERN tutorial.
2 |
3 | Video Tutorial: https://www.youtube.com/watch?v=7CqJlxBYj-M
4 |
5 | Article Tutorial: https://medium.com/@beaucarnes/learn-the-mern-stack-by-building-an-exercise-tracker-mern-tutorial-59c13c1237a1
6 |
7 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
8 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/backend/models/user.model.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 |
3 | const Schema = mongoose.Schema;
4 |
5 | const userSchema = new Schema({
6 | username: {
7 | type: String,
8 | required: true,
9 | unique: true,
10 | trim: true,
11 | minlength: 3
12 | },
13 | }, {
14 | timestamps: true,
15 | });
16 |
17 | const User = mongoose.model('User', userSchema);
18 |
19 | module.exports = User;
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | backend/node_modules
6 | /.pnp
7 | .pnp.js
8 |
9 | # testing
10 | /coverage
11 |
12 | # production
13 | /build
14 |
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
--------------------------------------------------------------------------------
/backend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "backend",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "body-parser": "^1.19.0",
14 | "cors": "^2.8.5",
15 | "dotenv": "^8.0.0",
16 | "express": "^4.16.4",
17 | "mongoose": "^5.5.7"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/backend/models/exercise.model.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 |
3 | const Schema = mongoose.Schema;
4 |
5 | const exerciseSchema = new Schema({
6 | username: { type: String, required: true },
7 | description: { type: String, required: true },
8 | duration: { type: Number, required: true },
9 | date: { type: Date, required: true },
10 | }, {
11 | timestamps: true,
12 | });
13 |
14 | const Exercise = mongoose.model('Exercise', exerciseSchema);
15 |
16 | module.exports = Exercise;
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Exercise Tracker
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/backend/routes/users.js:
--------------------------------------------------------------------------------
1 | const router = require('express').Router();
2 | let User = require('../models/user.model');
3 |
4 | router.route('/').get((req, res) => {
5 | User.find()
6 | .then(users => res.json(users))
7 | .catch(err => res.status(400).json('Error: ' + err));
8 | });
9 |
10 | router.route('/add').post((req, res) => {
11 | const username = req.body.username;
12 |
13 | const newUser = new User({username});
14 |
15 | newUser.save()
16 | .then(() => res.json('User added!'))
17 | .catch(err => res.status(400).json('Error: ' + err));
18 | });
19 |
20 | module.exports = router;
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | pointer-events: none;
9 | }
10 |
11 | .App-header {
12 | background-color: #282c34;
13 | min-height: 100vh;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | justify-content: center;
18 | font-size: calc(10px + 2vmin);
19 | color: white;
20 | }
21 |
22 | .App-link {
23 | color: #61dafb;
24 | }
25 |
26 | @keyframes App-logo-spin {
27 | from {
28 | transform: rotate(0deg);
29 | }
30 | to {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/backend/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const cors = require('cors');
3 | const mongoose = require('mongoose');
4 |
5 | require('dotenv').config();
6 |
7 | const app = express();
8 | const port = process.env.PORT || 5000;
9 |
10 | app.use(cors());
11 | app.use(express.json());
12 |
13 | const uri = process.env.ATLAS_URI;
14 | mongoose.connect(uri, { useNewUrlParser: true, useCreateIndex: true }
15 | );
16 | const connection = mongoose.connection;
17 | connection.once('open', () => {
18 | console.log("MongoDB database connection established successfully");
19 | })
20 |
21 | const exercisesRouter = require('./routes/exercises');
22 | const usersRouter = require('./routes/users');
23 |
24 | app.use('/exercises', exercisesRouter);
25 | app.use('/users', usersRouter);
26 |
27 | app.listen(port, () => {
28 | console.log(`Server is running on port: ${port}`);
29 | });
30 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mern-tracker",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "axios": "^0.18.0",
7 | "bootstrap": "^4.3.1",
8 | "react": "^16.8.6",
9 | "react-datepicker": "^2.5.0",
10 | "react-dom": "^16.8.6",
11 | "react-router-dom": "^5.0.0",
12 | "react-scripts": "3.0.1"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": "react-app"
22 | },
23 | "browserslist": {
24 | "production": [
25 | ">0.2%",
26 | "not dead",
27 | "not op_mini all"
28 | ],
29 | "development": [
30 | "last 1 chrome version",
31 | "last 1 firefox version",
32 | "last 1 safari version"
33 | ]
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/navbar.component.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | export default class Navbar extends Component {
5 |
6 | render() {
7 | return (
8 |
24 | );
25 | }
26 | }
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import "bootstrap/dist/css/bootstrap.min.css";
3 | import { BrowserRouter as Router, Route} from "react-router-dom";
4 |
5 | import Navbar from "./components/navbar.component"
6 | import ExercisesList from "./components/exercises-list.component";
7 | import EditExercise from "./components/edit-exercise.component";
8 | import CreateExercise from "./components/create-exercise.component";
9 | import CreateUser from "./components/create-user.component";
10 |
11 | function App() {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default App;
27 |
--------------------------------------------------------------------------------
/src/components/create-user.component.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import axios from 'axios';
3 |
4 | export default class CreateUser extends Component {
5 | constructor(props) {
6 | super(props);
7 |
8 | this.onChangeUsername = this.onChangeUsername.bind(this);
9 | this.onSubmit = this.onSubmit.bind(this);
10 |
11 | this.state = {
12 | username: ''
13 | }
14 | }
15 |
16 | onChangeUsername(e) {
17 | this.setState({
18 | username: e.target.value
19 | })
20 | }
21 |
22 | onSubmit(e) {
23 | e.preventDefault();
24 |
25 | const user = {
26 | username: this.state.username
27 | }
28 |
29 | console.log(user);
30 |
31 | axios.post('http://localhost:5000/users/add', user)
32 | .then(res => console.log(res.data));
33 |
34 | this.setState({
35 | username: ''
36 | })
37 | }
38 |
39 | render() {
40 | return (
41 |
42 |
Create New User
43 |
57 |
7 | | {props.exercise.username} |
8 | {props.exercise.description} |
9 | {props.exercise.duration} |
10 | {props.exercise.date.substring(0,10)} |
11 |
12 | edit | { props.deleteExercise(props.exercise._id) }}>delete
13 | |
14 |
15 | )
16 |
17 | export default class ExercisesList extends Component {
18 | constructor(props) {
19 | super(props);
20 |
21 | this.deleteExercise = this.deleteExercise.bind(this)
22 |
23 | this.state = {exercises: []};
24 | }
25 |
26 | componentDidMount() {
27 | axios.get('http://localhost:5000/exercises/')
28 | .then(response => {
29 | this.setState({ exercises: response.data })
30 | })
31 | .catch((error) => {
32 | console.log(error);
33 | })
34 | }
35 |
36 | deleteExercise(id) {
37 | axios.delete('http://localhost:5000/exercises/'+id)
38 | .then(response => { console.log(response.data)});
39 |
40 | this.setState({
41 | exercises: this.state.exercises.filter(el => el._id !== id)
42 | })
43 | }
44 |
45 | exerciseList() {
46 | return this.state.exercises.map(currentexercise => {
47 | return ;
48 | })
49 | }
50 |
51 | render() {
52 | return (
53 |
54 |
Logged Exercises
55 |
56 |
57 |
58 | | Username |
59 | Description |
60 | Duration |
61 | Date |
62 | Actions |
63 |
64 |
65 |
66 | { this.exerciseList() }
67 |
68 |
69 |
86 |
Create New Exercise Log
87 |
137 |
98 |
Edit Exercise Log
99 |
149 |