Notes Maker App using MEAN Stack

// server.js
const express = require("express");
const mongoose = require("mongoose");
const noteRoutes = require("./routes/noteRoutes");
const cors = require("cors");
const app = express();
const port = 5000;

// Connect to MongoDB
mongoose
  .connect("mongodb://localhost:27017/note-app")
  .then(() => {
    console.log("Connected successfully to MongoDB");
  })
  .catch((err) => {
    console.error("Error occurred while connecting to MongoDB:", err);
  });

// Middleware
app.use(express.json());
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use("/notes", noteRoutes);

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

// model/note.js

const mongoose = require("mongoose");

const noteSchema = new mongoose.Schema({
  title: { type: String, },
  description: { type: String, },
  
});

module.exports = mongoose.model("Note", noteSchema);

// routes/noteRoutes.js

const express = require("express");
const router = express.Router();
const Note = require("../model/note");
const note = require("../model/note");

// Get all notes
router.get("/", async (req, res) => {
  try {
    const notes = await Note.find();
    res.json(notes);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// Create a note
router.post("/", async (req, res) => {
  console.log(req.body);
  const note = new Note({
    title: req.body.title,
    description: req.body.description,
  });

  try {
    const newNote = await note.save();
    res.status(201).json(newNote);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// Update a note
router.put("/:id", async (req, res) => {
  console.log(req.params.id);
  try {
    const note = await Note.findById(req.params.id);
    if (note == null) {
      return res.status(404).json({ message: "Note not found" });
    }
    if (req.body.title != null) {
      note.title = req.body.title;
    }
    if (req.body.description != null) {
      note.description = req.body.description;
    }
    const updatedNote = await note.save();
    res.json(updatedNote);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// Delete a note
router.delete("/:id", async (req, res) => {
  try {
    const deletedNote = await Note.findByIdAndDelete(req.params.id);
    const notes = await Note.find();
    res.json(notes);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

module.exports = router;

// /src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';  // Import HttpClientModule
import { FormsModule } from '@angular/forms'; // Import FormsModule for ngModel
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [
    CommonModule,
    FormsModule, // Add FormsModule here
    HttpClientModule // Add HttpClientModule here
  ],
  standalone: true
})
export class AppComponent implements OnInit {
  // Form inputs
  title = '';
  description = '';
  

  notes: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.fetchNotes();
  }

  fetchNotes(): void {
    this.http.get<any[]>('http://localhost:5000/notes').subscribe(
      (data) => {
        this.notes = data;
      },
      (error) => {
        console.error('Error fetching notes:', error);
      }
    );
  }

  // Handle form submission
  onSubmit(): void {
    if (this.title.trim() === '' || this.description.trim() === '') { 
      alert('Please fill in all fields!'); 
      return;
    }
    const newNote = {
      title: this.title,
      description: this.description,
    };

    this.http.post('http://localhost:5000/notes', newNote).subscribe(
      (data) => {
        console.log('Data submitted:', data);
        // Reset form inputs
        this.title = '';
        this.description = '';
        this.fetchNotes();
      },
      (error) => {
        console.error('Error submitting data:', error);
      }
    );
  }
  

  editNote(note: any): void {
    console.log(note)
    const newTitle = prompt('Enter new title:', note.title);
    const newDescription = prompt('Enter new description:', note.description);

    if (newTitle !== null && newDescription !== null) {
      const updatedNotes = { ...note, title: newTitle, description: newDescription };

      this.http.put(`http://localhost:5000/notes/${note._id}`, updatedNotes).subscribe(
        (data) => {
          console.log('Updated note:', data);
          this.fetchNotes();  // Refresh the list
        },
        (error) => {
          console.error('Error updating notes:', error);
        }
      );
    }
  }

  deleteNote(id: number): void {
    this.http.delete<any[]>('http://localhost:5000/notes/' + id).subscribe(
      (updatedNotes) => {
        this.notes = updatedNotes;  
      },
      (error) => {
        console.error('Error deleting notes:', error);
      }
    );
  }
}

//main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));