Stories by Shaman on Medium


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5wbJsRNbOtDm1EJ_O96prg.jpeg"><figcaption>The Jane Street India Case</figcaption></figure><p>Hey everyone! I’m a third-year CS student here in Mumbai, and like many of you, I’ve been absolutely fascinated by the intersection of machine learning and fintech. But last month, something happened that made me realize just how powerful (and dangerous) these technologies can be when used with the wrong intentions.</p>
<p>I’m talking about the Jane Street case — a complex situation that’s currently under investigation by SEBI. As someone who’s been learning about ML algorithms and dreaming of working in fintech, this case has been both educational and thought-provoking. Let me break it down for you.</p>
<h3>What Actually Happened? The $580 Million Question</h3>
<p>Picture this: Jane Street, one of the world’s biggest quantitative trading firms, allegedly employed sophisticated algorithmic strategies in Indian stock markets from January 2023 to March 2025. According to SEBI’s allegations, they generated ₹4,843 crore (around $580 million) in profits through what the regulator describes as potentially manipulative practices.</p>
<p>But here’s what’s fascinating from a technical perspective — they didn’t just stumble into this money. According to the investigation, they built algorithmic systems so sophisticated that it took regulators over two years to identify the patterns. And when they did, they froze $566 million of Jane Street’s assets and temporarily banned them from Indian markets.</p>
<p>As a CS student, I find myself fascinated by the technical complexity while also considering the regulatory and ethical implications. Let me walk you through the alleged strategies based on what’s been made public.</p>
<h3>The Algorithm Arsenal: Breaking Down the Tech</h3>
<h3>1. The Coordinated Strategy Algorithm — The Alleged Master System</h3>
<p>Based on SEBI’s allegations, Jane Street appears to have developed a coordinated trading system that could influence stock prices in predictable ways, then potentially profit from those movements.</p>
<p><strong>How it allegedly worked:</strong></p>
<ul>
<li>The system would reportedly identify key moments when Bank Nifty options were about to expire</li>
<li>It would then coordinate large buy or sell orders across multiple entities to influence prices</li>
<li>Simultaneously, it allegedly held positions in options that would benefit from these price movements</li>
</ul>
<p><strong>Why this is technically complex:</strong> Building a system that can predict market impact requires understanding market microstructure, liquidity patterns, and order book dynamics at an incredibly sophisticated level.</p>
<p><strong>The potential ML component:</strong> Such a system would likely use advanced algorithms to optimize timing and position sizing, possibly learning from each trading cycle to improve effectiveness.</p>
<h3>2. Multi-Entity Coordination System — The Distributed Approach</h3>
<p>According to the allegations, Jane Street didn’t operate through a single trading account but coordinated activities across multiple entities simultaneously.</p>
<p><strong>The technical challenge:</strong> Coordinating trades across multiple accounts in real-time while maintaining what appears to be independent trading activity requires sophisticated infrastructure including real-time communication systems, microsecond-level timing coordination, and complex risk management across multiple portfolios.</p>
<p><strong>The algorithmic perspective:</strong> This approach suggests the use of distributed systems architecture, possibly with multiple trading agents working in coordination while maintaining the appearance of independent decision-making.</p>
<h3>3. Order Pattern Optimization — The Sophisticated Execution Strategy</h3>
<p>When you’re moving ₹4,370 crore worth of positions in a single day, execution strategy becomes critical. Based on the allegations, Jane Street’s systems were designed to execute these large trades without triggering standard surveillance systems.</p>
<p><strong>The fragmentation approach:</strong> Rather than placing large, obvious orders, the alleged system would break trades into thousands of smaller orders with varying timing, size, and execution venues.</p>
<p><strong>Why this matters for detection:</strong> Modern markets have sophisticated surveillance systems designed to identify unusual trading patterns. However, if an algorithmic system can make large coordinated trades appear as natural market activity, it becomes much harder to detect.</p>
<p><strong>The technical implementation:</strong> This likely involved complex order management systems with dynamic sizing algorithms and randomization techniques to avoid creating detectable patterns.</p>
<h3>4. Expiry Day Strategy — The Volatility Approach</h3>
<p>Options expiry days naturally see increased volatility in Indian markets. According to SEBI’s allegations, Jane Street’s algorithms were designed to capitalize on and potentially amplify these natural volatility patterns.</p>
<p><strong>The alleged approach:</strong></p>
<ul>
<li>Phase 1: Identify approaching expiry dates and natural volatility patterns</li>
<li>Phase 2: Establish positions that would benefit from increased volatility</li>
<li>Phase 3: Execute trades that potentially amplify existing market movements</li>
<li>Phase 4: Close positions to realize profits from the volatility</li>
</ul>
<p><strong>The technical component:</strong> This would require sophisticated time series analysis and pattern recognition to distinguish between natural market volatility and artificial patterns that might trigger regulatory scrutiny.</p>
<h3>The Technical Infrastructure Behind the Madness</h3>
<p>As someone who’s worked on distributed systems projects, I can appreciate the infrastructure needed to pull this off:</p>
<p><strong>Low-latency trading systems:</strong> They needed co-location services at Indian exchanges, giving them microsecond advantages in trade execution.</p>
<p><strong>Real-time risk management:</strong> When you’re coordinating trades across multiple entities, you need systems that can calculate risk exposure in real-time and adjust strategies accordingly.</p>
<p><strong>Machine learning pipeline:</strong> Continuous model training, backtesting, and deployment. The algorithms were probably learning and adapting daily.</p>
<p><strong>Surveillance evasion:</strong> Systems designed to test whether their trading patterns would trigger regulatory alerts.</p>
<h3>The Red Flags That Finally Caught Them</h3>
<p>What fascinates me is how they eventually got caught. SEBI noticed some patterns that were too perfect to be natural:</p>
<ol>
<li>
<strong>Statistical impossibility:</strong> The correlation between their cash market trades and derivatives positions was too consistent</li>
<li>
<strong>Timing precision:</strong> Their trades around expiry days showed patterns that suggested algorithmic coordination</li>
<li>
<strong>Scale inconsistency:</strong> The volume they were moving was disproportionate to their stated trading strategies</li>
</ol>
<h3>What This Case Teaches Us About Financial Technology</h3>
<p>This case has made me reflect deeply on the responsibility we have as developers and ML engineers. Jane Street’s team clearly possessed incredible technical skills — the kind of skills many of us aspire to develop. However, the way these skills were allegedly applied raises important questions about the ethics of financial technology.</p>
<p><strong>The technical insights:</strong></p>
<ul>
<li>Modern ML can be incredibly powerful for financial applications</li>
<li>Distributed systems can coordinate complex, real-time operations at massive scale</li>
<li>Advanced algorithms can be designed to operate within regulatory gray areas</li>
</ul>
<p><strong>The important questions:</strong></p>
<ul>
<li>How do we ensure the systems we build serve market integrity?</li>
<li>What role should technologists play in financial regulation?</li>
<li>How do we balance innovation with ethical considerations?</li>
</ul>
<h3>The Bigger Picture: Where Do We Go From Here?</h3>
<p>As someone who’s passionate about both ML and fintech, this case has been thought-provoking. The same technologies that can democratize financial services and create more efficient markets can also be used in ways that potentially harm market integrity.</p>
<p>SEBI’s investigation is still ongoing, and they’re now examining Jane Street’s activities in other indices like Nifty 50 and Sensex. This could reveal additional patterns and strategies.</p>
<p><strong>What I’m watching for:</strong></p>
<ul>
<li>How regulators will adapt their surveillance systems to detect sophisticated algorithmic strategies</li>
<li>Whether this case will lead to new regulations around algorithmic trading</li>
<li>How the quantitative trading industry will respond to increased scrutiny</li>
</ul>
<h3>Final Thoughts</h3>
<p>The Jane Street case represents the collision of cutting-edge technology with market regulation. Their algorithms demonstrated impressive technical sophistication, but according to SEBI, crossed into market manipulation territory.</p>
<p>The same technologies that can democratize financial services and create efficient markets can also be weaponized against market integrity. As the next generation of technologists, we have the power — and responsibility — to shape how these tools are used.</p>
<p><strong>The question isn’t whether we can build these systems. The question is: should we?</strong></p>
<p><em>What are your thoughts on the Jane Street case? Are you working on fintech projects? I’d love to hear your perspectives. Follow me for more deep dives into the intersection of ML and finance.</em></p>
<p><em>What are your thoughts on the Jane Street case? Are you working on fintech projects? I’d love to hear your perspectives in the comments below.</em></p>
<p><em>Follow me for more analyses of technology trends in finance. Next week, I’ll be exploring how regulators might use ML to enhance market surveillance.</em></p>
<p><strong>Disclaimer:</strong> <em>This analysis is based on publicly available information and SEBI’s allegations. The case is ongoing, and Jane Street has not been convicted of any wrongdoing. This post is for educational purposes and represents my personal analysis of the technical aspects involved.</em></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7394e28c0b72" width="1" height="1" alt="">


The Jane Street India Case: A Technical Deep Dive Into Algorithmic Trading Allegations


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OjjktQLs49dV9paoSvfuOw.png"><figcaption>Cover image</figcaption></figure><p>In today’s world there are more than a million paid courses, youtube videos, online classes etc. on how to create a fully functional web app but most of this provide you with unwanted extra information which would be usefull to you if you aspired to be a technical person but useless if you had just attended it to gain basic knowledge on how to create a web app.</p>
<p>With AI it has become too easy for anyone to create a basic web app and in this blog I will be talking on exactly how to do it without any extra clutter.</p>
<p>So without wasting any time lets get started. But keep in mind this i not a no code method so you’ll need some basic coding knowledge. But I can ensure you that this blog will give you a pretty good idea/roadmap on how to go about creating your own product.</p>
<h3>🚀 Top Approaches for Rapid Full-Stack Development</h3>
<h3>1. Next.js + Prisma + Postgres (The Modern Stack)</h3>
<p><strong>Pros:</strong></p>
<ul>
<li>Full-stack React framework with built-in API routes</li>
<li>Server components for optimal performance</li>
<li>File-based routing system</li>
<li>Simplified data fetching patterns</li>
<li>Strong TypeScript support</li>
<li>Seamless deployment with Vercel</li>
</ul>
<p><strong>Cons:</strong></p>
<ul>
<li>Steeper learning curve for beginners</li>
<li>May be overkill for very simple applications</li>
</ul>
<p>Next.js has evolved into a powerful full-stack framework that eliminates the need for separate backend and frontend setups. With its App Router pattern, server components, and built-in API routes, it offers a unified development experience. Paired with Prisma ORM and a Postgres database, you get a robust, type-safe data layer that simplifies database operations.</p>
<h3>2. T3 Stack (TypeScript, Tailwind, tRPC)</h3>
<p><strong>Pros:</strong></p>
<ul>
<li>End-to-end type safety</li>
<li>Excellent developer experience</li>
<li>Scalable architecture</li>
<li>Create T3 App starter for zero-config setup</li>
<li>Powerful data validation with Zod</li>
</ul>
<p><strong>Cons:</strong></p>
<ul>
<li>Multiple technologies to learn</li>
<li>TypeScript may slow down initial development for beginners</li>
</ul>
<p>The T3 Stack combines Next.js, TypeScript, Tailwind CSS, tRPC, and Prisma to create a developer-friendly environment with end-to-end type safety. The create-t3-app CLI tool makes it remarkably easy to bootstrap a new project with all these technologies preconfigured.</p>
<h3>3. SvelteKit + Supabase</h3>
<p><strong>Pros:</strong></p>
<ul>
<li>Incredibly lightweight with minimal JavaScript</li>
<li>More intuitive than React for many developers</li>
<li>Built-in routing and API endpoints</li>
<li>Supabase provides auth, database, and storage out of the box</li>
<li>Excellent performance metrics</li>
</ul>
<p><strong>Cons:</strong></p>
<ul>
<li>Smaller ecosystem compared to React</li>
<li>Fewer third-party components available</li>
</ul>
<p>SvelteKit compiles your components into highly optimized vanilla JavaScript, resulting in excellent performance. Combined with Supabase’s Firebase-like backend services, you get authentication, real-time database, storage, and more without having to build your own backend.</p>
<h3>4. Remix + Prisma + Fly.io</h3>
<p><strong>Pros:</strong></p>
<ul>
<li>Superior user experience with nested routes</li>
<li>Excellent data loading patterns</li>
<li>Built-in error handling</li>
<li>Strong focus on web fundamentals</li>
</ul>
<p><strong>Cons:</strong></p>
<ul>
<li>Different mental model compared to traditional SPAs</li>
<li>Requires understanding of HTTP and web fundamentals</li>
</ul>
<p>Remix focuses on web fundamentals while providing modern UX. Its nested routes and loader/action pattern make data fetching intuitive. Paired with Prisma and deployed on Fly.io, you get a performant, globally distributed application with minimal configuration.</p>
<h3>5. No-Code/Low-Code Solutions</h3>
<p><strong>Pros:</strong></p>
<ul>
<li>Minimal to no coding required</li>
<li>Rapid prototyping and iteration</li>
<li>Visual development interfaces</li>
<li>Built-in templates and components</li>
</ul>
<p><strong>Cons:</strong></p>
<ul>
<li>Limited customization options</li>
<li>Potential vendor lock-in</li>
<li>May become costly at scale</li>
</ul>
<p>Platforms like Webflow, Bubble, and Wized have dramatically improved their capabilities, allowing even non-technical users to create full-stack applications with databases, authentication, and complex logic.</p>
<h3>🔥 Quick-Start Tutorial: Building a Full-Stack App with Next.js + Prisma</h3>
<p>Let’s build a simple task management application using Next.js, Prisma, and PostgreSQL — one of the fastest approaches for full-stack development in 2025.</p>
<h3>Step 1: Set Up Your Project</h3>
<p>First, create a new Next.js project with the App Router:</p>
<pre>npx create-next-app@latest my-task-app<br>cd my-task-app</pre>
<p>During setup, select the following options:</p>
<ul>
<li>TypeScript: Yes</li>
<li>ESLint: Yes</li>
<li>Tailwind CSS: Yes</li>
<li>App Router: Yes</li>
<li>Import alias: Yes (default)</li>
</ul>
<h3>Step 2: Install Required Dependencies</h3>
<pre>npm install prisma @prisma/client zod react-hook-form @hookform/resolvers/zod<br>npm install -D prisma</pre>
<h3>Step 3: Set Up Prisma</h3>
<p>Initialize Prisma with PostgreSQL:</p>
<pre>npx prisma init --datasource-provider postgresql</pre>
<p>Edit your .env file with your database connection string:</p>
<pre>DATABASE_URL="postgresql://username:password@localhost:5432/tasks?schema=public"</pre>
<h3>Step 4: Define Your Database Schema</h3>
<p>Edit the prisma/schema.prisma file:</p>
<pre>generator client {<br>  provider = "prisma-client-js"<br>}</pre>
<pre>datasource db {<br>  provider = "postgresql"<br>  url      = env("DATABASE_URL")<br>}</pre>
<pre>model Task {<br>  id          String   @id @default(cuid())<br>  title       String<br>  description String?<br>  completed   Boolean  @default(false)<br>  createdAt   DateTime @default(now())<br>  updatedAt   DateTime @updatedAt<br>}</pre>
<p>Apply the schema to your database:</p>
<pre>npx prisma db push</pre>
<p>Generate the Prisma client:</p>
<pre>npx prisma generate</pre>
<h3>Step 5: Create Prisma Client Instance</h3>
<p>Create a new file at lib/prisma.ts:</p>
<pre>import { PrismaClient } from '@prisma/client';</pre>
<pre>const globalForPrisma = global as unknown as { prisma: PrismaClient };</pre>
<pre>export const prisma = globalForPrisma.prisma || new PrismaClient();</pre>
<pre>if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;</pre>
<h3>Step 6: Create API Routes</h3>
<p>Create a file at app/api/tasks/route.ts:</p>
<pre>import { prisma } from '@/lib/prisma';<br>import { NextResponse } from 'next/server';</pre>
<pre>export async function GET() {<br>  try {<br>    const tasks = await prisma.task.findMany({<br>      orderBy: { createdAt: 'desc' },<br>    });<br>    return NextResponse.json(tasks);<br>  } catch (error) {<br>    return NextResponse.json({ error: 'Failed to fetch tasks' }, { status: 500 });<br>  }<br>}</pre>
<pre>export async function POST(request: Request) {<br>  try {<br>    const json = await request.json();<br>    const task = await prisma.task.create({<br>      data: json,<br>    });<br>    return NextResponse.json(task, { status: 201 });<br>  } catch (error) {<br>    return NextResponse.json({ error: 'Failed to create task' }, { status: 500 });<br>  }<br>}</pre>
<p>Create a file at app/api/tasks/[id]/route.ts:</p>
<pre>import { prisma } from '@/lib/prisma';<br>import { NextResponse } from 'next/server';</pre>
<pre>export async function GET(<br>  request: Request,<br>  { params }: { params: { id: string } }<br>) {<br>  try {<br>    const task = await prisma.task.findUnique({<br>      where: { id: params.id },<br>    });<br><br>    if (!task) {<br>      return NextResponse.json({ error: 'Task not found' }, { status: 404 });<br>    }<br><br>    return NextResponse.json(task);<br>  } catch (error) {<br>    return NextResponse.json({ error: 'Failed to fetch task' }, { status: 500 });<br>  }<br>}</pre>
<pre>export async function PATCH(<br>  request: Request,<br>  { params }: { params: { id: string } }<br>) {<br>  try {<br>    const json = await request.json();<br>    const updatedTask = await prisma.task.update({<br>      where: { id: params.id },<br>      data: json,<br>    });<br>    return NextResponse.json(updatedTask);<br>  } catch (error) {<br>    return NextResponse.json({ error: 'Failed to update task' }, { status: 500 });<br>  }<br>}</pre>
<pre>export async function DELETE(<br>  request: Request,<br>  { params }: { params: { id: string } }<br>) {<br>  try {<br>    await prisma.task.delete({<br>      where: { id: params.id },<br>    });<br>    return new NextResponse(null, { status: 204 });<br>  } catch (error) {<br>    return NextResponse.json({ error: 'Failed to delete task' }, { status: 500 });<br>  }<br>}</pre>
<h3>Step 7: Create Frontend Components</h3>
<p>Create a Task form component at components/TaskForm.tsx:</p>
<pre>'use client';</pre>
<pre>import { useState } from 'react';<br>import { useForm } from 'react-hook-form';<br>import { zodResolver } from '@hookform/resolvers/zod';<br>import { z } from 'zod';</pre>
<pre>const taskSchema = z.object({<br>  title: z.string().min(1, 'Title is required'),<br>  description: z.string().optional(),<br>});</pre>
<pre>type TaskFormData = z.infer&lt;typeof taskSchema&gt;;</pre>
<pre>export default function TaskForm({ onTaskCreated }: { onTaskCreated: () =&gt; void }) {<br>  const [isSubmitting, setIsSubmitting] = useState(false);<br><br>  const {<br>    register,<br>    handleSubmit,<br>    reset,<br>    formState: { errors },<br>  } = useForm&lt;TaskFormData&gt;({<br>    resolver: zodResolver(taskSchema),<br>  });</pre>
<pre>  const onSubmit = async (data: TaskFormData) =&gt; {<br>    setIsSubmitting(true);<br>    try {<br>      const response = await fetch('/api/tasks', {<br>        method: 'POST',<br>        headers: {<br>          'Content-Type': 'application/json',<br>        },<br>        body: JSON.stringify(data),<br>      });<br><br>      if (response.ok) {<br>        reset();<br>        onTaskCreated();<br>      }<br>    } catch (error) {<br>      console.error('Failed to create task:', error);<br>    } finally {<br>      setIsSubmitting(false);<br>    }<br>  };</pre>
<pre>  return (<br>    &lt;form onSubmit={handleSubmit(onSubmit)} className="space-y-4 p-4 bg-white rounded-lg shadow"&gt;<br>      &lt;div&gt;<br>        &lt;label htmlFor="title" className="block text-sm font-medium text-gray-700"&gt;<br>          Task Title<br>        &lt;/label&gt;<br>        &lt;input<br>          {...register('title')}<br>          id="title"<br>          type="text"<br>          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"<br>        /&gt;<br>        {errors.title &amp;&amp; (<br>          &lt;p className="mt-1 text-sm text-red-600"&gt;{errors.title.message}&lt;/p&gt;<br>        )}<br>      &lt;/div&gt;<br><br>      &lt;div&gt;<br>        &lt;label htmlFor="description" className="block text-sm font-medium text-gray-700"&gt;<br>          Description (Optional)<br>        &lt;/label&gt;<br>        &lt;textarea<br>          {...register('description')}<br>          id="description"<br>          rows={3}<br>          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"<br>        /&gt;<br>      &lt;/div&gt;<br><br>      &lt;button<br>        type="submit"<br>        disabled={isSubmitting}<br>        className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"<br>      &gt;<br>        {isSubmitting ? 'Adding...' : 'Add Task'}<br>      &lt;/button&gt;<br>    &lt;/form&gt;<br>  );<br>}</pre>
<p>Create a Task list component at components/TaskList.tsx:</p>
<pre>'use client';</pre>
<pre>import { useEffect, useState } from 'react';</pre>
<pre>type Task = {<br>  id: string;<br>  title: string;<br>  description: string | null;<br>  completed: boolean;<br>  createdAt: string;<br>};</pre>
<pre>export default function TaskList({ refreshTrigger }: { refreshTrigger: number }) {<br>  const [tasks, setTasks] = useState&lt;Task[]&gt;([]);<br>  const [loading, setLoading] = useState(true);</pre>
<pre>  useEffect(() =&gt; {<br>    const fetchTasks = async () =&gt; {<br>      setLoading(true);<br>      try {<br>        const res = await fetch('/api/tasks');<br>        const data = await res.json();<br>        setTasks(data);<br>      } catch (error) {<br>        console.error('Failed to fetch tasks:', error);<br>      } finally {<br>        setLoading(false);<br>      }<br>    };</pre>
<pre>    fetchTasks();<br>  }, [refreshTrigger]);</pre>
<pre>  const toggleTaskCompletion = async (id: string, completed: boolean) =&gt; {<br>    try {<br>      const res = await fetch(`/api/tasks/${id}`, {<br>        method: 'PATCH',<br>        headers: {<br>          'Content-Type': 'application/json',<br>        },<br>        body: JSON.stringify({ completed: !completed }),<br>      });<br><br>      if (res.ok) {<br>        setTasks(tasks.map(task =&gt; <br>          task.id === id ? { ...task, completed: !completed } : task<br>        ));<br>      }<br>    } catch (error) {<br>      console.error('Failed to update task:', error);<br>    }<br>  };</pre>
<pre>  const deleteTask = async (id: string) =&gt; {<br>    try {<br>      const res = await fetch(`/api/tasks/${id}`, {<br>        method: 'DELETE',<br>      });<br><br>      if (res.ok) {<br>        setTasks(tasks.filter(task =&gt; task.id !== id));<br>      }<br>    } catch (error) {<br>      console.error('Failed to delete task:', error);<br>    }<br>  };</pre>
<pre>  if (loading) {<br>    return &lt;div className="text-center p-4"&gt;Loading tasks...&lt;/div&gt;;<br>  }</pre>
<pre>  if (tasks.length === 0) {<br>    return &lt;div className="text-center p-4"&gt;No tasks yet. Add one above!&lt;/div&gt;;<br>  }</pre>
<pre>  return (<br>    &lt;ul className="divide-y divide-gray-200"&gt;<br>      {tasks.map((task) =&gt; (<br>        &lt;li key={task.id} className="p-4 bg-white rounded-lg shadow mt-4"&gt;<br>          &lt;div className="flex items-center justify-between"&gt;<br>            &lt;div className="flex items-center"&gt;<br>              &lt;input<br>                type="checkbox"<br>                checked={task.completed}<br>                onChange={() =&gt; toggleTaskCompletion(task.id, task.completed)}<br>                className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"<br>              /&gt;<br>              &lt;div className="ml-3"&gt;<br>                &lt;p className={`text-sm font-medium ${task.completed ? 'line-through text-gray-400' : 'text-gray-900'}`}&gt;<br>                  {task.title}<br>                &lt;/p&gt;<br>                {task.description &amp;&amp; (<br>                  &lt;p className="text-sm text-gray-500"&gt;{task.description}&lt;/p&gt;<br>                )}<br>              &lt;/div&gt;<br>            &lt;/div&gt;<br>            &lt;button<br>              onClick={() =&gt; deleteTask(task.id)}<br>              className="text-red-600 hover:text-red-800"<br>            &gt;<br>              Delete<br>            &lt;/button&gt;<br>          &lt;/div&gt;<br>        &lt;/li&gt;<br>      ))}<br>    &lt;/ul&gt;<br>  );<br>}</pre>
<h3>Step 8: Create the Main Page</h3>
<p>Update app/page.tsx:</p>
<pre>'use client';</pre>
<pre>import { useState } from 'react';<br>import TaskForm from '@/components/TaskForm';<br>import TaskList from '@/components/TaskList';</pre>
<pre>export default function Home() {<br>  const [refreshTrigger, setRefreshTrigger] = useState(0);<br><br>  const handleTaskCreated = () =&gt; {<br>    setRefreshTrigger(prev =&gt; prev + 1);<br>  };</pre>
<pre>  return (<br>    &lt;main className="container mx-auto max-w-3xl px-4 py-8"&gt;<br>      &lt;h1 className="text-2xl font-bold mb-6"&gt;Task Manager&lt;/h1&gt;<br>      &lt;TaskForm onTaskCreated={handleTaskCreated} /&gt;<br>      &lt;div className="mt-8"&gt;<br>        &lt;h2 className="text-xl font-semibold mb-4"&gt;Your Tasks&lt;/h2&gt;<br>        &lt;TaskList refreshTrigger={refreshTrigger} /&gt;<br>      &lt;/div&gt;<br>    &lt;/main&gt;<br>  );<br>}<br></pre>
<h3>Example file structure:</h3>
<pre>my-task-app/<br>├── .env # Environment variables (DB connection string)<br>├── .gitignore # Files to ignore in version control<br>├── package.json # Project dependencies and scripts<br>├── tsconfig.json # TypeScript configuration<br>├── next.config.js # Next.js configuration<br>├── prisma/ # Prisma ORM files<br>│ └── schema.prisma # Database schema definition<br>├── app/ # Next.js App Router<br>│ ├── page.tsx # Main page component<br>│ ├── layout.tsx # Root layout component<br>│ └── api/ # API routes<br>│ └── tasks/ # Tasks API endpoints<br>│ ├── route.ts # GET (list) and POST (create) endpoints<br>│ └── [id]/ # Dynamic route for individual tasks<br>│ └── route.ts # GET, PATCH, DELETE endpoints for specific task<br>├── lib/ # Utility functions and shared code<br>│ └── prisma.ts # Prisma client instance<br>├── components/ # React components<br>│ ├── TaskForm.tsx # Form for creating new tasks<br>│ └── TaskList.tsx # List of tasks with actions<br>└── public/ # Static assets<br> └── favicon.ico # Browser favicon</pre>
<h3>Step 9: Run Your Application</h3>
<p>Start the development server:</p>
<pre>npm run dev</pre>
<p>Visit http://localhost:3000 to see your application in action.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wABJmkS7nylVaJqvRZkIpA.png"><figcaption>Application Image</figcaption></figure><h3>Step 10: Deploy Your Application</h3>
<p>To deploy your application, you can use Vercel with a few simple steps:</p>
<ol>
<li>Push your code to a GitHub repository</li>
<li>Connect your repository to Vercel</li>
<li>Configure your database connection (using Vercel’s environment variables)</li>
<li>Deploy!</li>
</ol>
<p>Vercel will automatically detect your Next.js project and configure the build settings. You just need to add your database connection string as an environment variable.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/852/1*pbrNYW3OZ4bHgylmt34IyQ.png"><figcaption>Ideal time it should take one to complete their project</figcaption></figure><h3>🔮 Looking Forward</h3>
<p>I believe in this blog I have provided you all with options on different ways to do it and also an example application with step by step tutorial that will give you a good idea on what you are working with.</p>
<p>Now you just have to put a little bit of effort form your end. Divide your application into different steps. Complete these steps one by one and create an amazing web app of your own without paying a single penny to anyone.</p>
<p>What’s your favorite method for building full-stack applications?How did your experience of building your own web app go? What are the difficulties you are facing?</p>
<p>Let me know in the comments below!</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=bc0ffb0f64b8" width="1" height="1" alt="">


The only blog you’ll need to create a fully functional web app by YOURSELF in 2025.


<h3>Meta’s Large Concept Models: Beyond Words to Ideas — The Next AI Revolution?</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/640/1*DIRfEvXYcMDfu8pxxxXx1g.jpeg"><figcaption>LLM to LCM</figcaption></figure><p>Hey, in this blog I am going to share with you all something new that I discovered this week. When I first dug into Meta’s research on Large Concept Models (LCMs), I felt that familiar flutter of excitement I haven’t experienced since GPT-3 burst onto the scene. This could be one of those pivotal moments in AI that changes everything.</p>
<h3>What Are Large Concept Models?</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Wd_HeUew9zNfoQA-8mGJvw.png"><figcaption>LCM</figcaption></figure><p>Let me break this down simply: While Large Language Models (LLMs) like GPT-4 and Claude operate by predicting the next <em>word</em> or <em>token</em> in a sequence, Meta’s Large Concept Models work at a higher level of abstraction — they predict the next <em>concept</em>.</p>
<p>Think about how we communicate as humans. We’re not just predicting individual words — we’re exchanging ideas, concepts, and mental models. LLMs have gotten remarkably good at mimicking this through sophisticated pattern recognition, but they’re still fundamentally working at the word level.</p>
<p>LCMs, on the other hand, operate directly in what Meta calls a “high-dimensional embedding space” rather than with discrete tokens. This allows them to think more abstractly and model relationships between concepts, not just words. It’s like the difference between working with individual paint colors versus working with entire visual elements in a painting.</p>
<h3>How Do LCMs Actually Work?</h3>
<p>Based on Meta’s research, LCMs use an architecture that’s quite different from traditional LLMs:</p>
<ul>
<li>
<strong>Embedding Space Processing</strong>: Instead of processing discrete tokens, LCMs operate entirely in a continuous embedding space. In their current implementation, Meta is using SONAR sentence embeddings, which capture the semantic meaning of entire sentences.</li>
<li>
<strong>Concept-Level Modeling</strong>: The model treats each sentence as a “concept” and learns to predict the next concept given a sequence of previous concepts.</li>
<li>
<strong>Two-Tower Architecture</strong>: Meta explored several architectures, but their Two-Tower approach showed the best results. One tower handles the context encoding while another handles predicting the next concept.</li>
<li>
<strong>Multimodal and Multilingual by Design</strong>: Because concepts are represented as embeddings rather than specific words in specific languages, LCMs can naturally handle different languages and potentially different modalities (like speech) without explicit training on those languages.</li>
</ul>
<p>I was particularly impressed by the zero-shot multilingual abilities. Their research shows that an LCM trained only on English data substantially outperformed Llama-3.1–8B-IT on many languages it had never seen during training, like Vietnamese, Pashto, and Burmese. That’s genuinely mind-blowing.</p>
<h3>LCMs vs. LLMs: The Key Differences</h3>
<p>Having spent hours with both technologies (I’ve been using various LLMs daily for work), here’s how I see the fundamental differences:</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/800/1*95etqoaxJw_aFNQRJ_WTQg.jpeg"><figcaption>LLM’s vs LCM’s</figcaption></figure><h3>1. Level of Abstraction</h3>
<ul>
<li>
<strong>LLMs</strong>: Operate at the word/token level</li>
<li>
<strong>LCMs</strong>: Operate at the concept/sentence level</li>
</ul>
<h3>2. Multilingual Capabilities</h3>
<ul>
<li>
<strong>LLMs</strong>: Need explicit training on each language</li>
<li>
<strong>LCMs</strong>: Can generalize to unseen languages through their shared concept space</li>
</ul>
<h3>3. Architectural Approach</h3>
<ul>
<li>
<strong>LLMs</strong>: Use token prediction with a fixed vocabulary</li>
<li>
<strong>LCMs</strong>: Use embedding space modeling with virtually unlimited possible outputs</li>
</ul>
<h3>4. Reasoning Approach</h3>
<ul>
<li>
<strong>LLMs</strong>: Reasoning emerges from word-level patterns</li>
<li>
<strong>LCMs</strong>: Reasoning happens at a more abstract conceptual level</li>
</ul>
<h3>The Challenges LCMs Still Face</h3>
<p>I’m excited about LCMs, but let’s be real — they’re not yet ready to dethrone current state-of-the-art LLMs. The Meta research acknowledges several limitations:</p>
<p>First, predicting the next concept is inherently harder than predicting the next token. When you’re generating the next word, you’re choosing from maybe 100,000 vocabulary items. When generating the next concept (sentence), you’re dealing with virtually infinite possibilities.</p>
<p>There’s also the issue of “data sparsity” — most sentences in any corpus are unique, making it harder to learn good patterns. This is less of an issue with words, which repeat constantly.</p>
<p>Another challenge is that small modeling errors can lead to predictions in the embedding space that don’t correspond to valid sentences — essentially generating “semantic noise” that can’t be properly decoded into coherent language.</p>
<h3>What This Means for the Future</h3>
<p>Despite these challenges, I’m genuinely excited about the potential of LCMs. They represent a fundamental rethinking of how we approach language AI, moving away from the token-level prediction that has dominated the field.</p>
<p>The most exciting aspect to me is the inherent multilingual and potentially multimodal nature of LCMs. A model that can truly generalize across languages without explicit training on each one could democratize AI access globally in ways current LLMs cannot.</p>
<p>I’m also intrigued by their exploration of explicit planning in LCMs. Their research shows significant improvements in coherence when they implemented a planning mechanism that creates high-level overviews of what should be generated next. As someone who writes frequently, this mimics how I work — outlining ideas before filling in the details.</p>
<h3>My Take: Are LCMs the Future?</h3>
<p>After diving deep into this research, I believe LCMs represent a genuinely new direction in AI that could eventually complement or even supersede traditional LLMs for certain applications.</p>
<p>Are they going to replace GPT-4 or Claude tomorrow? Absolutely not. Meta’s own researchers acknowledge they still have a “long path to reach the performance of current flagship LLMs.”</p>
<p>But that’s exactly what makes this exciting! Rather than incremental improvements to the same architecture, Meta is exploring a fundamentally different approach. The history of technology shows that paradigm shifts often start with systems that underperform established technologies in most ways but offer unique advantages that eventually become crucial.</p>
<p>I’ll be watching LCM development closely over the next year. Meta has open-sourced their training code, which should accelerate research in this area. If they can solve the key challenges around embedding space modeling and concept prediction, we might be looking at the next major evolution in AI.</p>
<p>What do you think? Are concept-level models the future of AI, or will token-based LLMs continue to dominate? I’d love to hear your thoughts in the comments!</p>
<p><em>Have you had a chance to play with any LCM implementations yet? Drop your experiences in the comments below!</em></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9170ea22b220" width="1" height="1" alt="">


Meta’s Large Concept Models: Beyond Words to Ideas — The Next AI Revolution?


<h3>Introduction: My Journey into the World of Generative AI</h3>
<p>When I first heard about generative AI a few years ago, I was both intrigued and intimidated. The idea that machines could create seemingly original content — from text to images to code — felt like science fiction. Fast forward to today, and I’m building AI solutions on AWS that would have blown my mind back then.</p>
<p>I remember staring at my screen the first time I got GPT to complete a paragraph I’d started. That magical moment when the AI seemed to read my mind sparked a journey that led me deep into the AWS ecosystem. Today, I want to share that journey with you, whether you’re a curious newcomer or a developer looking to level up your AI game.</p>
<h3>What Exactly IS Generative AI?</h3>
<p>Before we dive into AWS, let’s make sure we’re on the same page about what generative AI actually is.</p>
<p>In simple terms, generative AI refers to artificial intelligence systems that can create new content rather than just analyzing existing data. Think of it this way: traditional AI might tell you if a photo contains a cat (that’s analysis), but generative AI can create a brand new image of a cat that never existed (that’s generation).</p>
<p>Some familiar examples include:</p>
<ul>
<li>ChatGPT creating human-like text conversations</li>
<li>DALL-E generating images from text descriptions</li>
<li>AI tools writing code based on natural language prompts</li>
</ul>
<p>These systems work by learning patterns from massive datasets and then creating new content that follows similar patterns. The magic (well, mathematics) happens in what we call large language models (LLMs) or foundation models.</p>
<h3>AWS and Generative AI: A Perfect Match</h3>
<p>Amazon Web Services has become a powerhouse for deploying generative AI, offering both ready-made solutions and powerful building blocks. The best part? You don’t need a Ph.D. in machine learning to get started.</p>
<h3>For the Non-Technical Explorer</h3>
<p>If coding isn’t your thing, AWS offers several no-code and low-code options to start experimenting with generative AI:</p>
<ul>
<li>
<strong>Amazon Bedrock</strong>: Think of this as your AI playground. It gives you access to top foundation models from Amazon, Anthropic, AI21 Labs, and others through a simple interface. You can test different models and see which works best for your needs without writing complex code.</li>
<li>
<strong>Amazon Titan Models</strong>: These are Amazon’s own foundation models that power various generative AI applications. They’re pre-trained and ready to use for text, image, and embedding generation.</li>
<li>
<strong>AWS Console</strong>: The web interface makes it easy to experiment with generative AI services without diving into code.</li>
</ul>
<h3>For the Technical Enthusiast</h3>
<p>If you’re comfortable with code or looking to build more customized solutions:</p>
<ul>
<li>
<strong>Amazon SageMaker</strong>: This is AWS’s comprehensive machine learning platform that we’ll explore in more depth shortly.</li>
<li>
<strong>AWS SDKs</strong>: Software Development Kits that let you interact with AWS services programmatically in your preferred language (Python, JavaScript, etc.).</li>
<li>
<strong>AWS CLI</strong>: Command Line Interface for those who prefer typing commands rather than clicking through interfaces.</li>
</ul>
<h3>Deep Dive: Amazon SageMaker — Your AI Workshop</h3>
<p>Amazon SageMaker deserves special attention as it’s the cornerstone of AWS’s machine learning offerings. I think of SageMaker as a complete workshop for AI development — it has all the tools you need under one roof.</p>
<h3>What Makes SageMaker Special?</h3>
<p>SageMaker handles the entire machine learning workflow:</p>
<ol>
<li>
<strong>Data Preparation</strong>: Tools to clean, transform, and prepare your data</li>
<li>
<strong>Model Building</strong>: Interface to train models using your data</li>
<li>
<strong>Training</strong>: Infrastructure to train models efficiently</li>
<li>
<strong>Deployment</strong>: Easy ways to put your models into production</li>
<li>
<strong>Management</strong>: Tools to monitor and update your models</li>
</ol>
<h3>SageMaker for Generative AI — Key Components</h3>
<p>Let me walk you through the SageMaker features I use most often for generative AI projects:</p>
<h4>SageMaker Studio</h4>
<p>This is your integrated development environment (IDE) for all machine learning work. Think of it as your command center where you can write code, visualize data, and manage your AI projects.</p>
<p>I spend most of my time in SageMaker Studio notebooks, which are like interactive documents where you can mix code, text, and visualizations. They’re perfect for experimenting with different models and parameters.</p>
<h4>JumpStart</h4>
<p>JumpStart is my go-to when I want to get started quickly. It offers pre-built solutions and foundation models that you can deploy with just a few clicks or lines of code.</p>
<p>For beginners, I highly recommend starting here. You can access models like GPT, BLOOM, and Stable Diffusion without needing to understand their inner workings.</p>
<pre># Technical example: Deploying a foundation model with JumpStart<br>import sagemaker<br>from sagemaker.jumpstart.model import JumpStartModel</pre>
<pre># Initialize a SageMaker session<br>session = sagemaker.Session()</pre>
<pre># Deploy a pre-trained text generation model<br>model_id = "huggingface-textgeneration-gpt2"  # Example model<br>model = JumpStartModel(model_id=model_id)<br>predictor = model.deploy()</pre>
<pre># Generate text<br>response = predictor.predict({<br>    "inputs": "Artificial intelligence is",<br>    "parameters": {"max_length": 100}<br>})</pre>
<h4>SageMaker Training Jobs</h4>
<p>When you need to fine-tune a model on your own data, SageMaker Training Jobs make it straightforward. I’ve fine-tuned language models to better understand my company’s specific terminology, and the process was much simpler than I expected.</p>
<h4>SageMaker Endpoints</h4>
<p>Once your model is ready, you need to make it available for use. SageMaker Endpoints create an API that applications can call to get predictions from your model.</p>
<pre># Technical example: Creating a real-time inference endpoint<br>model_name = "my-gpt-model"<br>endpoint_name = "text-generation-endpoint"</pre>
<pre># Create endpoint configuration<br>endpoint_config = sagemaker.ModelConfig(<br>    name=endpoint_name,<br>    model_name=model_name,<br>    instance_type="ml.g4dn.xlarge",  # GPU instance<br>    instance_count=1<br>)<br>model.deploy(endpoint_config)</pre>
<pre># Now your model is accessible via an API endpoint</pre>
<h3>Real-World Applications: What Can You Actually Build?</h3>
<p>I’ve seen generative AI on AWS used for some amazing applications:</p>
<h3>Content Creation and Enhancement</h3>
<ul>
<li>
<strong>Blog and social media content generation</strong>: Creating drafts or generating ideas</li>
<li>
<strong>Product descriptions</strong>: Automatically generating compelling descriptions for e-commerce</li>
<li>
<strong>Email response suggestions</strong>: Smart replies for customer service teams</li>
</ul>
<h3>Personalization</h3>
<ul>
<li>
<strong>Customized marketing messages</strong>: Tailoring content to individual customers</li>
<li>
<strong>Personalized learning materials</strong>: Creating educational content that adapts to a student’s level</li>
</ul>
<h3>Code Generation and Assistance</h3>
<ul>
<li>
<strong>Automated programming assistance</strong>: Suggesting code completions or explaining complex functions</li>
<li>
<strong>Converting requirements to code</strong>: Turning natural language descriptions into functional code</li>
</ul>
<h3>Document Processing</h3>
<ul>
<li>
<strong>Summarization</strong>: Creating concise summaries of long documents</li>
<li>
<strong>Information extraction</strong>: Pulling structured data from unstructured text</li>
</ul>
<h3>The Journey: My First Generative AI Project on AWS</h3>
<p>Let me share my personal experience building a content generation system for a marketing team.</p>
<h3>Step 1: Defining the Problem</h3>
<p>The marketing team needed help creating consistent product descriptions across thousands of items. Manually writing each one was taking too much time.</p>
<h3>Step 2: Selecting the Right Tools</h3>
<p>I decided to use:</p>
<ul>
<li>Amazon Bedrock for access to foundation models</li>
<li>SageMaker for fine-tuning and deployment</li>
<li>Lambda functions to connect the model to our product database</li>
</ul>
<h3>Step 3: Data Preparation</h3>
<p>We collected examples of our best product descriptions to use as training data, making sure to include various categories and styles.</p>
<h3>Step 4: Model Selection and Fine-Tuning</h3>
<p>After testing several models in Bedrock, we chose Claude (from Anthropic) and fine-tuned it to match our brand voice using SageMaker Training Jobs.</p>
<h3>Step 5: Building the Pipeline</h3>
<p>We created a simple pipeline:</p>
<ol>
<li>Product details from database → Lambda function</li>
<li>Lambda function → SageMaker endpoint</li>
<li>SageMaker endpoint returns generated description</li>
<li>Description → Review queue for human approval</li>
</ol>
<h3>Step 6: Deployment and Iteration</h3>
<p>The initial results were good but not perfect. We collected feedback and continued fine-tuning until the descriptions needed minimal editing.</p>
<h3>Tips for Your AWS GenAI Journey</h3>
<p>Whether you’re a beginner or a developer, here are some lessons I’ve learned:</p>
<h3>For Beginners</h3>
<ol>
<li>
<strong>Start simple</strong>: Use Bedrock or JumpStart to experiment before building custom solutions</li>
<li>
<strong>Use existing models</strong>: Don’t try to build models from scratch; use pre-trained ones</li>
<li>
<strong>Focus on prompts</strong>: Good prompts (instructions to the AI) can make a huge difference</li>
<li>
<strong>Embrace the AWS Free Tier</strong>: Many services offer free usage tiers for learning</li>
</ol>
<h3>For Developers</h3>
<ol>
<li>
<strong>Optimize your infrastructure</strong>: GPU instances are expensive; use them efficiently</li>
<li>
<strong>Build evaluation metrics</strong>: Define how you’ll measure success before you start</li>
<li>
<strong>Consider fine-tuning vs. prompt engineering</strong>: Sometimes better prompts work better than model fine-tuning</li>
<li>
<strong>Implement human feedback loops</strong>: The best systems combine AI generation with human review</li>
</ol>
<pre># Technical example: Implementing a human feedback loop<br>def generate_and_review(product_data):<br>    # Generate content using the model<br>    generated_text = call_sagemaker_endpoint(product_data)<br><br>    # Send to human review queue<br>    review_id = send_to_review_queue(generated_text, product_data["id"])<br><br>    # Store feedback for model improvement<br>    def store_feedback(approved, edits=None):<br>        if not approved:<br>            # Log examples that needed significant editing for future training<br>            log_training_example(product_data, generated_text, edits)<br><br>    return generated_text, review_id, store_feedback</pre>
<h3>Cost Considerations: Keeping Your Bill in Check</h3>
<p>One concern I often hear is about costs. AWS can get expensive if you’re not careful, especially with GPU-intensive workloads. Here’s my approach to managing costs:</p>
<ol>
<li>
<strong>Start with the free tier</strong>: Many AWS services offer free usage up to certain limits</li>
<li>
<strong>Set budget alerts</strong>: AWS Budgets lets you set alerts when costs exceed thresholds</li>
<li>
<strong>Choose the right instance types</strong>: Don’t use a powerful GPU instance when a CPU one will do</li>
<li>
<strong>Clean up resources</strong>: Delete endpoints, instances, and storage you’re not using</li>
<li>
<strong>Consider Spot Instances</strong>: These offer steep discounts but can be interrupted</li>
</ol>
<h3>Looking to the Future: What’s Next in AWS GenAI?</h3>
<p>The field is moving incredibly fast. Here are developments I’m excited about:</p>
<ol>
<li>
<strong>Multimodal models</strong>: Models that work with text, images, and audio together</li>
<li>
<strong>Smaller, more efficient models</strong>: Making generative AI accessible on edge devices</li>
<li>
<strong>Enhanced fine-tuning capabilities</strong>: More control over model adaptation with less data</li>
<li>
<strong>Serverless AI</strong>: Reducing the overhead of managing infrastructure</li>
</ol>
<h3>Conclusion: Your Turn to Build</h3>
<p>Generative AI on AWS has transformed how I approach software development and content creation. The tools have democratized access to AI capabilities that would have required specialized expertise just a few years ago.</p>
<p>Whether you’re a curious explorer or a seasoned developer, I encourage you to start your own journey. Begin with the simpler services like Bedrock, experiment with pre-built models in JumpStart, and gradually work your way toward more customized solutions with SageMaker.</p>
<p>The most important thing is to start building. Your first attempts might not be perfect, but each project will teach you something valuable. And who knows? Your next AWS generative AI project might just create something amazing that changes how your business operates.</p>
<p>What generative AI project will you build first? I’d love to hear your ideas and experiences in the comments below.</p>
<p><em>About the Author: A lifelong tech enthusiast who believes in the power of AI to augment human creativity, not replace it. Currently building AI solutions on AWS and sharing the journey along the way.</em></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ba77c28e4fad" width="1" height="1" alt="">


Sharing What I learned this Week: Exploring Generative AI with AWS


<figure><img alt="" src="https://cdn-images-1.medium.com/max/612/1*k69Bm5ENX2wQJ430IM3l7w.jpeg"><figcaption>Open Source</figcaption></figure><p>Almost all programmers discover open-source early in their tech journey.<br>Once they start learning from open-source, they go deeper and deeper and realise that how magnificent open-source is. Of course there are a lot of unwanted and unorganised elements too but once you start discovering the good parts ,you are just fascinated.<br>Even I discovered these fascinating code which turned out to be quite old and had been in development by the community for a long long time now.<br>So I decided to go on a journey to learn on how it all began and how its going to be. <br>And in my journey of learning I have also decided to share it with you all by documenting it in my blog.</p>
<h4>The Academic Origins: 1960s-1970s</h4>
<p>In the early days of computing, software development thrived in academic settings where sharing was the norm.At MIT’s Artificial Intelligence Laboratory, researchers freely shared code modifications and improvements.</p>
<p>This culture of openness led to groundbreaking developments like the first text editors and time-sharing systems. The ARPANET, the predecessor to today’s internet, emerged from this collaborative academic environment, where researchers shared resources and knowledge across institutions.</p>
<p>This was the original birth of an unofficial open-source.</p>
<h4>The Birth of Unix and C: A Foundation for the Future</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/1*81RUZfJsu07Hq2M6gsgP5A.jpeg"><figcaption>Birth of Unix</figcaption></figure><p>The birth of Unic and C programming language marked the beginning of the era of technology where collaborative development was now possibe at scale!!!!!</p>
<h4>The GNU Project and the Free Software Movement: 1980s</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/800/1*HG4Akf6uALpG05UYf7Wkzg.png"><figcaption>GNU</figcaption></figure><p>In 1983, Richard Stallman launched the GNU Project, a response to the increasing commercialization of software. His vision of freedom in software use and development created the philosophical foundation for today’s open source movement. The creation of the GNU General Public License (GPL) provided a legal framework for protecting these freedoms, while tools like the GNU Compiler Collection (GCC) became crucial building blocks for future development.</p>
<h4>Linux: The Game-Changer: 1990s</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/728/1*KoZi0l6FrjI8HBvusCCxuA.jpeg"><figcaption>Linux</figcaption></figure><p>When we talk about open-source we can’t ignore linux , can we?<br>In 1991, Linus Torvalds released Linux, a project that would become the most successful example of open source development. What started as a hobby project became the backbone of the internet, powering everything from smartphones to supercomputers.<br>This is one of the major turning points in the history of open-source.</p>
<h4>The Rise of Open Source Infrastructure: Late 1990s-2000s</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/860/1*OrggfSPa0rGGE61ehVPBoA.jpeg"><figcaption>Apache HTTP Server</figcaption></figure><p>The Apache HTTP Server, released in 1995, became the world’s most popular web server, powering the growth of the early internet. MySQL and PHP emerged as open source alternatives to expensive database and programming solutions, forming the LAMP stack (Linux, Apache, MySQL, PHP) that would host millions of websites.</p>
<h4>The Age of Collaborative Development: 2000s-2010s</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/832/1*NpxUHB-6lgLxus3cC6aAAA.png"><figcaption>Git and Github</figcaption></figure><p>The creation of <strong>Git </strong>by Linus Torvalds in 2005 and the launch of <strong>GitHub </strong>in 2008 marked the beginning of the age of Open-Source.</p>
<p>Projects like <strong>Mozilla Firefox </strong>proved that open source could compete in consumer markets, while <strong>Android </strong>showed how open source could dominate mobile computing.</p>
<p>The success of <strong>WordPress </strong>demonstrated how open source could democratize publishing and website creation.</p>
<h4>Cloud Computing and Containerization: 2010s</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*s0rtcYWQ9yDLWTYlhyoq7w.png"><figcaption>Docker + Kubernetes</figcaption></figure><p><strong>OpenStack </strong>challenged proprietary cloud platforms, while <strong>Docker</strong> revolutionized application deployment through containerization.</p>
<p><strong>Kubernetes</strong>, originally developed by Google and later open-sourced, became the standard for container orchestration, showing how even tech giants benefit from community-driven development.</p>
<h4>The AI Revolution: 2010s-Present</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*R4jzqk_wUhPyCSajl0eMUg.png"><figcaption>Tensorflow and pytorch</figcaption></figure><p><strong>TensorFlow </strong>and <strong>PyTorch</strong>, open-sourced by Google and Facebook respectively, democratized access to artificial intelligence tools. These frameworks enabled researchers and developers worldwide to contribute to AI advancement.</p>
<p>The success of Linux Foundation’s AI Foundation projects showed how open collaboration could accelerate innovation in cutting-edge fields.</p>
<h4>The Blockchain Era and Beyond</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dDmfjHggCoFdTNiMPjnEpw.jpeg"><figcaption>Bitcoin</figcaption></figure><p><strong>Bitcoin</strong>’<strong>s </strong>open source implementation in 2009 sparked a financial revolution, while <strong>Ethereum</strong>’<strong>s </strong>open source smart contract platform enabled a new generation of decentralized applications. The transparency of these projects proved crucial for building trust in revolutionary financial technologies.</p>
<h4>The Modern Web Revolution: JavaScript and Open Source</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/728/1*ABVZa5V57pojP-XeCzhb0g.jpeg"><figcaption>React</figcaption></figure><p>The story of modern web development is inseparable from open source <strong>JavaScript</strong>. <strong>Node.js</strong>, released in 2009, transformed JavaScript from a browser-only language into a full-stack powerhouse, enabling developers to use the same language across the entire application stack. The <strong>Node Package Manager (NPM)</strong> became the world’s largest software registry, hosting millions of open source packages that developers use daily.</p>
<p><strong>React</strong>, released by Facebook in 2013, revolutionized user interface development and spawned an entire ecosystem of open source tools. <strong>Vue.js</strong>, created by Evan You, showed how individual developers could create frameworks that compete with tech giants’ offerings. Tools like <strong>webpack</strong>, <strong>Babel</strong>, and <strong>ESLint </strong>transformed how developers build, test, and deploy web applications. This open source ecosystem made modern web development more accessible and powerful than ever before, enabling developers to build complex applications by standing on the shoulders of the open source community.</p>
<h3>The Open Source AI Revolution: Breaking Down Walls</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MyavxcioB8O-RdpclzAfTw.jpeg"><figcaption>Deepseek Ai</figcaption></figure><p>In 2023, something unprecedented happened in artificial intelligence. The walls of proprietary AI began to crack, starting with Meta’s release of <strong>LLaMA</strong>. Suddenly, state-of-the-art AI wasn’t just for tech giants with massive compute budgets.</p>
<p>The response was explosive. <strong>Mistral AI</strong>, a French startup, released models that matched or exceeded proprietary alternatives in benchmarks while running on consumer hardware. Their <strong>Mixtral </strong>model demonstrated that efficient, open source AI wasn’t just possible — it was here [4].</p>
<p>Then came a wave of innovation from China. <strong>DeepSeek</strong>’s models showed particular prowess in coding tasks, often outperforming closed-source alternatives. As Liu Wei, DeepSeek’s lead researcher puts it, “Open source AI isn’t just an alternative to proprietary models — it’s the future of responsible AI development” [5].</p>
<p>Yi Technology and Baichuan followed with their own contributions, each pushing the boundaries of what open source AI could achieve. These developments weren’t just technical achievements — they represented a fundamental shift in how AI technology is developed and shared.</p>
<p>Andrej Karpathy, former director of AI at Tesla, captured this moment perfectly: “The open source AI movement of 2023–24 will be remembered as the moment when AI development truly became a global, collaborative effort”</p>
<h4>Conclusion</h4>
<p>Knowledge about the history of open-source makes you realise that collaboration and openness leads to major developments in the progress of humanity in technology and it has been proven repeatedly.<br>It also makes you realise how much it is important for one to contribute to open source as well as document his learning. <br>For development of one’s own skills as well as the deveopmet of the community.</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d72d874e7634" width="1" height="1" alt="">


The Power of Open-Source: History is Evidence


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sD6bl5CcnKBE8b0xO4D33g.png"><figcaption>Astro JS</figcaption></figure><p>I am student who is still in his learning phase. I had recently learned to work with react and was working on a project. Before react I had learned many JS frameworks but with React I started discovering how the modern world of web development was continuously evolving. While discovering more about the various JS frameworks I came across Astro and Qwik.</p>
<p>I first heard about Astro through a heated Twitter debate about the bloat of JavaScript. Someone mentioned this new framework that shipped “zero JavaScript by default,” which seemed almost heretical to me at the time. How could a modern web application function without JavaScript? Intrigued, I decided to spend a weekend exploring it.</p>
<h4>My First Astro Experience</h4>
<p>My first reaction to Astro was to be skeptical but also excited at the same time. The notion of “islands architecture” was quite foreign, as I am used to considering my applications to be single entities.</p>
<p>Pages that took seconds to become interactive now loaded instantly. The best part? I could still use my React components when I needed them, but only where I actually needed interactivity. It was like discovering that I’d been driving with the parking brake on all these years.</p>
<h4>Enter Qwik</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/554/1*vC69UEIMhG75JqKLZaj2Iw.png"><figcaption>Qwik JS</figcaption></figure><p>I had initially decide to explore about both Astro and Qwik but learning about Astro took me a while that I had forgotten about Qwik. But a Instagram reel about “resumability” caught my attention. The speaker was explaining how Qwik eliminates the need for hydration entirely, and I found myself drawn into a completely different approach to frontend development.</p>
<p>What struck me most about Qwik was how it flipped my basic intuition on how web applications would work. The idea of resumability-essentially picking up where the server left off instead of rebuilding the whole application state-seemed magical at first. But the more I worked with it, the more I became convinced that this might be the future of web development.</p>
<h3>The Practical Differences</h3>
<p>I have worked with both frameworks briefly and have gained a unique insight into their strengths and approaches. They both aim to solve similar problems but feel very different in practice.</p>
<h4>My Astro Experience</h4>
<p>Working with Astro is more like having a smart assistant always on the lookout for performance. It gives me the ability to explicitly define what should be interactive and what need not be. Specifically, markdown content handling has been one of the most pleasant features, where it’s often the go-to tool for documentation sites and blogs.</p>
<p>What surprised me the most was how it changed my thinking about interactivity. I found myself questioning whether I really needed that animated dropdown menu or if a simpler solution would work better. This framework taught me that “less is more” isn’t just a design principle — it’s a performance strategy.</p>
<h4>My Journey with Qwik</h4>
<p>Qwik feels like working with technology from the future. The approach to loading JavaScript is so different that it took me a while to stop looking for traditional entry points and lifecycle methods. The first time I saw a complex application load instantly, without any hydration delay, I knew this was something special.</p>
<p>The learning curve was much steeper for Qwik than with Astro, but the payoff is well worth it. I’ve used Qwik for only a while but have found that it is really helpful when you need rich interactivity but performance can’t be sacrificed.</p>
<h3>What I Learned</h3>
<p>I’ve learned a lot of valuable lessons from this:</p>
<p>1. It’s not about optimizing performance but sometimes rethinking our basic approaches.<br>2. The best one for you is going to depend on your use case, but I use Astro for content-rich sites and Qwik for super interactive applications.<br>3. Being open to new approaches, even if they seem radical at first, can lead to significant improvements in our work.</p>
<h3>Looking Forward</h3>
<p>I’m looking forward to how these frameworks would shape up into the future as I continue to work with them. I see both communities growing and evolving and the innovations that they are bringing to frontend development are inspiring. I don’t think that these will replace traditional ones like React or Vue, but they’re definitely pushing the whole ecosystem to move forward and better itself.</p>
<h4>My Advice to Fellow Developers</h4>
<p>If you feel stuck in the traditional frontend framework ecosystem, I encourage you to explore these alternatives. Start small — maybe rebuild your personal blog with Astro, or create a simple interactive application with Qwik. The perspective you’ll gain is invaluable, even if you ultimately stick with your current stack.</p>
<p>Remember, the goal is not to jump on every new technology trend but to understand different approaches to solving problems. These frameworks have taught me that there’s always room for innovation in web development, even in areas we think are well-established.</p>
<p>It’s true, the frontend landscape is changing. And from where I sit, it’s getting better. Whether or not you choose to adopt these new frameworks, understanding their approaches can make you a better developer. I know it has for me.</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4683cbc8c27a" width="1" height="1" alt="">


The Astro and Qwik Experience


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kMfuLOtZ9qdNi0QmmO9n-w.png"></figure><p><a href="https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/">website link</a></p>
<h3>The Evolution of JavaScript Frameworks, 2025 Edition</h3>
<p>JavaScript ecosystem has always been a dynamic place with frameworks continuing to rise and fall in popularity over the years. Analyzing Trends of Usage and Adoption: 2016–2024 For a better understanding of where web development is going, we have analyzed some clear trends of usage and adoption figures to create a story of where the web is heading.</p>
<h3>React’s Undisputed Dominance</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XqZp2w7ZNgnf9UT9Eu9mrg.png"><figcaption>Majority votes for react</figcaption></figure><p>React has continued to be the undisputed king of the JavaScript framework world. It has quickly grown from 50% in 2016 to ~80% by 2024 and remains steady. With an extensive ecosystem supported by Meta (formerly Facebook) and a gentle learning curve, this power is no wonder. Then, with aspects like component-based architecture and virtual DOM, it has set a standard that a lot of other frameworks follow.</p>
<h3>Vue.js and Angular — The Heavyweights</h3>
<p>Following React, we see Vue.js and Angular contend for the second spot, both sitting around the 50% threshold in recent years. Vue.js has grown significantly compared to its humble beginnings with around 10% in 2016. It has slowly emerged due to the fact that it has great documentation, is easier to integrate into existing projects, and has a much softer learning curve than Angular.</p>
<p>Angular, although having its ebbs and flows, still holds a strong position mainly in enterprise setups. It started from around 20% in 2016 and grew significantly until 2018, before stabilizing near the 50%(ish) mark. Its rich feature set and excellent TypeScript integration keep it a popular choice for big applications.</p>
<h3>Svelte and Others: The Rising Stars</h3>
<p>One of the more interesting trends has been the slow steady rise of Svelte, reaching around 25% adoption by 2024. Svelte’s new paradigm for reactivity and its compilation-based model that produces smaller bundle sizes have made a big impression on the developer community.</p>
<h3>The Newer Contenders</h3>
<p>The graph also features several newer frameworks coming into play:</p>
<ul>
<li>
<strong>Preact</strong> has a consistent presence, drawing developers searching for a minimalist React alternative.</li>
<li>
<strong>Alpine.js</strong> has found its small niche in the minimal JavaScript movement.</li>
<li>The newest batch of innovations in the JavaScript ecosystem are <strong>Qwik</strong>, <strong>Lit</strong>, and <strong>Solid</strong>, which, while deploying a lower level of adoption, are paving the way for the new wave.</li>
</ul>
<h3>Other Frontend frameworks</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gvmEvSi64TBPAt6SrlnYJw.png"></figure><h3>The Rise of Meta-Frameworks: A New Chapter in JavaScript Development</h3>
<p>As we delve deeper into the JavaScript ecosystem, an interesting trend emerges beyond the traditional frameworks we discussed earlier. The landscape has evolved to include meta-frameworks — sophisticated tools built on top of existing frameworks that provide additional features and optimizations. Let’s explore this fascinating development in the JavaScript world.</p>
<h3>Astro: The New Frontend Pioneer</h3>
<p>Leading the charge in the meta-framework space is Astro, capturing an impressive 34% of developer mindshare. This remarkable adoption rate isn’t merely a statistical blip — it represents a fundamental shift in how developers approach web development. Astro’s philosophy of “ship less JavaScript” resonates deeply with modern web development concerns about performance and user experience. Its islands architecture, which allows developers to selectively hydrate interactive components, offers a elegant solution to the perennial challenge of balancing interactivity with performance.</p>
<h3>The Enterprise Stalwart: Ember</h3>
<p>Following at 10%, Ember’s position tells an interesting story about the staying power of established meta-frameworks. While newer tools might grab headlines, Ember’s continued presence, supported by 62 developers in our survey, demonstrates the value of stability and convention in enterprise environments. Its opinionated approach, often criticized in the early days, has proven to be a strength for teams seeking consistent, maintainable codebases.</p>
<h3>Next.js and the Modern Stack</h3>
<p>Next.js’s 5% share might seem modest, but it’s crucial to understand this in context. As a meta-framework built on React, Next.js has become almost synonymous with modern full-stack React development. The 30 respondents likely represent teams handling significant production applications, making its impact more substantial than raw numbers might suggest.</p>
<h3>The Persistence of jQuery and Traditional Approaches</h3>
<p>Perhaps the most surprising revelation is jQuery’s continued presence at 4%. This isn’t just about legacy code — it reflects the reality that not every project needs cutting-edge features. Some developers find jQuery’s straightforward approach to DOM manipulation and AJAX still valuable in specific contexts.</p>
<h3>The Innovation Tier</h3>
<p>The cluster of frameworks including Nuxt, Elm, and Remix (each around 3–4%) represents the innovative edge of meta-framework development. Each brings unique strengths: Nuxt extends Vue.js capabilities, Elm offers functional programming purity, and Remix rethinks data flow in React applications. Their presence shows how the ecosystem continues to evolve and specialize.</p>
<h3>Looking Forward</h3>
<p>The trends indicate that although React isn’t going to be dethroned any time soon, there are strong contenders and innovation in the ecosystem. The rise of compiler-oriented frameworks, such as Svelte, as well as the ongoing evolution of veteran frameworks, such as Vue.js and Angular, suggest that the JavaScript framework ecosystem is still vibrant and dynamic.<br>As we look forward, the continued evolution of both frameworks and meta-frameworks promises even more innovative solutions to web development challenges. The key for developers will be understanding not just how to use these tools, but when and why to choose them for specific projects.</p>
<p>So go ahead and take a closer look at these frameworks’ architecture, community support, and based use cases to make an informed decision towards your next project.</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a7ccf4a89926" width="1" height="1" alt="">


Informative

Recent Articles