Full Stack App Tutorial: Build Your Own!

So, you want to build a full-stack application? Awesome! This tutorial is designed to guide you through the process, step by step. We'll cover everything from setting up your development environment to deploying your finished application. Whether you're a beginner or have some experience, this guide is tailored to help you understand the key concepts and best practices for full-stack development.

What is a Full Stack Application?

Before we dive in, let's clarify what we mean by "full stack." A full-stack application involves both the front-end (the part the user interacts with) and the back-end (the server-side logic, database, and infrastructure). A full-stack developer is someone who can work on both sides of the application. Think of it like building a house: the front-end is the interior design and the visible structure, while the back-end is the foundation, plumbing, and electrical systems.

Why learn full-stack development?

Versatility: You can handle any part of the application development process.
Problem-Solving: You gain a deeper understanding of how different components interact.
Career Opportunities: Full-stack developers are in high demand.

Choosing Your Tech Stack

The tech stack refers to the set of technologies you'll use to build your application. There are many options, but here's a popular and beginner-friendly choice:

Front-End: React (a JavaScript library for building user interfaces)
Back-End: Node.js with Express (a JavaScript runtime environment and a web application framework)
Database: MongoDB (a NoSQL database)

This combination is often called the MERN stack (MongoDB, Express, React, Node.js). We'll use this stack for our tutorial.

Alternatives

Of course, the MERN stack isn't the only option. Here are some alternatives:

MEAN Stack: MongoDB, Express, AngularJS, Node.js
LAMP Stack: Linux, Apache, MySQL, PHP
Python/Django: Python with the Django framework and a database like PostgreSQL

The best stack for you depends on your project requirements and your personal preferences. Feel free to explore different options!

Setting Up Your Development Environment

Before we start coding, let's set up our development environment. You'll need the following:

Node.js and npm (Node Package Manager): Download and install Node.js from the official website (https://nodejs.org/). npm comes bundled with Node.js.
Code Editor: Choose a code editor like Visual Studio Code, Sublime Text, or Atom. Visual Studio Code is highly recommended due to its extensive features and extensions.
MongoDB: You can either install MongoDB locally or use a cloud-based service like MongoDB Atlas. For this tutorial, we'll use MongoDB Atlas.

Installing Node.js and npm

After downloading Node.js, run the installer. Follow the prompts, and make sure to add Node.js to your PATH environment variable. To verify that Node.js and npm are installed correctly, open your terminal and run the following commands:

node -v
npm -v

You should see the version numbers of Node.js and npm.

Setting up MongoDB Atlas

Create an Account: Go to https://www.mongodb.com/atlas/ and create a free account.
Create a New Project: Follow the prompts to create a new project.
Create a Cluster: Choose a free tier cluster and configure it.
Whitelist Your IP Address: Add your IP address to the whitelist to allow connections from your development environment.
Create a Database User: Create a user with read and write access to your database.
Get the Connection String: MongoDB Atlas will provide you with a connection string that you'll use to connect to your database from your application. Save this string.

Building the Back-End (Node.js with Express)

Now, let's start building the back-end of our application. We'll use Node.js with Express to create a simple API.

Creating a New Node.js Project

Open your terminal and create a new directory for your project:

mkdir fullstack-app
cd fullstack-app

Initialize a new Node.js project:

npm init -y

This will create a package.json file in your project directory.

Installing Dependencies

Install the necessary dependencies:

npm install express mongoose cors dotenv

express: A web application framework for Node.js.
mongoose: An Object Data Modeling (ODM) library for MongoDB and Node.js.
cors: Middleware to enable Cross-Origin Resource Sharing (CORS).
dotenv: Loads environment variables from a .env file.

Creating the Server File (index.js)

Create a file named index.js in your project directory and add the following code:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config();

const app = express();
const port = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const connection = mongoose.connection;
connection.once('open', () => {
  console.log('MongoDB database connection established successfully');
});

app.listen(port, () => {
  console.log(`Server is running on port: ${port}`);
});

Creating a .env File

Create a .env file in your project directory and add your MongoDB connection string:

ATLAS_URI=your_mongodb_connection_string
PORT=5000

Replace your_mongodb_connection_string with the connection string you obtained from MongoDB Atlas.

Running the Server

Start the server by running the following command in your terminal:

node index.js

You should see the message "Server is running on port: 5000" and "MongoDB database connection established successfully" in your console.

Creating Models and Routes

Now that our server is set up, let's create models and routes for our application. For example, let's create a simple "todos" model and routes.

| Read Also : IIBasketball USA: The Definitive Guide

Create a models directory:

mkdir models

Create a todo.model.js file inside the models directory:

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const todoSchema = new Schema({
  description: {
    type: String,
    required: true,
  },
  responsible: {
    type: String,
  },
  priority: {
    type: String,
  },
  completed: {
    type: Boolean,
  },
}, {
  timestamps: true,
});

const Todo = mongoose.model('Todo', todoSchema);

module.exports = Todo;

Create a routes directory:

mkdir routes

Create a todos.js file inside the routes directory:

const router = require('express').Router();
let Todo = require('../models/todo.model');

router.route('/').get((req, res) => {
  Todo.find()
    .then(todos => res.json(todos))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/add').post((req, res) => {
  const description = req.body.description;
  const responsible = req.body.responsible;
  const priority = req.body.priority;
  const completed = req.body.completed;

  const newTodo = new Todo({
    description,
    responsible,
    priority,
    completed,
  });

  newTodo.save()
    .then(() => res.json('Todo added!'))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/:id').get((req, res) => {
  Todo.findById(req.params.id)
    .then(todo => res.json(todo))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/:id').delete((req, res) => {
  Todo.findByIdAndDelete(req.params.id)
    .then(() => res.json('Todo deleted.'))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/update/:id').post((req, res) => {
  Todo.findById(req.params.id)
    .then(todo => {
      todo.description = req.body.description;
      todo.responsible = req.body.responsible;
      todo.priority = req.body.priority;
      todo.completed = req.body.completed;

      todo.save()
        .then(() => res.json('Todo updated!'))
        .catch(err => res.status(400).json('Error: ' + err));
    })
    .catch(err => res.status(400).json('Error: ' + err));
});

module.exports = router;

Update index.js to use the routes:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config();

const app = express();
const port = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const connection = mongoose.connection;
connection.once('open', () => {
  console.log('MongoDB database connection established successfully');
});

const todosRouter = require('./routes/todos');

app.use('/todos', todosRouter);

app.listen(port, () => {
  console.log(`Server is running on port: ${port}`);
});

Building the Front-End (React)

Now, let's build the front-end of our application using React.

Creating a New React App

Open your terminal and navigate to the directory where you want to create your React app. Then, run the following command:

npx create-react-app client
cd client

This will create a new React app in a directory named client.

Installing Dependencies

Install the necessary dependencies:

npm install axios react-router-dom

axios: A library for making HTTP requests.
react-router-dom: A library for adding routing to your React app.

Creating Components

Let's create a few components for our app:

TodoList.js: Displays a list of todos.
CreateTodo.js: Allows the user to create a new todo.
EditTodo.js: Allows the user to edit an existing todo.

Create a components directory inside the src directory:

mkdir src/components

Create TodoList.js inside the src/components directory:

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

const Todo = props => (
  <tr>
    <td>{props.todo.description}</td>
    <td>{props.todo.responsible}</td>
    <td>{props.todo.priority}</td>
    <td>
      <Link to={'/edit/' + props.todo._id}>Edit</Link> |
      <a
        href="#"
        onClick={() => {
          props.deleteTodo(props.todo._id);
        }}
      >
        Delete
      </a>
    </td>
  </tr>
);

export default function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    axios
      .get('http://localhost:5000/todos/')
      .then(response => {
        setTodos(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  const deleteTodo = id => {
    axios.delete('http://localhost:5000/todos/' + id).then(response => {
      console.log(response.data);
    });

    setTodos(todos.filter(el => el._id !== id));
  };

  const todoList = () => {
    return todos.map(currenttodo => {
      return (
        <Todo
          todo={currenttodo}
          deleteTodo={deleteTodo}
          key={currenttodo._id}
        />
      );
    });
  };

  return (
    <div>
      <h3>Todos List</h3>
      <table className="table table-striped" style={{ marginTop: 20 }}>
        <thead>
          <tr>
            <th>Description</th>
            <th>Responsible</th>
            <th>Priority</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>{todoList()}</tbody>
      </table>
    </div>
  );
}

Create EditTodo.js inside the src/components directory:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function EditTodo(props) {
  const [description, setDescription] = useState('');
  const [responsible, setResponsible] = useState('');
  const [priority, setPriority] = useState('');
  const [completed, setCompleted] = useState(false);

  useEffect(() => {
    axios
      .get('http://localhost:5000/todos/' + props.match.params.id)
      .then(response => {
        setDescription(response.data.description);
        setResponsible(response.data.responsible);
        setPriority(response.data.priority);
        setCompleted(response.data.completed);
      })
      .catch(function(error) {
        console.log(error);
      });
  }, []);

  const onSubmit = e => {
    e.preventDefault();

    const todo = {
      description,
      responsible,
      priority,
      completed,
    };

    axios
      .post('http://localhost:5000/todos/update/' + props.match.params.id, todo)
      .then(res => console.log(res.data));

    window.location = '/';
  };

  return (
    <div>
      <h3>Update Todo</h3>
      <form onSubmit={onSubmit}>
        <div className="form-group">
          <label>Description: </label>
          <input
            type="text"
            className="form-control"
            value={description}
            onChange={e => setDescription(e.target.value)}
          />
        </div>
        <div className="form-group">
          <label>Responsible: </label>
          <input
            type="text"
            className="form-control"
            value={responsible}
            onChange={e => setResponsible(e.target.value)}
          />
        </div>
        <div className="form-group">
          <div className="form-check form-check-inline">
            <input
              className="form-check-input"
              type="radio"
              name="priorityOptions"
              id="priorityLow"
              value="Low"
              checked={priority === 'Low'}
              onChange={e => setPriority(e.target.value)}
            />
            <label className="form-check-label">Low</label>
          </div>
          <div className="form-check form-check-inline">
            <input
              className="form-check-input"
              type="radio"
              name="priorityOptions"
              id="priorityMedium"
              value="Medium"
              checked={priority === 'Medium'}
              onChange={e => setPriority(e.target.value)}
            />
            <label className="form-check-label">Medium</label>
          </div>
          <div className="form-check form-check-inline">
            <input
              className="form-check-input"
              type="radio"
              name="priorityOptions"
              id="priorityHigh"
              value="High"
              checked={priority === 'High'}
              onChange={e => setPriority(e.target.value)}
            />
            <label className="form-check-label">High</label>
          </div>
        </div>
        <div className="form-check">
          <input
            className="form-check-input"
            type="checkbox"
            name="completed"
            id="completed"
            checked={completed}
            value={completed}
            onChange={e => setCompleted(!completed)}
          />
          <label className="form-check-label" htmlFor="completed">
            Completed
          </label>
        </div>

        <div className="form-group">
          <input
            type="submit"
            value="Update Todo"
            className="btn btn-primary"
          />
        </div>
      </form>
    </div>
  );
}

Create CreateTodo.js inside the src/components directory:

import React, { useState } from 'react';
import axios from 'axios';

export default function CreateTodo() {
  const [description, setDescription] = useState('');
  const [responsible, setResponsible] = useState('');
  const [priority, setPriority] = useState('');
  const [completed, setCompleted] = useState(false);

  const onSubmit = e => {
    e.preventDefault();

    const newTodo = {
      description,
      responsible,
      priority,
      completed,
    };

    axios
      .post('http://localhost:5000/todos/add', newTodo)
      .then(res => console.log(res.data));

    setDescription('');
    setResponsible('');
    setPriority('');
    setCompleted(false);
  };

  return (
    <div style={{ marginTop: 10 }}>
      <h3>Create New Todo</h3>
      <form onSubmit={onSubmit}>
        <div className="form-group">
          <label>Description: </label>
          <input
            type="text"
            className="form-control"
            value={description}
            onChange={e => setDescription(e.target.value)}
          />
        </div>
        <div className="form-group">
          <label>Responsible: </label>
          <input
            type="text"
            className="form-control"
            value={responsible}
            onChange={e => setResponsible(e.target.value)}
          />
        </div>
        <div className="form-group">
          <div className="form-check form-check-inline">
            <input
              className="form-check-input"
              type="radio"
              name="priorityOptions"
              id="priorityLow"
              value="Low"
              checked={priority === 'Low'}
              onChange={e => setPriority(e.target.value)}
            />
            <label className="form-check-label">Low</label>
          </div>
          <div className="form-check form-check-inline">
            <input
              className="form-check-input"
              type="radio"
              name="priorityOptions"
              id="priorityMedium"
              value="Medium"
              checked={priority === 'Medium'}
              onChange={e => setPriority(e.target.value)}
            />
            <label className="form-check-label">Medium</label>
          </div>
          <div className="form-check form-check-inline">
            <input
              className="form-check-input"
              type="radio"
              name="priorityOptions"
              id="priorityHigh"
              value="High"
              checked={priority === 'High'}
              onChange={e => setPriority(e.target.value)}
            />
            <label className="form-check-label">High</label>
          </div>
        </div>
        <div className="form-check">
          <input
            className="form-check-input"
            type="checkbox"
            name="completed"
            id="completed"
            value={completed}
            checked={completed}
            onChange={e => setCompleted(!completed)}
          />
          <label className="form-check-label" htmlFor="completed">
            Completed
          </label>
        </div>

        <div className="form-group">
          <input
            type="submit"
            value="Create Todo"
            className="btn btn-primary"
          />
        </div>
      </form>
    </div>
  );
}

Update App.js to use the components and routing:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

import TodoList from './components/TodoList';
import EditTodo from './components/EditTodo';
import CreateTodo from './components/CreateTodo';

function App() {
  return (
    <Router>
      <div className="container">
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link to="/" className="navbar-brand">
            MERN-Stack Todo App
          </Link>
          <div className="collpase navbar-collapse">
            <ul className="navbar-nav mr-auto">
              <li className="navbar-item">
                <Link to="/" className="nav-link">Todos</Link>
              </li>
              <li className="navbar-item">
                <Link to="/create" className="nav-link">Create Todo</Link>
              </li>
            </ul>
          </div>
        </nav>
        <br/>
        <Route path="/" exact component={TodoList} />
        <Route path="/edit/:id" component={EditTodo} />
        <Route path="/create" component={CreateTodo} />
      </div>
    </Router>
  );
}

export default App;

Running the Front-End

Start the front-end by running the following command in your terminal:

npm start

This will start the React development server and open your app in your browser.

Deploying Your Application

Once you've built your application, you'll want to deploy it so that others can use it. Here are a few options:

Heroku: A popular platform for deploying Node.js applications.
Netlify: A platform for deploying front-end applications.
AWS (Amazon Web Services): A cloud computing platform with a wide range of services.
DigitalOcean: A cloud infrastructure provider.

The deployment process varies depending on the platform you choose. Refer to the platform's documentation for detailed instructions.

Congratulations! You've built and deployed a full-stack application using the MERN stack. This is just the beginning. There's much more to learn, so keep exploring and building!

What is a Full Stack Application?

Choosing Your Tech Stack

Alternatives

Setting Up Your Development Environment

Installing Node.js and npm

Setting up MongoDB Atlas

Building the Back-End (Node.js with Express)

Creating a New Node.js Project

Installing Dependencies

Creating the Server File (index.js)

Creating a .env File

Running the Server

Creating Models and Routes

Building the Front-End (React)

Creating a New React App

Installing Dependencies

Creating Components

Running the Front-End

Deploying Your Application

Lastest News

IIBasketball USA: The Definitive Guide

Jair Bolsonaro: An Honest Look

0101 Angel Number: Meaning And Significance

Nuclear Binding Energy: Definition, Calculation, And Significance

Kia Hyundai Spare Parts In Sharjah: Your Go-To Guide