Steps to Create the Backend Node App

Step 1: Create a new React App

npx create-react-app <name of project>

Step 2: Navigate to the Project folder using:

cd <name of project>

Step 3: Installing Required Packages.

npm install express mongoose

The updated dependencies in package.json file will look like:

"dependencies": {
    "express": "^4.17.1",
    "mongoose": "^5.13.2"
},

Example: Below is the code for the backend server in nodejs

Javascript

// server/server.js
 
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
 
const app = express();
const PORT = process.env.PORT || 5000;
 
// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/fundraiser', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});
 
// Define a Donation model
const Donation = mongoose.model('Donation', {
    amount: Number,
    description: String,
});
 
// Middleware to parse JSON
app.use(bodyParser.json());
 
// API routes
app.post('/api/donations', async (req, res) => {
    try {
        const { amount, description } = req.body;
 
        // Create a new donation
        const newDonation = new Donation({ amount, description });
        await newDonation.save();
 
        res.status(201).json(newDonation);
    } catch (error) {
        console.error(error);
        res.status(500).send('Internal Server Error');
    }
});
 
app.get('/api/donations', async (req, res) => {
    try {
        // Fetch all donations
        const donations = await Donation.find();
        res.json(donations);
    } catch (error) {
        console.error(error);
        res.status(500).send('Internal Server Error');
    }
});
 
// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Start the Backend Server using the following command.

node server.js

Fundraiser Platform using MERN

A fundraising application, often referred to as a “fundraiser application” or “crowdfunding platform,” is a software or web-based platform designed to facilitate the collection of funds for a specific cause, project, or campaign. These applications provide a digital space where individuals, organizations, or businesses can create fundraising campaigns and seek financial support from a wider audience, typically through online donations.

Preview of final output: Let us have a look at how the final application will look like.

Output

Tags:

#Geeks Premier League 2023 #MERN-Projects #Geeks Premier League #MERN Stack #Project #Web Technologies

Approach:

Steps to Create the Frontend React App:

Steps to Create the Backend Node App

Javascript

Fundraiser Platform using MERN

Similar Reads

Contact Us