Menu iconMenu iconJavaScript from Zero to Superhero
JavaScript from Zero to Superhero

Project 3: Full-Stack Note-Taking Application

2. Setup and Configuration

Proper setup and configuration are foundational to a smooth development process for our full-stack note-taking application. This section will guide you through setting up the development environment, structuring the project, and installing necessary dependencies.

2.1 Environment Setup

  1. Node.js Installation:
    • Ensure Node.js is installed on your machine. You can download it from the official Node.js website.
    • Verify installation by running node -v in your command line to check the version.
  2. MongoDB Installation:
    • Install MongoDB locally for development purposes from the MongoDB website, or set up a free MongoDB Atlas cluster for cloud-based development.
  3. Text Editor:
    • Choose a text editor or an Integrated Development Environment (IDE) such as Visual Studio Code (VSCode), which supports JavaScript development and extensions for Node.js, React, and Git.

2.2 Project Directory Structure

Creating a well-organized directory structure is crucial for managing the complexities of a full-stack application efficiently. Here’s a suggested structure:

note-taking-app/

├── client/              # Frontend React application
│   ├── public/
│   ├── src/
│   ├── package.json
│   └── webpack.config.js

├── server/              # Backend Node.js application
│   ├── config/
│   ├── models/
│   ├── routes/
│   ├── controllers/
│   ├── server.js
│   └── package.json

└── README.md            # Project documentation

2.3 Initializing the Project

  1. Create the Project Folders:
    mkdir note-taking-app
    cd note-taking-app
    mkdir client server
  2. Initialize Node.js in Each Subdirectory:
  • Navigate into each folder (client and server) and run:
    npm init -y
  • This command creates a package.json file for managing project metadata and dependencies.

2.4 Installing Dependencies

  1. Server Dependencies:
    • Inside the server directory:
      npm install express mongoose cors dotenv
    • express: Framework for building the server.
    • mongoose: ODM for interacting with MongoDB.
    • cors: Middleware to enable CORS (Cross-Origin Resource Sharing).
    • dotenv: Module to load environment variables from a .env file.
  2. Client Dependencies:
    • Inside the client directory:
      npm install react react-dom react-router-dom axios
    • react and react-dom: Libraries for building the UI.
    • react-router-dom: For routing in the React application.
    • axios: For making HTTP requests to the server.
  3. Development Tools:
    • Install Webpack, Babel, and other development tools in the client directory:
      npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin css-loader style-loader

2.5 Configuring Webpack and Babel

Create a webpack.config.js file in the client folder with the following configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    historyApiFallback: true,
  }
};

This setup ensures that your front-end and back-end are well-prepared for development, with all necessary tools and dependencies installed. 

2. Setup and Configuration

Proper setup and configuration are foundational to a smooth development process for our full-stack note-taking application. This section will guide you through setting up the development environment, structuring the project, and installing necessary dependencies.

2.1 Environment Setup

  1. Node.js Installation:
    • Ensure Node.js is installed on your machine. You can download it from the official Node.js website.
    • Verify installation by running node -v in your command line to check the version.
  2. MongoDB Installation:
    • Install MongoDB locally for development purposes from the MongoDB website, or set up a free MongoDB Atlas cluster for cloud-based development.
  3. Text Editor:
    • Choose a text editor or an Integrated Development Environment (IDE) such as Visual Studio Code (VSCode), which supports JavaScript development and extensions for Node.js, React, and Git.

2.2 Project Directory Structure

Creating a well-organized directory structure is crucial for managing the complexities of a full-stack application efficiently. Here’s a suggested structure:

note-taking-app/

├── client/              # Frontend React application
│   ├── public/
│   ├── src/
│   ├── package.json
│   └── webpack.config.js

├── server/              # Backend Node.js application
│   ├── config/
│   ├── models/
│   ├── routes/
│   ├── controllers/
│   ├── server.js
│   └── package.json

└── README.md            # Project documentation

2.3 Initializing the Project

  1. Create the Project Folders:
    mkdir note-taking-app
    cd note-taking-app
    mkdir client server
  2. Initialize Node.js in Each Subdirectory:
  • Navigate into each folder (client and server) and run:
    npm init -y
  • This command creates a package.json file for managing project metadata and dependencies.

2.4 Installing Dependencies

  1. Server Dependencies:
    • Inside the server directory:
      npm install express mongoose cors dotenv
    • express: Framework for building the server.
    • mongoose: ODM for interacting with MongoDB.
    • cors: Middleware to enable CORS (Cross-Origin Resource Sharing).
    • dotenv: Module to load environment variables from a .env file.
  2. Client Dependencies:
    • Inside the client directory:
      npm install react react-dom react-router-dom axios
    • react and react-dom: Libraries for building the UI.
    • react-router-dom: For routing in the React application.
    • axios: For making HTTP requests to the server.
  3. Development Tools:
    • Install Webpack, Babel, and other development tools in the client directory:
      npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin css-loader style-loader

2.5 Configuring Webpack and Babel

Create a webpack.config.js file in the client folder with the following configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    historyApiFallback: true,
  }
};

This setup ensures that your front-end and back-end are well-prepared for development, with all necessary tools and dependencies installed. 

2. Setup and Configuration

Proper setup and configuration are foundational to a smooth development process for our full-stack note-taking application. This section will guide you through setting up the development environment, structuring the project, and installing necessary dependencies.

2.1 Environment Setup

  1. Node.js Installation:
    • Ensure Node.js is installed on your machine. You can download it from the official Node.js website.
    • Verify installation by running node -v in your command line to check the version.
  2. MongoDB Installation:
    • Install MongoDB locally for development purposes from the MongoDB website, or set up a free MongoDB Atlas cluster for cloud-based development.
  3. Text Editor:
    • Choose a text editor or an Integrated Development Environment (IDE) such as Visual Studio Code (VSCode), which supports JavaScript development and extensions for Node.js, React, and Git.

2.2 Project Directory Structure

Creating a well-organized directory structure is crucial for managing the complexities of a full-stack application efficiently. Here’s a suggested structure:

note-taking-app/

├── client/              # Frontend React application
│   ├── public/
│   ├── src/
│   ├── package.json
│   └── webpack.config.js

├── server/              # Backend Node.js application
│   ├── config/
│   ├── models/
│   ├── routes/
│   ├── controllers/
│   ├── server.js
│   └── package.json

└── README.md            # Project documentation

2.3 Initializing the Project

  1. Create the Project Folders:
    mkdir note-taking-app
    cd note-taking-app
    mkdir client server
  2. Initialize Node.js in Each Subdirectory:
  • Navigate into each folder (client and server) and run:
    npm init -y
  • This command creates a package.json file for managing project metadata and dependencies.

2.4 Installing Dependencies

  1. Server Dependencies:
    • Inside the server directory:
      npm install express mongoose cors dotenv
    • express: Framework for building the server.
    • mongoose: ODM for interacting with MongoDB.
    • cors: Middleware to enable CORS (Cross-Origin Resource Sharing).
    • dotenv: Module to load environment variables from a .env file.
  2. Client Dependencies:
    • Inside the client directory:
      npm install react react-dom react-router-dom axios
    • react and react-dom: Libraries for building the UI.
    • react-router-dom: For routing in the React application.
    • axios: For making HTTP requests to the server.
  3. Development Tools:
    • Install Webpack, Babel, and other development tools in the client directory:
      npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin css-loader style-loader

2.5 Configuring Webpack and Babel

Create a webpack.config.js file in the client folder with the following configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    historyApiFallback: true,
  }
};

This setup ensures that your front-end and back-end are well-prepared for development, with all necessary tools and dependencies installed. 

2. Setup and Configuration

Proper setup and configuration are foundational to a smooth development process for our full-stack note-taking application. This section will guide you through setting up the development environment, structuring the project, and installing necessary dependencies.

2.1 Environment Setup

  1. Node.js Installation:
    • Ensure Node.js is installed on your machine. You can download it from the official Node.js website.
    • Verify installation by running node -v in your command line to check the version.
  2. MongoDB Installation:
    • Install MongoDB locally for development purposes from the MongoDB website, or set up a free MongoDB Atlas cluster for cloud-based development.
  3. Text Editor:
    • Choose a text editor or an Integrated Development Environment (IDE) such as Visual Studio Code (VSCode), which supports JavaScript development and extensions for Node.js, React, and Git.

2.2 Project Directory Structure

Creating a well-organized directory structure is crucial for managing the complexities of a full-stack application efficiently. Here’s a suggested structure:

note-taking-app/

├── client/              # Frontend React application
│   ├── public/
│   ├── src/
│   ├── package.json
│   └── webpack.config.js

├── server/              # Backend Node.js application
│   ├── config/
│   ├── models/
│   ├── routes/
│   ├── controllers/
│   ├── server.js
│   └── package.json

└── README.md            # Project documentation

2.3 Initializing the Project

  1. Create the Project Folders:
    mkdir note-taking-app
    cd note-taking-app
    mkdir client server
  2. Initialize Node.js in Each Subdirectory:
  • Navigate into each folder (client and server) and run:
    npm init -y
  • This command creates a package.json file for managing project metadata and dependencies.

2.4 Installing Dependencies

  1. Server Dependencies:
    • Inside the server directory:
      npm install express mongoose cors dotenv
    • express: Framework for building the server.
    • mongoose: ODM for interacting with MongoDB.
    • cors: Middleware to enable CORS (Cross-Origin Resource Sharing).
    • dotenv: Module to load environment variables from a .env file.
  2. Client Dependencies:
    • Inside the client directory:
      npm install react react-dom react-router-dom axios
    • react and react-dom: Libraries for building the UI.
    • react-router-dom: For routing in the React application.
    • axios: For making HTTP requests to the server.
  3. Development Tools:
    • Install Webpack, Babel, and other development tools in the client directory:
      npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin css-loader style-loader

2.5 Configuring Webpack and Babel

Create a webpack.config.js file in the client folder with the following configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    historyApiFallback: true,
  }
};

This setup ensures that your front-end and back-end are well-prepared for development, with all necessary tools and dependencies installed.