Forem: NP

Blockchain for Beginner Developers

NP — Thu, 13 Nov 2025 14:02:14 +0000

This writeup is for someone who wants to learn the basics and understand the system in simpler terms.

What is Blockchain?

Blockchain is a record or log of all the Transactions that happened on the network. A Transaction is any action or event recorded on the blockchain.

For example, a social media app:

In current system, a centralized app like Instagram, all your posts and data are stored on Meta’s servers, which control access and rules.
In a blockchain-based social app, your posts are stored across many nodes — no single company owns or can delete your data, since it’s shared and verified by the network.

What is Block?

A block is a list of transactions(actions). It also has timestamp, hash (block’s unique id) and previous block’s hash.

Block has block size, a limit of how many transactions can be stored. The size is usually decided by the blockchain.

Note: If there aren’t enough transactions to fill a block, a smaller block after a certain time interval can be created.

How the process works?

No one is boss in a blockchain network so computer nodes on the network need to perform consensus and agree on the transactions to be approved. Each blockchain can define their own consensus methods.

Some of them:

Proof of Work (PoW): Solve puzzles. Miners are people who solve puzzles and the first to solve it wins the right to add the next block. Example: Bitcoin
Proof of Stake (PoS): Lock up/Stake crypto coins. Validators are people who stake. The system randomly picks one validator (like a lottery weighted by stake). Validator proposes a block, others check it. If valid → they get a reward; if they cheat → they lose their stake. Example: Ethereum (now)
PBFT (Practical Byzantine Fault Tolerance): Nodes vote on the next block
PoA (Proof of Authority): Only trusted validators approve blocks.
PoH (Proof of History): adds timestamps for faster validation (used by Solana).

What is a wallet?

A digital wallet that hold cryptocurrencies. It has a public key, private key and an address.

Address: Address of wallet (like mailbox location or bank account number to receive currency)
Public Key: Long string code used to create digital signatures - unique id (like name on mailbox)
Private Key: Key to access the wallet (like key to open mailbox or password for bank account)

What is Smart Contracts?

A block of code that executes a list of actions when a certain transaction is performed.

What is Gas Fees and Transaction costs?

Gas Fees is payment to run smart contracts or process transactions on blockchain.
Transaction costs are the total fees to move money or data, including gas and network charges.

What is Tokens and Cryptocurrency?

Tokens are digital assets built on top of a blockchain (like NFT, game tokens, etc.)

Cryptocurrency is the digital money of a blockchain (also a type of token). Just like real money comes in different forms—dollars, euros, dirhams, etc.; cryptocurrency also exists in many types: Bitcoin, Ethereum, Polkadot (DOT), Solana (SOL), Cardano (ADA), and more.

What is Parachain?

A custom blockchain that runs alongside other blockchains like a branch, connected to a main chain. So, if blockchain network is a tree then the main chain is like a trunk and the parachain are like its branches.

What is Web3?

It is a type of internet network.

The 1990s Web1 was read-only. So, user could only view pages and see information.
The 2000s-now Web2 is read-write. So, user can post, interact, but data is owned by big companies.
The Web3 (blockchain web) is read-write-own. So, user can interact, transact, and truly own their data and assets without relying on a central authority.

Common Questions:

Do Miners solve puzzle by hand? No, they use powerful computers to solve the puzzles. So it is expensive for them as well.
What if 1 Miner/Validator takes up a lot of computing power or staked coins in PoW/PoS? It is called 51% attack or massive cheating. If that happens, people would lose trust in that blockchain and abandon it. Coin value also plummets. So, cheating is possible but the financial and reputation loss makes it discouraging.
How does one connect to blockchain? A node, a wallet or a bridge.
- Connecting as a node means downloading entire blockchain.
- Connecting with a wallet allows to make cryptocurrency transactions.
- Bridge allows apps to connect to the blockchain programmatically.

P.S. - If you have doubts, comment it. Everyone can chip in and come on consensus. That's how we learn blockchain together.

AI Studio - 100% Vide Coded React app

NP — Mon, 10 Nov 2025 21:29:28 +0000

I used AI studio Build to create a React app from scratch. I challenged myself to make a fully AI-coded application, testing the limits of what’s possible.

My Journey:

Attempt 1:

I actually built the same project twice. My first attempt was tough because I tried to do too much in a single prompt. Although my initial prompt was detailed and seemingly accurate, it wasn’t particularly helpful. As I kept adding more details, the outputs became increasingly inconsistent and scattered.

Create a React + FastAPI + Firebase web application called "VoiceBeat" - a voice-driven drum machine where users vocalize drum patterns that get converted to actual drum sounds.

CORE FUNCTIONALITY:

1. INSTRUMENT SETUP SECTION:
- Allow users to create mappings for 5 drum instruments: Kick, Snare, Hi-hat, Clap, Tom
- For each instrument, user inputs a text label for their vocal sound (e.g., "boom" for Kick, "chuck" for Snare, "tss" for Hi-hat)
- Each instrument has a "Preview" button to hear the software drum sample
- Use clean, modern UI with instrument icons

2. RECORDING SECTION:
- Time signature selector (4/4, 3/4, 6/8)
- BPM input field (default 120 BPM)
- Metronome toggle (on/off) with visual click indicator
- Two recording options:
  a) "Record Voice" button - records audio in real-time from microphone
  b) "Upload Audio" button - allows uploading audio file (mp3, wav)
- Display recording timer and waveform visualization during recording
- Stop recording button

3. AUDIO PROCESSING:
- Use Web Speech API or Gemini API to transcribe the recorded/uploaded audio to text with timestamps
- Match transcribed words to user's defined instrument labels
- Preserve timing gaps between vocal sounds (this is critical for rhythm)
- Display detected pattern as a visual timeline with instrument hits marked

4. PLAYBACK SECTION:
- Visual timeline showing each detected drum hit with instrument name and timing
- Play button to hear the pattern with software drum samples
- Metronome option during playback
- Display current playback position
- Allow basic editing: add/remove/move individual hits on timeline

5. FIREBASE INTEGRATION:
- User authentication (Google sign-in)
- Save instrument mappings (vocal label → drum instrument)
- Save created patterns with name and metadata
- Load saved patterns
- Simple profile page showing user's saved patterns

6. TECHNICAL REQUIREMENTS:
- React frontend with modern hooks
- FastAPI backend for audio processing and Firebase integration
- Use Web Audio API for drum sample playback and metronome
- Include 5 high-quality drum samples (kick, snare, hi-hat, clap, tom)
- Responsive design, mobile-friendly
- Clean, minimalist UI with good UX

7. UI/UX:
- Single page app with clear sections
- Modern color scheme (suggest dark theme for music app)
- Clear visual feedback for all actions
- Loading states during processing
- Error handling with user-friendly messages

Start with a working prototype that focuses on the core flow: setup instruments → record voice → see detected pattern → play back with drum sounds.

Attempt 2:

The second attempt was far more streamlined and produced much better results. This time, I abandoned the idea of combining multiple frameworks and tools and focused solely on building a clean, well-structured React application.

Setup

I started with a prompt focused only on the UI—setting up a five-piece drum kit displayed as cards, defining both the layout and app structure.

Create a React web application called "VoiceBeat" - a voice-driven drum machine.

For this first step, build ONLY the instrument setup section. No other features yet.

REQUIREMENTS:

1. CREATE INSTRUMENT SETUP SECTION:
- Display 5 drum instruments in a clean horizontal grid layout
- The 5 instruments are: Kick, Snare, Hi-hat, Clap, Tom

2. EACH INSTRUMENT CARD SHOWS:
- Instrument name as a heading
- A small icon or emoji representing the instrument (🥁 for Kick, 🎵 for Snare, etc.)
- A text input field labeled "Vocal Sound" with these default values:
  - Kick: "boom"
  - Snare: "ka"
  - Hi-hat: "tss"
  - Clap: "clap"
  - Tom: "dum"
- A "Preview" button (doesn't need to work yet, just display it)
- Color-coded accent (border or background):
  - Kick: red accent
  - Snare: blue accent
  - Hi-hat: yellow accent
  - Clap: green accent
  - Tom: purple accent

3. DESIGN REQUIREMENTS:
- Use indigo color theme for the overall app background and UI elements
- Modern, clean design with good spacing
- Responsive layout
- Cards should be visually distinct but consistent
- Use Tailwind CSS for styling

4. APP STRUCTURE:
- Simple single-page React app
- Clean component structure
- No backend needed for this step
- No other sections yet (we'll add timeline, controls, etc. in next steps)

Focus only on making the instrument setup section look polished and functional for user input. The preview buttons don't need to do anything yet.

Next, I placed all the drum cards in a left sidebar and built a sequencer for each of the five instruments. The implementation turned out neat and fully functional. You can check out the video below to see it in action.

Added controls

After that, I worked on adding controls—Play, Stop, BPM, Metronome, Bars, and Time Signature. I spent some time resolving layout issues like scrolling and styling, and I fixed the metronome and time signature logic since they weren’t syncing properly at first. For each prompt, I focused on one to three small fixes or updates at a time. One of those prompts looked like this:

Fix two metronome issues:

1. Metronome should respect the selected time signature (currently always plays 4/4):
   - 4/4 = downbeat every 4 beats
   - 3/4 = downbeat every 3 beats
   - 6/8 = downbeat every 6 beats

2. When sequencer is already playing and user turns metronome ON, it should start immediately in sync with the current playback position (not wait for next loop).

Changed sequencer functioning

Next, I improved the sequencer’s visual layout by introducing a proper timeline view instead of plain boxes. This made the bars and sub-beats visually distinct. I also added the ability for users to drag and reposition selected notes along the timeline.

Voice mapping

This was the most crucial part—the Voice Mapping logic. Users can record or upload an audio clip of a rhythm they have in mind, such as “boom boom ka boom boom tss boom boom ka boom boom clap.” The app analyzes the audio using the Gemini API, identifies the sounds, and maps them to corresponding drum instruments to automatically generate a track. It’s essentially a lightweight version of a DAW combined with an intelligent pattern note-taker. The vocal mapping is editable, allowing users to assign specific words to particular instruments or notes.

Midi export

The final step was exporting the project as a MIDI file that can be used in any DAW. You can see this in the demo video. Initially, each instrument was exported on a separate track, so I refined it to consolidate everything into one track.

To wrap up, I also added piano and guitar instruments and mapped them accordingly.

Pros:

Restoring a previous version of the project is as easy as clicking a button. If something goes wrong, you can instantly revert to an earlier state.
Deployment is just as simple—after connecting your project to the Cloud Console, click Deploy in AI Studio, select the project, and you’re done. The Studio handles the rest and provides a live deployment link.
Gemini API integration is seamless—it automatically creates an API key and connects it during development and deployment.
You can define system instructions for the project, such as specific tools or knowledge it should use.
The prompt supports file and voice uploads as inputs, adding a lot of flexibility.

Cons:

Chat history isn’t saved after a session. You can continue the project later, but if you refresh the browser or revisit the project, you lose previous context.
Each file has version control, but versions aren’t labeled clearly enough to identify changes easily.
Since the app was built in React, AI Studio tends to put all code into a single App.tsx file, which becomes difficult to manage. I had to ask it to split it into multiple files after few prompts.
The Auto Fix button appears when unresolved errors occur, but it doesn’t always provide enough details about what went wrong. In that case, I had to revert to the latest stable version.

My recommendations:

Keep it simple. Work on one major task or a few minor ones at a time. Avoid overloading prompts. If a task feels too big, break it into smaller checkpoints.
Revert early. If multiple prompts or Auto Fix attempts make things worse, roll back to a stable version immediately and try a different approach.
Allow flexibility. The Studio produces better results when you give it some creative room rather than rigid instructions.
Since chat history isn’t saved after a session, save your prompts in a separate file. Alternatively, you could use system instructions to make the app save them automatically—something I didn’t try but would recommend experimenting with.

Overall, AI Studio is a powerful tool for both non-developers who want to visualize their ideas in real life and experienced developers (like me) looking to speed up their workflow and reduce manual coding time.

48 hours date with Kiro IDE

NP — Wed, 29 Oct 2025 20:39:26 +0000

The Project

What my project was intended to be?
The project aimed to create a Reddit game using the Devvit platform with the React framework. The game’s goal was to play drum beats accurately as they reached the play mark. If a player achieved over 90% accuracy, a challenge post would be generated for the community. The community would then create choreography for the beats using a 3D character model and its attached animations.

What my final project became?
The project successfully implemented the first phase. However, the challenge post concept evolved from choreography to a speed challenge (explained the pivot later). In the speed challenge, players replay the same beats as the original player but at a higher speed. If they complete the challenge with 90% accuracy or more, a new challenge post is created at an even faster tempo—continuing the chain.

TL;DR
Built a Reddit rhythm game using the Devvit platform and React with help from Kiro IDE. Overcame major hurdles in UI, scoring, and 3D integration, eventually pivoting to a speed challenge format. Learned to trust AI collaboration, iterate faster, and balance creativity with technical precision throughout the journey.

My Journey Sneak Peak

Designing the app flow: Built a high-level navigation structure connecting the main game’s tabs and pages.
Integrating drum beat audio: Created a drum kit folder with various sound files for each drum piece and imported them into the app.
Developing the main game logic (UI challenges): Designed the game interface to display and detect drum hits as they reached the hit line, iterating through several UI adjustments along the way.
Implementing the scoring system: Built the logic to detect hits, calculate scores, and measure player accuracy.
Introducing the challenge post: Players achieving over 90% accuracy would trigger a community challenge post—inviting others to choreograph a 3D character dance to the same beats.
Overcoming roadblocks and pivoting: When 3D models failed to load properly, the challenge concept evolved. The new version invited players to replay the same beats at a faster speed, competing for higher leaderboard scores.
Final touches and documentation: Wrapped up with final fixes, polish, and thorough documentation of the entire project.

My Background

I’m primarily a Software Developer with a Bachelor’s degree in Software Engineering. Lately, I’ve been focusing my career on AI and Security—both individually and where they intersect. Over the past year, I’ve experimented with several of the new “vibe” coding tools that have entered the scene, each offering a unique experience. I’ve also worked with AWS Q, which integrates nicely with Visual Studio Code. It was solid—but when it comes to smoothness, Kiro takes the cake, the baker, and the whole bakery.

Why Kiro is better?

Backed by Claude: I recently started using Claude, and out of all the AI tools I’ve tried, it consistently gets the job done faster, smoother, and with fewer prompts.
Strong session management: Kiro seems to handle conversation memory exceptionally well, maintaining context more effectively and making problem-solving feel structured and streamlined.
Smart session resets: Of course, even good session management has limits. I really appreciate that Kiro can summarize an old session and start a new one with the previous context intact. I’m sometimes skeptical about whether all details carry over, so I double-check and let it ask clarifying questions—but so far, it hasn’t missed a beat.
Autopilot mode: I completed my entire project using Autopilot. Having used AWS Q before, I can say this feature works impressively well—especially coming from someone who usually doesn’t like others touching their code.
Credit-friendly: This one surprised me. Kiro’s credit usage is actually quite reasonable, which makes it easy to keep using without constantly worrying about limits.

My Entire Journey in Detail...

1. Designing the app flow

I started by setting up the Devvit project and opening it in the Kiro IDE. The first task I gave Kiro was to remove the default code in App.tsx and create four tabs: Home, Join Game, Leaderboard, and Tutorial. Later, I restructured the layout into three tabs by merging Home and Join Game into a single page for better flow. I also added navigation logic and back buttons to enable smooth, circular navigation across the app.

2. Integrating drum beat audio

Next, I created a dedicated drum kit folder containing multiple sound files for each drum piece and imported them into the app. I then built a form that allowed players to assign different sounds to each drum component and adjust them before starting the game.

Initially, I placed the drum kit in the assets folder and asked Kiro to use it in the React app. What I didn’t realize was that assets was meant for backend (Express) code, not the React client. This led to repeated 401 and 404 errors. Kiro imeplemented the logic using the Web Audio API, but it didn’t provide the exact sounds I needed—and lacked variation among drum pieces.

Then it clicked: the audio files needed to be in the src/client folder for React to access them properly. Once that was fixed, Kiro generated a complete sound customization form that worked perfectly.

3. Developing the main game logic - UI Struggles and Changes

With the foundations in place, it was time to build the main game logic. The core idea was simple: the player matches drum beats to a background track. Visually, I imagined an old film reel or gramophone-style animation, where the sound waves move as if a pin were playing them.

Kiro and I tried several approaches. First, we attempted to simulate the motion using an audio wave image that updated every second. However, this approach distorted the image—compressing it instead of creating smooth movement. Then, we tried embedding a live waveform generated externally and animating it horizontally across a div. It initially looked promising, but responsiveness issues made it unreliable across different screen sizes. The animation moved inconsistently—sometimes too fast, sometimes too slow.

After numerous iterations and plenty of “this doesn’t work” moments, Kiro suggested generating a live audio waveform using math functions. But that produced a random sine wave unrelated to the actual sound. Eventually, I decided to start over—keeping the same context but wiping all code clean. I explained my full game vision to Kiro and let it ask clarifying questions.

Finally, I dropped my weapons. Luckily in retrospective view, we started new session with same context. I removed all the code from the file. I gave it a free reign. I explained my game to Kiro and allowed it question back to me.

Once it understood, Kiro implemented a new version from scratch. The first attempt was clunky—only background music played, and the visuals were overlapping. The beats initially moved horizontally, which didn’t work well across devices. I asked Kiro to make the beats fall vertically instead. The early results were jerky, but after several rounds of debugging and logic tuning, we finally achieved smooth, responsive beat animations.

4. Implementing the scoring system

Next came the scoring system — and with it, a few surprises. During testing, I noticed something odd: my game displayed Hits: 108/105 and Accuracy: 102.9%. Now, I know I’m good, but definitely not that good!

This revealed a flaw in the original scoring logic. After several rounds of debugging and back-and-forth with Kiro, we finally fixed the calculation so that accuracy stayed realistic.

However, a new issue emerged — saving scores triggered a 502 error, and fetching the leaderboard resulted in a 500 error. After a bit of investigation, Kiro discovered the culprit: Redis API changes. The latest documentation showed that some method names had been updated, for example:

redis.zadd() → redis.zAdd()
redis.zrevrange() → redis.zRevRangeWithScores()
redis.zremrangebyrank() → redis.zRemRangeByRank()
redis.zcard() → redis.zCard()

Also parameters and return formats were different:
redis.zadd(key, score, member) → redis.zAdd(key, { score: score, member: member })
['member1', 'score1', 'member2', 'score2'] (flat array) → [{member: 'member1', score: score1}, {member: 'member2', score: score2}] (object array)

5. Introducing the challenge post

With the core game logic complete, I decided to experiment with a challenge post feature. If it worked, great; if not, it could easily be removed. I asked Kiro for its opinion on the idea:

What do you think about this idea in terms of implementation. If a user scores above 98% accuracy we use the beats (the original list that they had to play) and create a new reddit post. Here we share the user who played the beats and their accuracy and we play the beats and the bg. I have fbx characters with different dance animation which I have added. Meaning a character model can do different dance animations. Another user can now use this new dance beats and arrange the dance animations as they like. So we only create a list of naimtion that plays one after the other on the beats. I know it can be done using react three fiber, I have done it seperately before, but do you think this is good viable idea for reddit game and implemention it well.

I already suspected it was a strong concept, and Kiro agreed—highlighting its potential for social gamification and adding a creative community layer. It also suggested an implementation plan involving beat saving, a dance choreography interface, and 3D character integration.

Kiro first built the challenge post logic, including the necessary initial data structure for each post. My next task was to source 3D character models from the free, open-source platform Mixamo and blend multiple animations using Blender. Once the models were ready, I imported them into the app.

Kiro attempted to render the three character models in a static pose—but the app failed to load entirely, running into multiple errors during startup.

6. Overcoming roadblocks and pivoting

I took a short pause—but not a stop. I discussed the next steps with Kiro, aiming to pivot and brainstorm new directions for the challenge feature. The first few ideas leaned more toward data visualization than actual gameplay. But then, Kiro proposed three creative renditions:

Simple Head-on Challenge – Other players replay the same beats and try to outscore the original player.
Remix Battle – Players reuse the beat sequence but swap out drum sounds to create their own remix.
Speed Run – Players replay the same beat pattern at an increased tempo.

The third idea instantly clicked with me. I extended it further—what if, every time a player successfully completed the challenge with high accuracy, the next version became even faster, forming an ongoing speed loop?

After several rounds of iteration and debugging, Kiro and I got it working smoothly: each completed challenge now generates a new one with higher speed, keeping the gameplay endlessly engaging.

7. Final touches and documentation

The last stage was all about polish and cleanup. I focused on:

Adding loading indicators
Adjusting color themes
Commenting out all debug console logs
Refining button sizes and layout
Handling Git fixes
Writing and organizing project documentation

These final touches brought everything together—transforming the prototype into a complete, playable Reddit game.

My learnings

I realized that it’s often best to give free rein in the beginning. I tend to have a strong visual idea of what I want, which sometimes makes me dive too deep into details too early. But with an agentic IDE like Kiro, it’s far more effective to start broad—share the bigger vision first—and then refine together. Letting it explore freely at the start often led to results more creative and efficient than what I had in mind.

When did it win over me?

When it out-designed me: Kiro surprised me with a cleaner, smarter UI implementation than the one I had planned.
When it became my brainstorming partner: It didn’t just follow instructions—it actively helped me pivot and rethink the game flow when things weren’t working.
When it tried to make me laugh: In the middle of all the chaos, it actually tried to lighten the mood. That’s when I realized I wasn’t just coding with an IDE — I was collaborating with one.

Feedback

At one point it went crazy and started writing crazy stuff which may make sense to it but not me. If any of this made sense to you, let me know!

Techstack

Devvit: Reddit's developer platform for building immersive apps that run natively in posts
React 19: Modern UI framework with hooks, StrictMode, and TypeScript integration
Express 5: Backend API server with RESTful endpoints and middleware support
Redis: Fast data persistence for leaderboards, beat sequences, and speed challenges (via Devvit)
Tailwind CSS 4: Utility-first styling framework with dark theme support
TypeScript 5.8: Type-safe development across client, server, and shared modules
Vite 6: Fast build tool with hot module replacement and optimized production builds
Web Audio API: Browser-native audio processing for drum sound playback and timing

Conclusion

What started as a simple idea to create a rhythm-based Reddit game evolved into a full journey of experimentation, problem-solving, and creative discovery. Working with Kiro not only helped me bring the project to life but also changed how I approach development—less about controlling every detail and more about collaborating, iterating, and trusting the process.

From designing the app flow to implementing the game logic, facing bugs, pivoting concepts, and finally polishing the experience, every step taught me something new—about code, creativity, and adaptability. In the end, the project became more than just a game; it became proof of how human imagination and AI-driven tools can create something truly dynamic together.

P.S. - Looking forward to a version where audio commands will make the hands-free coding possible. That will give more time to explore more technologies.