Forem: Prateik Lohani

Node modules confusion??

Prateik Lohani — Sun, 27 Oct 2024 06:33:30 +0000

I am a beginner to web development and I just created this hardhat project to test a smart contract for a charity donation DApp that has the following folder structure:

Now how do I add a frontend to this thing? I first initialized it using npm init, then I added hardhat using npm i hardhat, intialized the hardhat project using npx hardhat init and finally did all the testing yada yada...
Until it was done.

Now how do I add a react frontend to it? I thought about creating another frontend folder here itself in which I'll create all the web pages...
...And it's here where the node modules confusion comes up.

Won't this create 2 node modules folders? One in the main directory, one in the frontend directory?

Is that good practice?

Am I wasting time learning Web3?

Prateik Lohani — Sat, 19 Oct 2024 10:34:05 +0000

I have just been getting started trying to learn about ethers.js and web3.js. I have learnt a lot of solidity code over the past 2 weeks, but now I am getting skeptical.

DISCLAIMER- Before this discussion blows this post out of proportion, let me just put a disclaimer, this is more for a purpose of trying to help me and any other lost soul, trapped helplessly in the the dilemma of learning or not learning Web3- especially considering the ocean-full bucket of content on the internet about whether these technologies are worth a coder's time or not.

The belligerents in this argument mostly seem to include either outright deniers of blockchain's bright future or optimistic tech geeks that talk like they're straight out of a cypherpunk cult from the 90's. This extreme range has stretched my mind thin on which part of the argument to fall.

The reason I'm skeptical is because I don't feel like this whole thing is solving a lot of problems. Most of the applications are usually the same as any regular Web2 application with the difference of a smart contract instead of a backend server to manage data and transactions.

Cryptocurrencies and blockchain as a whole concept seem to be a bit interesting to me as I do like the idea of a decentralized system. However the fact that most of the transactions that occur in it are usually less than 20 per second makes me second guess its future.

From more of a developer point of view, I don't see Web3 applications solving real life problems so much so as Web2 applications have. Sure privacy is there and it's got a trustless system- great for verifying the transactions in it.
But given that attacks can and still occur is a bit concerning to me. Of course, not every technology is perfect but there is one key thing to consider- does the average user care?

Does the average user actually give that many sh**s as to whether their data becomes that tiny bit more secure? Don't we all just skip the terms and conditions policies? Don't we all use Instagram, Google or some other shady website every now and then?

If the problems in Web3 are not being solved MUCH MUCH more efficiently than Web2, why should I as a web developer get into it? If money is the only reason- isn't that technically just a fad then? - in case the demand goes down, so does the job morale, and there goes your daily bread along with any sense of purpose you had with the technology- creating something better.

I would love to be educated on this but please keep it sane. I am a beginner and not an expert- this is merely something that's been itching my head for the past few weeks and I'd like to get rid of it.

useEffect() or Event handler?

Prateik Lohani — Mon, 08 Jul 2024 09:48:54 +0000

Hi there!
I just wanted some advice here. Basically I have a To-Do list application that uses a Postgres database and an express backend. I just have one table that stores the name, id, whether completed or not, and a note related to the task in it.

My doubt is whether I should use a useEffect() or just plain old event handlers for this.

This is how I have implemented my functionality:

When a user clicks on the add task button, the event handler- handleAddTask() fires up -> adds the task to the database -> then fetches the data once again to get the updated data.

NOTE- I am fetching the data again and again since I thought it wouldn't be too bad for an application that is this small (and also because I don't yet know how to do this in a more efficient way🥲).

Similar to the above, when the user deletes a task, a database DELETE request is sent and all the tasks are fetched again to keep the frontend in sync with backend.
Same for editing a task too. Edit it, PUT request goes, and all tasks fetched again.

The handleAddTask() event handler:


 javascript
function handleAddTask(title){
        if (title.trim() === ""){
            alert("You cannot add empty task!");
        }
        else{
            controller.addTask(title)
            .then(() => controller.fetchData())
            .then((todos) => {
                console.log("Got your todos!:", todos);
                dispatch({
                    type: "set",
                    todos: todos,
                })
                handleSetTasksRemaining(todos);
            });

            // clearing the task input bar upon adding the task
            setTitle("");
        }
    }

The handleDeleteTask() event handler:


 javascript
function handleDeleteTask(id){
        controller.deleteTask(id)
        .then(() => controller.fetchData())
        .then((todos) => {
            console.log("Got your todos!:", todos);
            flushSync(() => {
                dispatch({
                    type: "set",
                    todos: todos,
                });
            });
            handleSetTasksRemaining(todos);
        })
    }

And finally the handleEditTask() event handler:


 javascript
function handleEditTask(id, title, completed, description, showEditButton){
        setEditInput(showEditButton);

        if(title.trim() === ""){
            alert("You cannot add empty task!");
        } else{
            controller.updateTask(id, title, completed, description === "" ? null : description)
            .then(() => controller.fetchData())
            .then((todos) => {
                console.log("Got your todos!:", todos);
                dispatch({
                    type: "set",
                    todos: todos,
                })
                handleSetTasksRemaining(todos);
            })
        }
    }

I am really confused about what I should do since everyone keeps saying that data fetching should be done in useEffect. But in my case the data should only be added, deleted or edited whenever I click on an appropriate button.

Is this a bad approach? What is the better approach if any? Please help.