A note taking app || part 1

Hey there, fellow tech enthusiasts! Today, I'm eager to share my recent escapade into the realm of web development. Brace yourself for a deep dive into the creation of a simple yet powerful note-taking app using the MERN stack.

Let's Lay the Foundation: MongoDB and Mongoose:

Every great application starts with a solid foundation, and for our note-taking app, that foundation begins with MongoDB. Think of it as the secure vault where we stash away our users' thoughts and ideas. MongoDB, being a NoSQL database, offers the flexibility we need for storing diverse data structures without the rigidity of a traditional relational database.

Now, to make this data dance harmoniously with our Node.js backend, we turn to Mongoose. This elegant ODM (Object Data Modeling) library simplifies the interaction between our Node.js application and MongoDB. It's like having a personal translator that ensures our backend speaks the same language as our database.

The unsung hero of our backend – the schema!

Defining the Note Schema: In Mongoose, a schema acts as a blueprint for our data, setting the rules for how our notes should look. Here's a snippet showcasing the simplicity of our note schema:

const { default: mongoose } = require("mongoose");

const noteSchema = new mongoose.Schema({
  title: String,
  body: String,
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
  },
});

const Note = mongoose.model("Notes", noteSchema);

module.exports = Note;

Let's break this down:

• 1st this that we are importing mongoose.

• title: A string representing the title of our note. If you want you can make it compulsory (required), ensuring that every note has a title.

• content: Another string, capturing the essence of the note.

• user: we'll talk about it in the third part.

First of all let's break down the HTTP methods without the code.

1. GET:

   • Purpose: Retrieve data from the server.

   • Use Case in the Note-Taking App: Fetch all existing notes from the database to display to the user.

2. POST:

   • Purpose: Send data to the server to create a new resource.

   • Use Case in the Note-Taking App: Add a new note by sending the note's title and content to the server.

3. PUT:

   • Purpose: Update existing data on the server.

   • Use Case in the Note-Taking App: Modify the content of an existing note by sending updated information to the server.

4. DELETE:

   • Purpose: Request the server to delete a specified resource.

   • Use Case in the Note-Taking App: Remove a note by specifying its unique identifier to the server.

Connecting the Dots: Express.js:

With our database sorted, let's shift our focus to the glue that holds everything together - Express.js. This minimalist yet powerful web application framework for Node.js serves as the backbone of our backend. It simplifies the creation of robust APIs, making the development process a breeze.

Let's take a closer look at the key routes that breathe life into our note-taking app:

Let's take a closer look at the key routes that breathe life into our note-taking app:

1. Creating a Note (POST /notes):

   • This route handles the creation of a new note. The backend receives the note data and stores it securely in MongoDB.

    javascriptCopy code// Express Route for creating a new note
    app.post('/notes', (req, res) => {
        // Extracting note data from the request
        const { title, content } = req.body;

        // Creating a new note in MongoDB
        Note.create({ title, content }, (err, newNote) => {
            if (err) {
                return res.status(500).json({ error: 'Failed to create a new note' });
            }
            res.status(201).json(newNote);
        });
    });

1. Fetching All Notes (GET /notes):

   • This route retrieves all existing notes from the database and sends them back to the frontend.

    // Express Route for fetching all notes
    app.get('/notes', (req, res) => {
        // Retrieving all notes from MongoDB
        Note.find({}, (err, notes) => {
            if (err) {
                return res.status(500).json({ error: 'Failed to fetch notes' });
            }
            res.status(200).json(notes);
        });
    });

1. Updating a Note (PUT /notes/:id):

   • This route allows users to update the content of a specific note.

    javascriptCopy code// Express Route for updating a note
    app.put('/notes/:id', (req, res) => {
        // Extracting note data from the request
        const { title, content } = req.body;

        // Updating the note in MongoDB
        Note.findByIdAndUpdate(
            req.params.id,
            { title, content },
            { new: true },
            (err, updatedNote) => {
                if (err) {
                    return res.status(500).json({ error: 'Failed to update the note' });
                }
                res.status(200).json(updatedNote);
            }
        );
    });

Deleting a Note (DELETE /notes/:id):

• Finally, this route handles the deletion of a note based on its unique identifier.

javascriptCopy code// Express Route for deleting a note
app.delete('/notes/:id', (req, res) => {
    // Deleting the note from MongoDB
    Note.findByIdAndDelete(req.params.id, (err) => {
        if (err) {
            return res.status(500).json({ error: 'Failed to delete the note' });
        }
        res.status(204).send();
    });
});

conclusion

And there you have it, the foundational steps to breathe life into our note-taking haven. In this first part of our journey, we delved into the pivotal elements that lay the groundwork for our MERN CRUD app. MongoDB and Mongoose act as the guardians of our data, while Express.js orchestrates the symphony of routes that enable users to create, read, update, and delete their notes.

In next parts we will talk about front-end, auth and showing users their specific notes.