mkdir react-chatgpt
cd react-chatgpt
mkdir client server

cd server & npm init -y

npm install express cors nodemon

touch index.js

//👇🏻index.js
const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 4000;

app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());

app.get("/api", (req, res) => {
    res.json({
        message: "Hello world",
    });
});

app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
});

npm install chatgpt puppeteer

{ "type": "module" }

import { createRequire } from "module";
const require = createRequire(import.meta.url);
//...other code statements

//In server/package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },

npm start

cd client
npx create-react-app ./

npm install react-router-dom

function App() {
    return (
        <div>
            <p>Hello World!</p>
        </div>
    );
}
export default App;

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Space Grotesk", sans-serif;
}
body {
    margin: 0;
    padding: 0;
}
textarea,
select {
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.notification__form {
    width: 80%;
    display: flex;
    align-items: left;
    justify-content: center;
    flex-direction: column;
}
.homeContainer h3,
textarea {
    margin-bottom: 20px;
}
.notification__form button {
    width: 200px;
    padding: 15px 10px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #82aae3;
    border-radius: 5px;
    margin-bottom: 15px;
}
.navbar {
    width: 100%;
    height: 10vh;
    padding: 20px;
    background-color: #82aae3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.homeContainer {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./components/Home";

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<Home />} />
            </Routes>
        </BrowserRouter>
    );
};

export default App;

cd client
mkdir components
cd components
touch Home.js

import React, { useState } from "react";

const Home = () => {
    const [message, setMessage] = useState("");
    const [subscriber, setSubscriber] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log({ message, subscriber });
        setMessage("");
        setSubscriber("");
    };

    return (
        <div className='home'>
            <nav className='navbar'>
                <h2>Notify</h2>
            </nav>
            <main className='homeContainer'>
                <h3>Send notifications to your users</h3>
                <form
                    className='notification__form'
                    onSubmit={handleSubmit}
                    method='POST'
                >
                    <label htmlFor='title'>Notification Title</label>
                    <textarea
                        rows={5}
                        name='title'
                        required
                        value={message}
                        onChange={(e) => setMessage(e.target.value)}
                        placeholder='Let the user know that'
                    />
                    <label htmlFor='subscriber'>Subscribers</label>

                    <select
                        value={subscriber}
                        name='subscriber'
                        onChange={(e) => setSubscriber(e.target.value)}
                    >
                        <option value='Select'>Select</option>
                    </select>
                    <button>SEND NOTIFICATION</button>
                </form>
            </main>
        </div>
    );
};

export default Home;

cd client
npx novu init

Now let's setup your account and send your first notification
❓ What is your application name? Devto Clone
❓ Now lets setup your environment. How would you like to proceed?
   > Create a free cloud account (Recommended)
❓ Create your account with:
   > Sign-in with GitHub
❓ I accept the Terms and Condidtions (https://novu.co/terms) and have read the Privacy Policy (https://novu.co/privacy)
    > Yes
✔️ Create your account successfully.

We've created a demo web page for you to see novu notifications in action.
Visit: http://localhost:57807/demo to continue

npm install @novu/notification-center

import {
    NovuProvider,
    PopoverNotificationCenter,
    NotificationBell,
} from "@novu/notification-center";
import { useNavigate } from "react-router-dom";

const Home = () => {
    const navigate = useNavigate();

    const onNotificationClick = (notification) => {
        navigate(notification.cta.data.url);
    };
    //...other statements

    return (
        <div className='home'>
            <nav className='navbar'>
                <h2>Notify</h2>
                <NovuProvider
                    subscriberId={"<YOUR_SUBSCRIBER_ID>"}
                    applicationIdentifier={"<YOUR_APP_ID>"}
                >
                    <PopoverNotificationCenter onNotificationClick={onNotificationClick}>
                        {({ unseenCount }) => (
                            <NotificationBell unseenCount={unseenCount} colorScheme='light' />
                        )}
                    </PopoverNotificationCenter>
                </NovuProvider>
            </nav>
            <main className='homeContainer'>...</main>
        </div>
    );
};

{{message}}

cd server
npm install @novu/node

//server/index.js

const { Novu } = require("@novu/node");
const novu = new Novu("<YOUR_API_KEY>");

app.get("/subscribers", async (req, res) => {
    try {
        const { data } = await novu.subscribers.list(0);
        const resultData = data.data;
        //👇🏻 Returns subscibers with an id, and first and last names
        const subscribers = resultData.filter(
            (d) => d.firstName && d.lastName && d.subscriberId
        );
        res.json(subscribers);
    } catch (err) {
        console.error(err);
    }
});

//👇🏻 State representing the list of subscribers
const [subscribers, setSubscribers] = useState([
    { firstName: "", lastName: "", subscriberId: "Select", _id: "null" },
]);

//👇🏻 Fetch the list of subscribers on page load
useEffect(() => {
    async function fetchSubscribers() {
        try {
            const request = await fetch("http://localhost:4000/subscribers");
            const response = await request.json();
            setSubscribers([...subscribers, ...response]);
        } catch (err) {
            console.error(err);
        }
    }
    fetchSubscribers();
}, []);

<select
    value={subscriber}
    name='subscriber'
    onChange={(e) => setSubscriber(e.target.value)}
>
    {subscribers.map((s) => (
        <option
            key={s._id}
            value={`${s.firstName} ${s.lastName} - ${s.subscriberId}`}
        >{`${s.firstName} ${s.lastName} - ${s.subscriberId}`}</option>
    ))}
</select>

app.post("/notify", (req, res) => {
    //👇🏻 Destructure the message and subscriber from the object
    const { message, subscriber } = req.body;
    //👇🏻 Separates the first name and the subscriber ID
    const subscriberDetails = subscriber.split(" ");
    const firstName = subscriberDetails[0];
    const subscriberId = subscriberDetails[3];
    //👇🏻 Added some specifications to the message to enable the AI generate a concise notification.
    const fullMessage = `I have a notification system and I want to send the user a notification about "${message}" can you write me one?
please use double curly brackets for variables.
make it short, and use only one variable for the user name.
Please just write 1 notification without any intro.`;

    //👇🏻 Log the required variables to the console
    console.log({ firstName, subscriberId, fullMessage });
});

//👇🏻 Makes the POST request
async function sendNotification() {
    try {
        const request = await fetch("http://localhost:4000/notify", {
            method: "POST",
            body: JSON.stringify({
                message,
                subscriber,
            }),
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
            },
        });
        const data = await request.json();
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

//👇🏻 Runs when a user submits the form
const handleSubmit = (e) => {
    e.preventDefault();
    //👇🏻 Calls the function
    sendNotification();
    setMessage("");
    setSubscriber("");
};

app.post("/notify", (req, res) => {
    const { message, subscriber } = req.body;
    const subscriberDetails = subscriber.split(" ");
    const firstName = subscriberDetails[0];
    const subscriberId = subscriberDetails[3];
    const fullMessage = `I have a notification system and I want to send the user a notification about "${message}" can you write me one?
please use double curly brackets for variables.
make it short, and use only one variable for the user name.
Please just write 1 notification without any intro.`;
    console.log({ firstName, subscriberId, fullMessage });

    //👇🏻 Pass the variables as a parameter into the function
    chatgptFunction(fullMessage, subscriberId, firstName, res);
});

//👇🏻 Holds the AI-generated notification
let chatgptResult = "";

async function chatgptFunction(message, subscriberId, firstName, res) {
    // use puppeteer to bypass cloudflare (headful because of captchas)
    const api = new ChatGPTAPIBrowser({
        email: "<YOUR_CHATGPT_EMAIL>",
        password: "<YOUR_CHATGPT_PASSWORD>",
    });
    //👇🏻 Open up the login screen on the browser
    await api.initSession();
    const result = await api.sendMessage(message);
    chatgptResult = result.response;
    //👇🏻 Replace the user variable with the user's first name
    const notificationString = chatgptResult.replace("{{user}}", firstName);

    console.log(notificationString, subscriberId);
}

async function chatgptFunction(message, subscriberId, firstName, res) {
    // use puppeteer to bypass cloudflare (headful because of captchas)
    const api = new ChatGPTAPIBrowser({
        email: "<YOUR_CHATGPT_EMAIL>",
        password: "<YOUR_CHATGPT_PASSWORD>",
    });
    await api.initSession();
    const result = await api.sendMessage(message);
    chatgptResult = result.response;
    const notificationString = chatgptResult.replace("{{user}}", firstName);

    //👇🏻 Pass the necessary variables as parameters
    sendNotification(notificationString, subscriberId, res);
}

//👇🏻 Sends the notification via Novu
async function sendNotification(data, subscriberId, res) {
    try {
        let result = await novu.trigger("<NOTIFICATION_TEMPLATE_ID>", {
            to: {
                subscriberId: subscriberId,
            },
            payload: {
                message: data,
            },
        });
        return res.json({ message: result });
    } catch (err) {
        return res.json({ error_message: err });
    }
}