Forem

Prateik Lohani
Prateik Lohani

Posted on

Node modules confusion??

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:

Image description

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.

Image description

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

Is that good practice?

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
richard_vanbergen profile image
Richard Vanbergen

Not sure this is the best place to ask questions but seeing as I'm also learning how to do this and I'm not new to development in general so maybe I can help a little.

Generally I would keep them as separate projects. The way most contracts work is they raise an event and call an endpoint you host on a separate app. The reason is that processing and storage is expensive on the chain so this relegates the chain to simply tracking ownership of things.

Your contract should keep track of the transactions and enforce restrictions on them. Your frontend should listen to events raised by the contracts (using web3.js) and handle the human interactivity side of things.

I would defiantly keep them separate, you could put them into one codebase but I don't think it's worth it for most people.

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay