https://github.com/joannajjliu/mern_practice

From freeCodeCamp's MERN stack exercises/user tutorial
https://github.com/joannajjliu/mern_practice

Last synced: 5 days ago
JSON representation

From freeCodeCamp's MERN stack exercises/user tutorial

• Host: GitHub
• URL: https://github.com/joannajjliu/mern_practice
• Owner: joannajjliu
• Created: 2020-05-25T01:29:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T20:36:28.000Z (about 2 years ago)
• Last Synced: 2024-12-07T19:07:15.181Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 3.89 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Notes:

- Tutorial from Youtube - freeCodeCamp: "learn the MERN Stack - Full Tutorial (MongoDB, Express, React, Node.js)"

- backend folder is usually separate from frontend folder:

    - But for simplicity, both folders will be located in the same location, for this app.

### Running the app:

- navigate to "backend" folder, then run the backend using "nodemon server.js"

- navigate to root folder, then run the frontend using "yarn start" 

### Folders: 

- backend: mongoose "models" and express HTTP "routes"

- src: App.js and "components" folder for React front-end code

### Dependencies/ 3rd party packages:

#### Backend dependencies:

- Express:

    - Bodyparser is included in new versions of Express (since mid-2019)

- Cors: "cross origin resource sharing",

    - allows resource access from remote hosts (skipping same origin policy)

    - provides express middleware: access something outside our server, from within our server

- Mongoose: Allows easier interaction with MongoDB through NodeJS

- Dotenv: 

    - Loads environment variables from .env file, into process.env

    - Makes development simpler; don't need to set env variables on our machine, can be stored in a file instead

#### Frontend dependencies:

- Axios: connecting frontend with HTTP request, and response data (for CRUD operations)

- bootstrap: css library

- react-datepicker

- react-router-dom