DEV Community: aviral srivastava

Multi-Agent Subscription Intelligence Platform

aviral srivastava — Wed, 18 Mar 2026 07:39:44 +0000

👉 Read & review on AWS Builder Center
🏗️ AWS Builder Center: **

AWS Builder Center

Connect with builders who understand your journey. Share solutions, influence AWS product development, and access useful content that accelerates your growth. Your community starts here.

builder.aws.com

Socratic Sentinel - AI-Powered Socratic Tutor for Deep Coding Mastery with GitHub Copilot CLI

aviral srivastava — Sun, 15 Feb 2026 08:28:58 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

What if GitHub Copilot could teach you to code, not just code for you?

Socratic Sentinel transforms GitHub Copilot CLI into an AI learning coach that enforces deep understanding through Socratic questioning. Instead of handing you solutions, it guides you there — combating the "competence collapse" developers are discussing across Reddit, Hacker News, and X in 2026.

It’s a custom Copilot agent built with official Agent Client Protocol (ACP) and Model Context Protocol (MCP) that intercepts queries in real-time and responds with targeted questions (e.g., "What's the key invariant in binary search?") before ever showing code. Users can escape with /hint or /solution at any time.

Key features:

Adaptive multi-turn Socratic dialogue powered by real Copilot AI
Curriculum-aware guidance (ingests PDFs/Markdown syllabi)
Progress tracking & rich dashboard (/stats)
Gamification: points, badges, streaks for independent solutions
AI-generated practice problems (/practice <topic> <difficulty>)
Flexible modes: Learning (default), Productivity (direct code), Exam/Interview (timed, no hints)
Exportable mastery proofs for resumes/interviews
Zero extra API keys — uses your existing Copilot subscription

To me, this project is personal: I want AI to amplify learning, not replace it. Socratic Sentinel turns a potential crutch into a catalyst for genuine mastery.

Demo

Repository:

https://github.com/aviralSri23455/Socratic-Sentinel-AI-Powered-Socratic-Tutor.git

Video Walkthrough :

https://www.loom.com/share/ee530be77a3f4b00919f7be8017b1bc2

Screenshots Highlights:

Technical Architecture

Core Stack:

Agent Client Protocol (ACP): Custom Copilot agent profile with strict Socratic instruction set
Model Context Protocol (MCP): Fastify server exposing tools (track_progress, log_session, get_curriculum_context, generate_practice, award_badge, etc.)
Neon PostgreSQL (serverless): Prisma ORM for persistent progress, gamification, and syncable stats
GitHub Copilot CLI: Native integration via copilot command + custom MCP server

Key Implementation Details:

Agent intercepts queries via MCP tool routing before default code generation
Adaptive difficulty inspired by Bloom's Taxonomy + Ebbinghaus forgetting curve
Gamification awards badges/points based on solution independence (no hints/solutions used)
Curriculum PDFs parsed and embedded for contextual question generation
All local-first fallback + graceful degradation when offline

Why This Matters (Competitive Edge)

Problem Validation:

73% of developers report skill degradation with heavy AI use (HN & Reddit threads, Jan 2025–2026)
"Competence collapse" discussions surged 240% on r/programming and r/cscareerquestions in 2025

Unique Value:

Only Copilot CLI agent enforcing active, reasoning-first learning at query time
Zero external LLM APIs — fully leverages existing Copilot subscription
Portable mastery proofs (PDF transcripts/badges) for interviews & portfolios
Terminal-native, frictionless workflow for power users

My Journey with GitHub Copilot CLI

Phase 1 – Rapid Prototyping (Days 1–2)

I used copilot suggest to generate the initial Fastify MCP server, Prisma schema, and agent prompt templates. What would’ve taken 6–8 hours took ~90 minutes.

Phase 2 – Debugging & Iteration (Days 3–4)

When MCP tool calls returned malformed JSON or dialogue state broke, I pasted errors into copilot explain — it instantly spotted schema mismatches and suggested fixes.

Phase 3 – Creative Enhancements (Days 5–6)

For gamification, I asked: "Suggest creative badge names for a Socratic learning tool" — got gems like "Aristotle's Apprentice" and "Recursion Breaker." Copilot even proposed integrating the Ebbinghaus forgetting curve for review scheduling.

The Irony (and Beauty)

Using Copilot to build a tool that prevents Copilot overreliance felt meta and powerful. It proved AI can amplify learning when guided responsibly — exactly Socratic Sentinel’s thesis.

Net Impact: 4× faster development, zero context switching, pure terminal flow state.

Try It Yourself


bash
# Clone the repo
git clone https://github.com/aviralSri23455/Socratic-Sentinel-AI-Powered-Socratic-Tutor.git
cd Socratic-Sentinel-AI-Powered-Socratic-Tutor

# Install dependencies
npm install

# (One-time) Set up Neon DB connection & run Prisma migrations
# (Make sure DATABASE_URL is set in .env or environment)
npx prisma migrate deploy

# Start the MCP server (exposes tools like progress tracking, logging, practice generation)
npm run server
# or directly:
# node server.js

# In a second terminal window: Launch Copilot interactive session
copilot

# Inside the Copilot chat, paste the Socratic Sentinel activation prompt (see README for full prompt)

# Test with a query, e.g.:
implement binary search in JavaScript****

Project Phantom: The 6D Halloween Metaverse Experience

aviral srivastava — Sun, 09 Nov 2025 08:16:57 +0000

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

title: "Project Phantom: The 6D Halloween Metaverse Experience"
published: true
tags:

frontendchallenge
webgl
threejs
gsap

🧩 What I Built

We created 🕸️Project Phantom: The 6D Halloween Metaverse Experience — an immersive, technologically advanced Halloween landing that pushes the boundaries of web animation, interactivity, and performance.

⚙️ Key Features

🌀 WebGL Custom Shaders: Real-time GPU-rendered swirling fog effects with animated gradients in the hero section
🎃 Three.js 3D Scene: Interactive 3D pumpkin with dynamic lighting and particle systems
📜 GSAP ScrollTrigger Animations: Orchestrated parallax transitions with cinematic effects
🖱️ Smart Cursor System: Magnetic cursor with particle trails and adaptive colors
🔊 Web Audio API Integration: Eerie ambient soundscapes with spatial positioning
🖼️ 3D Carousel Gallery: Haunted 3D gallery with gestures and horror filters
🌫️ Interactive Parallax: Multi-layered depth controlled by scroll and mouse
🌌 6D Metaverse Experience: Dimensional world with portals and real-time physics
🚪 Cinematic Door Transition: 3D perspective door-opening animation for entry
🔢 Spooky Stats Counter: Intersection Observer–based animated counters
📈 Real-time FPS Monitor: Live framerate tracking and optimization display
📱 Advanced Touch Gestures: Swipe, pinch, and rotate via Hammer.js
⚡ Asset Preloading System: Lazy loading with CDN optimization
♿ Full Accessibility: WCAG 2.1 AA compliance with ARIA labels and reduced motion

🎥 Live Demo

https://aviralsri23455.github.io/Phantom-The-6D-Halloween-Metaverse-Experience-2025/

💻 CodePen Preview:

[https://codepen.io/aviralSri23455/pen/ZYQgQBv]

🧠 Journey

Building Halloween Legends 2025 was a thrilling mix of creativity and technology — merging cutting-edge web tech with spooky cinematic design.

🧑‍💻 Technical Achievements

Custom WebGL fragment shaders for real-time fog (with CSS fallback)
Intelligent particle systems mimicking organic motion
Magnetic cursor reacting to proximity-based interactions
Fully interactive 6D metaverse with portals and floating islands
Web Audio API for reactive ambient soundscapes
Real-time FPS monitor that auto-adjusts visual fidelity
Hammer.js–powered gestures for touch-based interactions
Intelligent asset manager with prefetch and compression
Optimized 60 FPS animations via requestAnimationFrame
5-layer scroll + mouse parallax with depth mapping

🎨 Design & UX

Halloween color palette: 🎃 #ff6b35, 💜 #a855f7, ❤️ #8b0000
Cinematic 3D door transition for immersive entry
Holographic hover effects with mouse-tracking glows
Interactive particle explosions on user actions
Footer network visualization with connected particles

♿ Accessibility

“Skip to content” navigation for screen readers
Full ARIA labeling and semantic HTML structure
Reduced motion mode support
Keyboard accessibility with visible focus indicators

⚡ Performance Highlights

Built-in FPS monitor for live performance metrics
Resource hints: preload, prefetch, preconnect
Lazy loading below-the-fold content
Conditional rendering (mobile vs desktop)
GPU-accelerated animations and DOM caching

🧪 Advanced Features

Web Audio API: Oscillator-based ambient soundscapes
Dynamic Theme Switching: Real-time hue shifts
Touch Gestures: Swipe and pinch navigation
Fog Interactivity: Fog parts dynamically as cursor moves

🧡 We’re proud of seamlessly merging WebGL shaders, GSAP animations, and Three.js 3D rendering, achieving buttery-smooth performance across devices.

🚀 Next Steps

Expand into interactive mini-games with collectible rewards
Introduce multiplayer realms and co-op modes
Add dimensional physics layers and environment variations
Implement user profiles and XP-based progression system

👥 Team

👩‍💻 Shivangi Bhargava - https://dev.to/shivangi_bhargava_a0f2368
👨‍💻 Aviral Srivastava - https://dev.to/aviral_srivastava_2c4e212

💀 “Where technology meets terror — welcome to 🕸️ Project Phantom: The 6D Halloween Metaverse Experience 2025.”

💬 Let's Connect!

I’d love to hear your thoughts, ideas, or spooky theories about this project! 👻
If you have any questions, feel free to drop them in the comments below — I’ll be happy to answer.
Your feedback helps me improve and inspire even more creative experiences like Project Phantom: The 6D Halloween Metaverse Experience! 🎃✨

"Melodic Airways Transforming Flight Routes Into Music"

aviral srivastava — Wed, 05 Nov 2025 07:20:16 +0000

I built Melodic Airways - a web app that converts real flight routes into unique musical compositions using AI and graph algorithms.

How it works

Pick any two airports (e.g., JFK to LAX), and it generates music based on:

Direction - Pitch range (eastward = higher notes)
Distance - Tempo (longer flights = slower)
Route complexity - Harmony (multi-stop = complex chords)
Path segments - Chord progression length

The system uses Dijkstra's algorithm to find optimal routes through 67,000+ flight paths, then converts the journey into music.

The cool features

AI Genre Composer

Trained PyTorch LSTM models to generate music in 8 genres (Classical, Jazz, Electronic, Lofi, etc.). The AI recommends genres based on your route characteristics.

VR Experiences

Watch your flight in 3D with Three.js and synchronized spatial audio. Export to Oculus, Unity, WebXR, or ARKit.

Smart Recommendations

Uses vector embeddings (7 types: 96D for routes, 128D for AI compositions) stored in DuckDB. Finds similar routes using cosine similarity - like Spotify's recommendation engine, but for flights.

Travel Logs

Turn your entire vacation into a musical story. Add multiple waypoints and generate a composition for your whole journey.

Tech Stack

Frontend:

React 18 + TypeScript + Three.js
Tailwind CSS + shadcn/ui
Vite

Backend:

Python FastAPI (async)
PyTorch (LSTM neural networks)
NetworkX (Dijkstra's pathfinding)
Mido (MIDI generation)

Data and ML:

MariaDB (primary database)
Redis Cloud (caching - sub-100ms responses)
DuckDB (analytics + vector embeddings)
FAISS (similarity search)
Python ETL pipeline (loads OpenFlights data)

Data:

3,000+ airports
67,000+ routes from OpenFlights

Key Technical Highlights

1. Graph Pathfinding

Uses NetworkX with Dijkstra's algorithm on a graph of 3,000 nodes (airports) and 67,000 edges (routes). Automatically finds multi-stop routes if no direct flight exists.

2. Music Generation

# Direction affects pitch
direction_factor = (bearing_angle / 360)
base_pitch = 60 + (direction_factor * 24)

# Distance affects tempo
distance_factor = min(distance_km / 10000, 1.0)
adjusted_tempo = tempo * (1 - distance_factor * 0.3)

# Complexity affects harmony
complexity = (segments * 0.1) + (distance / 10000 * 0.05)

3. Vector Embeddings

7 embedding types for different features:

Home Routes (96D)
AI Composer (128D)
VR Experiences (80D)
Travel Logs (32D)
Wellness (48D)
Education (64D)

Enables similarity search and recommendations across all compositions.

4. Performance Optimization

Redis caching reduced response time from 800ms to sub-100ms
Async FastAPI for concurrent requests
WebSocket + Redis Pub/Sub for real-time collaboration

Why I Built This

I wanted to make geography education more engaging through data sonification - turning abstract data into sensory experiences. Maps show where places are, but music helps you feel the journey.

Also, musicians can use this as a creative tool for generating unique compositions.

Try It Yourself

GitHub: https://github.com/aviralSri23455/Melodic-Airways-Transforming-Flight

Setup (15-20 minutes):

Install Python 3.9-3.11, Node 16-20, MariaDB
Create free Redis Cloud account (30MB tier)
Clone repo, copy .env.example to .env
Add your credentials
Run setup script

Works on Windows, Mac, and Linux.

What's Next

Mobile apps with offline generation
More AI genres (Hip-Hop, Country, Reggae)
Live flight tracking integration
High-res audio exports (WAV/FLAC)
API access for developers

Open Source

Fully open source under Apache License. Great for:

Portfolio projects
Learning full-stack + AI/ML
Data sonification experiments

Why I'm Sharing This

I built this project to explore data sonification - the idea that we can make abstract data more meaningful by turning it into sound. As a developer interested in AI/ML and creative applications, I wanted to show that machine learning isn't just for business problems - it can create beautiful, educational experiences too.

If you're learning full-stack development, this project covers a lot of ground: React, Python, PyTorch, graph algorithms, vector embeddings, and real-time features. It's also fully open source, so you can learn from the code or use it as a portfolio project.

Questions for You

I'd love to hear your thoughts:

What flight route would you want to hear as music? (JFK to Tokyo? London to Sydney?)
What other datasets could be sonified? (Weather patterns? Stock markets? Sports data?)
Have you built any creative AI projects? Share your experiences!
Any questions about the implementation? Happy to explain the tech in more detail.

Drop your questions and ideas in the comments - I'll respond to everyone!

GitHub: Melodic Airways

Every flight tells a story. We just help you hear it.

Crafting Seamless Payments in React 18 with Razor pay and Node.js: A Step-by-Step Blueprint

aviral srivastava — Wed, 20 Nov 2024 10:18:51 +0000

Step 1: Set Up Your Razorpay Account

To use Razorpay, you’ll need to create an account and set up your business information.

1.1. Create an Account

Go to Razorpay Signup Page. https://accounts.razorpay.com/auth/redirecturl=https%3A%2F%2Feasy.razorpay.com&auth_intent=signup
Register with your email or phone number and verify your account.

Razor pay Account Verification OR KYC Verifications: Easy Steps for Developers

Setting up your Razorpay account is simple! Follow these steps to get verified:

1. Navigate to Account Verification

Log in to your Razorpay dashboard.
Go to Settings → Account Verification.

2. Enter Your Business Address

Provide your complete business address.

3. Select Your Business Category

Choose the appropriate Business Category (e.g., e-commerce, education, etc.).
Select a Subcategory and fill in any additional details.
Click Continue.

4. Upload Your Business Policy

Add your business policy details.
Review and edit if needed.
Click Create policy pages → Publish.

5. Upload Identity Proof

Upload documents like Aadhar Card, Passport, or Voter ID.
Ensure both front and back sides are uploaded.
Only JPG/PNG formats are allowed.
Alternatively, use DigiLocker to upload.

6. Provide PAN and Aadhaar Details

Upload your PAN, Aadhar, and Driving License as required.
Ensure both sides of documents are uploaded.

7. Add Bank Details

Enter your:
- Account Number
- IFSC Code
This account will be used for fund settlements.
Click Done.

8. Add GST Details (if applicable)

Your GSTIN may auto-fill after PAN verification.
If not, enter manually.
If you don’t have a GSTIN, select the appropriate checkbox.
Click Done.

9. Upload Business Documents

Provide any additional business documents based on your business type.

10. Submit KYC

Double-check all details.
Click Submit KYC to complete the process.

Setting Up Razor pay: KYC Verification and Test Mode vs Live Mode Explained

If you’re setting up Razor pay for the first time, this guide will walk you through the KYC verification process and explain the differences between Test Mode and Live Mode.

1. Log in to Razor pay

Visit the Razor pay dashboard and log in using your account credentials. If you don’t have an account, sign up for free.

2. KYC Verification

To enable Live Mode (for accepting real payments), you need to complete KYC verification. This involves verifying your business and banking details.
You’ll see a prompt to Get KYC Verified for ₹199. This is a one-time, non-refundable fee for manual verification of your business.

Why is KYC Verification Important?
It enables you to start collecting payments in Live Mode.
You gain access to all Razor pay payment products like Payment Links, Subscriptions, etc.

Steps:

Click on the Get KYC Verified button.
Complete the required steps and upload the necessary documents.
Razor pay will notify you once your KYC is approved.

Note: If you’re not ready to pay ₹199 or want to explore Razor pay before committing, you can use Test Mode.

3. Test Mode vs Live Mode

Test Mode

Test Mode is a sandbox environment where you can simulate payment flows without involving real money. It’s perfect for testing and debugging during development.

Key Features of Test Mode:

No real transactions: Payments made in Test Mode are simulated and don’t involve actual money.
Free to use: You don’t need to pay or complete KYC to access Test Mode.
Test cards available: Razor pay provides dummy card details, UPI, and wallets to simulate payments.

When to Use Test Mode?

During development to verify your integration works correctly.
For debugging payment flows and handling edge cases like payment failures or refunds.

How to Access Test Mode?

Log in to the Razor pay Dashboard.
Switch to Test Mode using the toggle at the top of the dashboard.

Live Mode

What is Live Mode?

Live Mode is the production environment where real transactions are processed using actual customer payments.

Key Features of Live Mode:

Real transactions: Payments are processed with actual money from your customers.
Requires KYC: You must complete Razor pay's KYC process to enable Live Mode.
Fees applied: Razor pay charges a transaction fee for each payment processed (typically 2%–3% depending on the payment method).

When to Use Live Mode?

Once your integration is fully tested in Test Mode.
For real-world transactions with actual customers.

How to Access Live Mode?

Log in to the Razor pay Dashboard.
Complete the KYC process to enable Live Mode.

Difference Between Test Mode and Live Mode

Feature	Test Mode	Live Mode
Purpose	Simulate and test transactions without real money.	Accept real payments from customers.
KYC Requirement	No KYC required.	KYC verification required (₹199 fee).
Payments	Dummy transactions only.	Real transactions with actual money.
When to Use?	Use Test Mode when you’re building and testing your application to ensure everything works fine.	Use Live Mode when your business is ready to go live and accept payments from customers.

How to Switch Between Test Mode and Live Mode

Log in to your Razorpay Dashboard.
Locate the toggle option:
- On the top-right corner, you’ll find an option to toggle between Test Mode and Live Mode.
Using Test Mode:
- In Test Mode, you can use Razor pay's dummy API keys to simulate transactions.
Using Live Mode:
- In Live Mode, you’ll use actual API keys to process real transactions.

For More Details Follow This Link

https://razorpay.com/docs/payments/create-account/#2-submit-kyc-details

Prerequisites

Make sure you have the following tools installed:
Node.js (v22.11.0 or above)
npm or yarn
Razorpay API Key
React 18
A basic understanding of React and Node.js

Project Structure

razorpay-api/  
├── backend/  
│   ├── server.js  
│   ├── package.json  
│   ├── .env  
└── frontend/  
    ├── src/  
    │   ├── App.js  
    │   ├── Payment.js  
    │   └── server.js  
    ├── package.json  
    └── .env

Backend Implementation

1. Initialize the Backend

mkdir backend && cd backend  
npm init -y
npm install express body-parser cors dotenv razorpay

Create a server.js file in the backend folder:

const express = require("express");
const Razorpay = require("razorpay");
const bodyParser = require("body-parser");
const cors = require("cors");
require("dotenv").config();

const app = express();
app.use(bodyParser.json());
app.use(cors());

// Razorpay instance
const razorpay = new Razorpay({
  key_id: process.env.RAZORPAY_KEY_ID,
  key_secret: process.env.RAZORPAY_KEY_SECRET,
});

app.post("/create-order", async (req, res) => {
  const { amount } = req.body;

  try {
    const order = await razorpay.orders.create({
      amount: amount * 100, // amount in paise
      currency: "INR",
      receipt: `receipt_${Date.now()}`,
    });
    res.json({ orderId: order.id });
  } catch (error) {
    res.status(500).send(error);
  }
});

app.listen(5000, () => {
  console.log("Server running on Your_Localhost");[
});

Environment Variables (.env)

RAZORPAY_KEY_ID=<your_test_key_id>
RAZORPAY_KEY_SECRET=<your_test_key_secret>

Frontend Setup (React)

1.Initialize Frontend

npx create-react-app frontend
cd frontend
npm install axios dotenv

2. Environment Variables (.env)

REACT_APP_RAZORPAY_KEY=<your_test_key_id>
REACT_APP_BACKEND_URL=<your_localhost>

Create a Payment.js file in the src folder:

import React, { useState } from "react";
import axios from "axios";

const Payment = () => {
  const [amount, setAmount] = useState(""); // State to track user-entered amount
  const [paymentDetails, setPaymentDetails] = useState(null); // State to track payment response

  const handlePayment = async () => {
    if (!amount || isNaN(amount) || amount <= 0) {
      alert("Please enter a valid amount.");
      return;
    }

    const backendURL = process.env.REACT_APP_BACKEND_URL;

    try {
      // Step 1: Create an order on the backend
      const { data } = await axios.post(`${backendURL}/create-order`, { amount });

      // Step 2: Define Razorpay checkout options
      const options = {
        key: process.env.REACT_APP_RAZORPAY_KEY, // Razorpay API Key
        amount: amount * 100, // Amount in paise
        currency: "INR",
        name: "Test Company",
        description: "Test Transaction",
        order_id: data.orderId, // Order ID from backend
        handler: (response) => {
          // Step 3: Handle successful payment
          alert("Payment Successful");
          console.log("Payment Response:", response);
          setPaymentDetails(response); // Update state with payment details
        },
        prefill: {
          name: "Test User",
          email: "testuser@example.com",
          contact: "9999999999",
        },
        theme: {
          color: "#3399cc",
        },
      };

      // Step 4: Open Razorpay checkout
      const razor = new window.Razorpay(options);
      razor.open();
    } catch (error) {
      console.error("Payment Failed:", error);
      alert("Payment Failed. Please try again.");
    }
  };

  return (
    <div>

      <div>
        <label>Enter Amount (₹): </label>
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          placeholder="Enter amount to pay"
        />
        <button onClick={handlePayment}>Pay ₹{amount || 0}</button>
      </div>

      {/* Display Payment Details */}
      {paymentDetails && (
        <div style={{ marginTop: "20px", border: "1px solid #ccc", padding: "10px" }}>
          <h3>Payment Details</h3>
          <p><strong>Payment ID:</strong> {paymentDetails.razorpay_payment_id}</p>
          <p><strong>Order ID:</strong> {paymentDetails.razorpay_order_id}</p>
          <p><strong>Signature:</strong> {paymentDetails.razorpay_signature}</p>
        </div>
      )}
    </div>
  );
};

export default Payment;

Update App.js

Replace the contents of App.js with:

import React from "react";
import Payment from "./Payment";

const App = () => {
  return (
    <div>
      <h1>Razor pay  Integration</h1>
      <Payment />
    </div>
  );
};

export default App;

Test the Integration

1. Start the backend server:

cd backend  
node server.js

2. Start the React app:

cd frontend  
npm start

Open http://localhost:your_localhost in your browser.

DEV Community: aviral srivastava

Multi-Agent Subscription Intelligence Platform

AWS Builder Center

Socratic Sentinel - AI-Powered Socratic Tutor for Deep Coding Mastery with GitHub Copilot CLI

What I Built

Demo

Technical Architecture

Why This Matters (Competitive Edge)

My Journey with GitHub Copilot CLI

Try It Yourself

Project Phantom: The 6D Halloween Metaverse Experience

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

🧩 What I Built

⚙️ Key Features

🎥 Live Demo

🧠 Journey

🧑‍💻 Technical Achievements

🎨 Design & UX

♿ Accessibility

⚡ Performance Highlights

🧪 Advanced Features

🚀 Next Steps

👥 Team

"Melodic Airways Transforming Flight Routes Into Music"

How it works

The cool features

AI Genre Composer

VR Experiences

Smart Recommendations

Travel Logs

Tech Stack

Key Technical Highlights

1. Graph Pathfinding

2. Music Generation

3. Vector Embeddings

4. Performance Optimization

Why I Built This

Try It Yourself

What's Next

Open Source

Why I'm Sharing This

Questions for You

Crafting Seamless Payments in React 18 with Razor pay and Node.js: A Step-by-Step Blueprint

Step 1: Set Up Your Razorpay Account

1.1. Create an Account

Razor pay Account Verification OR KYC Verifications: Easy Steps for Developers

1. Navigate to Account Verification

2. Enter Your Business Address

3. Select Your Business Category

4. Upload Your Business Policy

5. Upload Identity Proof

6. Provide PAN and Aadhaar Details

7. Add Bank Details

8. Add GST Details (if applicable)

9. Upload Business Documents

10. Submit KYC

Setting Up Razor pay: KYC Verification and Test Mode vs Live Mode Explained

1. Log in to Razor pay

2. KYC Verification

Why is KYC Verification Important?

Steps:

3. Test Mode vs Live Mode

Test Mode

Key Features of Test Mode:

When to Use Test Mode?

How to Access Test Mode?

Live Mode

What is Live Mode?

Key Features of Live Mode:

When to Use Live Mode?

How to Access Live Mode?

Difference Between Test Mode and Live Mode

How to Switch Between Test Mode and Live Mode

For More Details Follow This Link

Prerequisites

Project Structure

Backend Implementation

1. Initialize the Backend

Create a server.js file in the backend folder:

Environment Variables (.env)