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

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 (change dir to midnight-challenge):

Pravesh-Sudha / dev-to-challenges

🏗️ Dev.to Challenges – by Pravesh Sudha

This repository contains my submissions for various Dev.to Challenges. Each folder in this repo includes a hands-on project built around specific tools, APIs, or themes — from infrastructure to frontend and AI voice agents.

---

📁 Projects

⚙️ pulumi-challenge/

An infrastructure-as-code project built using Pulumi.
It automates cloud infrastructure setup using Python and TypeScript across AWS services.

🎨 frontend-challenge/

A UI/UX-focused project that demonstrates creative frontend solutions using HTML, CSS, and JavaScript — optimized for responsiveness and accessibility.

📩 postmark-challenge/

A transactional email solution built with the Postmark API, showcasing email templates, delivery tracking, and webhook handling.

🧠 philo-agent/

A voice-based AI Philosopher built with AssemblyAI + Gemini — part of the World’s Largest Hackathon.

---

🗂️ Project Structure

dev-to-challenges/
│
├── pulumi-challenge/
├── frontend-challenge/
├── postmark-challenge/
├── philo-agent/
└── README.md

---

🙌 Why This Repo?

This repo is my playground to:

• …

View on GitHub

▶️ 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

• Run the project with Docker Compose:

   docker-compose up --build

• Access the dApp in your browser at:

   http://localhost:3000

• 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:

• 🔗 GitHub: Pravesh-Sudha
• 💼 LinkedIn: Pravesh Sudha
• 🐦 Twitter/X: @praveshstwt
• 📺 YouTube: @pravesh-sudha

Comments

[Umang Suthar]

This is a great approach to lowering the entry barrier for developers.
Too often, blockchain ecosystems feel overwhelming because of setup complexity. Mocks and Dockerized flows like this give people the confidence to start experimenting right away.

What really stands out here is how it mirrors real-world patterns without the heavy infrastructure load. That balance between simplicity and accuracy is exactly what helps ecosystems grow faster.

[Pravesh Sudha]

Thanks for the appreciation, I wish the judges see it the same way 😅🤞

[Long Phan]

nice, best tutorial ever!

[Pravesh Sudha]

Thanks Buddy, means a lot!

[Roshan Sharma]

Really cool post, bundling a sample dApp with React + Flask inside Docker makes onboarding so much easier.
Any tips on scaling this setup beyond the mock data?

[Pravesh Sudha]

You can check the midnight Docs, Particularly with the Tutorial Demo: docs.midnight.network/develop/tuto...

I am planning on creating a separate video for it afterwards.
Stay Tuned!

[Corporate Optics]

Recommended!

[Pravesh Sudha]

Thanks!

[InstaSDR.ai]

I like it, very interesting

[Pravesh Sudha]

Thanks!