DEV Community

Cover image for 🚀 Midnight Challenge | Build & Run a Sample dApp with React, Flask & Docker
Pravesh Sudha
Pravesh Sudha Subscriber

Posted on

🚀 Midnight Challenge | Build & Run a Sample dApp with React, Flask & Docker

#devchallenge #midnightchallenge #web3 #blockchain

Midnight Network Challenge: Enhance the Ecosystem

This is a submission for the Midnight Network "Privacy First" Challenge - Enhance the Ecosystem prompt

What I Built

I built a beginner-friendly tutorial and sample dApp that demonstrates how developers can interact with a Midnight-like blockchain environment.

The project simulates wallet balances and transactions using lightweight mock services, paired with a React frontend. This allows developers to understand the flow of building a dApp — from backend services to UI integration — without needing the full complexity of setting up a live Midnight node.

The tutorial lowers the barrier to entry by providing:

  • A step-by-step YouTube video walkthrough
  • A Dockerized setup for easy spin-up
  • Clean and well-documented React + API code
  • A working demo of sending transactions and fetching balances

This way, developers can learn the concepts and workflows of building on Midnight, then extend or replace the mocks with real Midnight tools when ready.

Demo

🔗 GitHub Repository: https://github.com/Pravesh-Sudha/dev-to-challenges (change dir to midnight-challenge)

▶️ YouTube Video Walkthrough:

Application Logs:

Application UI:

How I Used Midnight's Technology

Instead of directly integrating with Midnight (which requires a more advanced setup), I built mock connectors and an indexer that emulate Midnight-like services.

The tutorial introduces developers to:

  • Connector mock → simulates how dApps send transactions
  • Indexer mock → simulates how balances and data can be queried
  • React dApp frontend → provides a wallet + transaction flow for interaction

By following this tutorial, developers learn the patterns of Midnight development — transaction flow, balance querying, and UI wiring — without worrying about infrastructure overhead. Once familiar, they can swap the mocks for actual Midnight SDKs or APIs, making the transition seamless.

Developer Experience Improvements

One of the biggest hurdles for new developers in blockchain ecosystems is onboarding — the process of setting up environments, understanding the transaction flow, and connecting frontend applications to backend services.

This tutorial improves the developer experience by:

  • Reducing setup friction → Everything runs with docker-compose up --build, no manual environment wrangling.
  • Clear learning flow → Explains the connector, indexer, and dApp step by step, so developers understand why each part matters.
  • Practical hands-on example → Developers can immediately send a transaction, fetch balances, and see results in a styled UI.
  • Extendable foundation → While the project uses mocks for simplicity, the structure mirrors how a real Midnight dApp would be built, making it easy to swap in real APIs later.

👉 This means developers can quickly experiment and learn the Midnight development workflow before diving into advanced integrations — lowering the barrier to entry and boosting confidence.

Why This Matters

When developers try a new blockchain ecosystem, the biggest hurdle is setup and integration. This project lowers that barrier by providing a ready-to-run starter kit.

With one command, developers can:

  • Experiment with transactions.
  • Query balances.
  • Visualise how a dApp interacts with Midnight components.

This makes it significantly easier for more developers to onboard into the Midnight ecosystem.

Set Up Instructions / Tutorial

  • Clone the repository: 
   git clone https://github.com/Pravesh-Sudha/dev-to-challenges.git
   cd dev-to-challenges/midnight-challenge
Enter fullscreen mode Exit fullscreen mode
  • Run the project with Docker Compose: 
   docker-compose up --build
Enter fullscreen mode Exit fullscreen mode
  • Access the dApp in your browser at: 
   http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

  • Use the UI to:

    • Get balances from the indexer mock.
    • Send mock transactions via the connector mock.

Conclusion

This project is more than just a sample dApp — it’s a step-by-step tutorial that makes it easier for developers to get started building on the Midnight ecosystem.

By combining clear documentation, a Dockerized setup, and an easy-to-follow YouTube walkthrough, I’ve created a hands-on learning experience for new developers. It demonstrates how transactions, balances, and UI flow can come together in a Midnight-like application — without the complexity of setting up the entire blockchain environment first.

My goal was to lower the barrier to entry and give developers a working reference they can learn from, adapt, and expand into real-world Midnight projects.

🌐 Connect with me:

Top comments (0)