Forem: JOYSTON

VirtuLab: A Browser-Based Lab Built to Close the Practical Learning Gap

JOYSTON — Sun, 01 Mar 2026 15:24:12 +0000

This is a submission for the DEV Weekend Challenge: Community

I built VirtuLab for students who struggle not because they lack ability, but because they lack access.

In many colleges, especially underprivileged institutions and rural campuses, physics and electrical labs are limited by shared equipment, outdated apparatus, and tight time slots. Students often get one short session to complete an experiment. If a circuit is wired incorrectly or a setup fails, there is rarely time to restart.

For underprivileged students, the gap is wider. There is no personal lab kit at home. No private coaching. No extra practice outside scheduled hours. Practical exams then become exercises in memorizing steps instead of understanding systems.

VirtuLab was built to give them something most never truly get: repetition without restriction.

What I Built

VirtuLab is a browser-based virtual physics and electrical laboratory that simulates experimentation as a dynamic system, not a fixed animation.

It contains three major environments:

3D Motion and Optics Lab

Students can experiment with pendulums, springs, lenses, and Newtonian motion. Parameters like mass, length, angle, and force can be adjusted in real time, with measurements updating instantly.

2D Circuit Builder

A drag-and-drop circuit workspace where students connect batteries, resistors, LEDs, and other components using precise wire drawing. Circuits behave based on real topology, not visual shortcuts.

Astronomy Lab

A fully interactive celestial mechanics environment including:

Solar System simulation to explore planetary orbits and gravitational interactions
N-body gravity simulation where users can observe multi-body gravitational dynamics
Orbital mechanics experiments to study satellite trajectories and escape velocities
Tidal force visualization to understand gravitational gradients and Roche limits

Students can modify mass, distance, and velocity to observe how orbital paths evolve. This makes gravitational equations observable instead of abstract.

Each environment includes real-time measurement feedback and built-in conceptual explanations to bridge simulation behavior with theory.

Authentication is handled through Appwrite, allowing students to securely access and continue experiments.

What Makes It Different

VirtuLab treats simulations as computational systems, not animations.

In the Circuit Builder, every wire connection is translated into a graph-based internal model. Current and voltage are calculated from actual network topology. If a student leaves a circuit incomplete, it fails realistically.

In the Motion Lab, oscillation periods and forces are recalculated dynamically as parameters change. Nothing is pre-rendered.

In the Astronomy Lab, gravitational interactions are computed continuously. When a student increases planetary mass or modifies initial velocity, orbital paths shift according to gravitational equations, not scripted motion.

Students are not watching outcomes. They are shaping them.

For students with limited lab exposure, this builds intuition instead of dependency on memorized procedures.

Demo

Live Demo:
https://virtulab.appwrite.network/

GitHub Repository:
https://github.com/joyston602-rgb/Virtulab

Example scenario:

A student logs in and opens the Circuit Builder.
They place a battery, resistor, and LED.
They connect terminals carefully.

If the circuit is valid, the LED responds immediately based on calculated current.
If they misconnect a wire, nothing happens.

They adjust resistance. Brightness changes in real time.
They disconnect a node. The system recalculates instantly.

In the Astronomy Lab, they increase a planet’s mass and watch orbital paths tighten due to stronger gravitational pull. They increase initial velocity and observe escape trajectories form.

Cause and effect becomes visible.

Screenshots

Why This Matters

Educational inequality is not only about access to books. It is about access to experimentation.

Students from underprivileged backgrounds often work harder with fewer opportunities to practice. VirtuLab gives them a digital lab bench that does not close after one hour.

Designing a Reliable Contract Intelligence System with Gemini

JOYSTON — Sun, 01 Mar 2026 13:32:49 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

The turning point in this project was not infrastructure. It was deciding whether a language model should sit directly in a production decision path without guardrails.

I built a document intelligence system for contract review. It ingests PDFs, extracts clause-level risk signals, and surfaces them for small businesses that cannot afford outside counsel for routine vendor agreements. The constraint was reliability. If a liability cap was hallucinated or an auto-renewal was missed, the output would not just be inaccurate. It would be harmful.

The architecture has three layers.

A PDF extraction pipeline segments contracts into clauses using heading detection and semantic boundary shifts instead of page splits.

A Gemini layer classifies each clause against a fixed risk taxonomy and generates a plain-language summary with a risk tier.

A React frontend groups clauses by risk tier rather than document order, aligning with how users actually review exposure.

Each clause moves through classify, summarize, score, and validate stages. Prompts are minimal and schema-constrained. Using gemini-1.5-pro with structured JSON output, every response is validated against a Zod schema before entering application state. Failures are flagged for manual review. Nothing degrades silently.

Gemini’s strength here is compression. Dense legal language becomes concise summaries that reflect practical implications. Iterating on the taxonomy exposed overlapping categories early, allowing me to reduce twelve risk types to six in days instead of weeks.

The friction appeared in nested clauses. Parent clauses with modifying sub-clauses produced summaries that were technically correct but incomplete. A liability cap without its exception clause is misleading. The solution was architectural: recursively unnest clauses, inject parent references into context, and reconstruct structure in code. That reduced summarization drift significantly.

Cost was another constraint. A forty-page contract could trigger over thirty model calls. An embedding similarity filter now pre-classifies low-risk template clauses, reducing calls by roughly thirty-five percent without hurting recall.

The real shift was conceptual. I stopped treating Gemini as an assistant and started treating it as a probabilistic component with defined failure modes. Structured outputs, validation boundaries, explicit failure states, and clear separation between language understanding and business logic now define the system.

Next, I am building multi-document comparison to detect deviations across similar vendor agreements. Before release, I am running recall evaluation against a manually annotated dataset. The system works, but without measurable precision and recall under edge cases, it does not belong in decision-critical workflows.

This project changed how I integrate language models. They are not conversational layers on top of applications. They are bounded components inside systems designed for validation, uncertainty, and measurable reliability.

Supabase Has More Depth Than Most People Use

JOYSTON — Wed, 25 Feb 2026 14:45:19 +0000

Most developers use Supabase for the obvious things: tables, authentication and storage. It works well for that. But what often goes unnoticed is how much depth sits underneath.

Because everything is built on Postgres, Supabase isn’t just a backend wrapper it’s a programmable database platform. Features like Row Level Security can move authorization logic directly into the database, reducing the need for repetitive backend checks. When designed properly, your data layer becomes responsible for enforcing access rules.

Database functions exposed through RPC are another underused capability. Instead of building separate APIs for complex operations, you can run logic inside Postgres itself. This keeps operations atomic and simplifies architecture.

Realtime subscriptions tied directly to database changes also feel more integrated than many expect. They allow reactive systems without managing separate infrastructure.

The more you design around the database-first model, the more Supabase reveals its strength. Many teams only use a fraction of what’s available, even though the deeper capabilities are already built in.

Triax AI: A Free, Lightweight 3D CAD Platform Bringing Engineering Education to Underserved Students

JOYSTON — Sat, 14 Feb 2026 06:05:30 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Triax AI - A completely free, lightweight 3D design education platform that brings professional CAD learning to underprivileged students and aspiring engineers worldwide through AI-powered guidance.

The Problem

Professional CAD software costs thousands of dollars annually. Engineering students from underprivileged backgrounds face impossible barriers: expensive licenses, high-end hardware requirements, and zero interactive guidance. Even existing 3D web applications are notoriously heavy - they lag, crash and are unusable on the basic computers that underprivileged students have access to. They're locked out of careers in design, manufacturing, and engineering before they even start.

The Solution & Core Challenge

Triax AI runs entirely in the browser - no downloads, no installations, no cost. But here's the real innovation: making a full-featured 3D CAD platform lightweight enough for basic hardware.

3D websites are inherently heavy. Real-time rendering, complex geometries, and interactive controls typically require powerful GPUs and significant RAM. The main technical challenge was building a professional-grade 3D modeling environment that runs smoothly on the 4GB RAM laptops and integrated graphics that underprivileged students actually have access to.

Through aggressive optimization - efficient geometry management, smart rendering strategies and minimal bundle sizes - Triax AI delivers real-time 3D modeling with AI-powered mentorship on hardware that can't even run traditional CAD software. It's what expensive CAD courses charge thousands for, but accessible to anyone with a basic computer and internet connection.

Key Features:

Zero Barriers: Completely free, browser-based, works on low-spec devices
AI Mentor: Real-time chatbot that guides students through CAD concepts like a personal tutor
Smart Challenges: Progressive learning system that adapts to each student's pace
Instant Feedback: Automated assessment that validates designs and explains improvements
Professional Tools: Move, rotate, scale, boolean etc.. operations
Dual Modes: Structured tutorials for beginners, playground for creative exploration

The Impact

This isn't just another learning app - it's a pathway to economic mobility. Triax AI gives underprivileged students the same quality CAD education that privileged students pay thousands for. A student in a rural school with a basic laptop now has the same learning opportunity as someone with access to expensive software and private tutoring.

By making 3D design education free, lightweight and AI-enhanced, Triax AI opens doors to engineering careers for students who would otherwise never get the chance.

Demo

Deployed link : https://triax-ai.netlify.app/
Demo Video link : https://www.youtube.com/watch?v=bLIuMA0I_X8

Screenshots

My Experience with GitHub Copilot CLI

The biggest challenge in building Triax AI wasn't adding features - it was making a 3D web application lightweight enough for underprivileged students with basic hardware. 3D websites are notoriously resource-heavy, and GitHub Copilot CLI was absolutely critical in solving this.

1. The Performance Optimization Challenge
3D rendering typically requires powerful GPUs and significant RAM. My target users have 4GB RAM laptops with integrated graphics. Every optimization mattered:

gh copilot suggest "optimize three.js for low memory usage" generated geometry instancing patterns that reduced memory footprint by 60%
Helped implement object pooling to prevent garbage collection spikes that cause stuttering
Suggested efficient LOD (Level of Detail) systems - complex shapes simplify when zoomed out
Generated code for lazy-loading geometries only when needed, keeping initial bundle under 200KB

Without Copilot CLI, I would have spent weeks researching Three.js performance patterns. Instead, I got production-ready optimization code in minutes, letting me iterate rapidly on what actually worked on low-end hardware.

2. Lightweight Rendering Strategies
Traditional 3D apps render everything every frame. On basic hardware, this kills performance:

gh copilot suggest "selective rendering for three.js scene" gave me smart render-on-demand patterns
Helped implement frustum culling to skip rendering objects outside the camera view
Generated efficient raycasting for object selection without performance overhead
Suggested WebGL state management to minimize GPU state changes

Copilot CLI understood the nuances of WebGL optimization - something that would have required deep expertise or days of trial-and-error.

3. Bundle Size Optimization
Every kilobyte matters when students have slow internet. Copilot CLI helped me keep the app lightweight:

Suggested tree-shaking strategies for Three.js (it's a massive library)
Generated dynamic import patterns for features like boolean operations (loaded only when used)
Helped implement efficient state management without heavy frameworks
Suggested compression strategies for 3D assets

The result: a full-featured 3D CAD platform that loads faster than most blog websites.

4. Building the AI Chatbot for Unreliable Networks
Underprivileged students often have unstable internet. The AI mentor needed to work reliably:

gh copilot explain helped me understand streaming response patterns that handle network interruptions
Generated robust retry logic with exponential backoff
Suggested local caching strategies for common CAD questions
Helped implement optimistic UI updates so the app feels responsive even with latency

5. Challenge Assessment System
The automated grading needed to be computationally efficient:

Copilot CLI generated spatial algorithms that run in O(n log n) instead of O(n²)
Suggested efficient bounding box checks before expensive geometry comparisons
Helped implement tolerance-based validation that's both accurate and fast
Generated scoring logic that provides detailed feedback without performance cost

The Real Impact
GitHub Copilot CLI didn't just accelerate development - it made the entire project possible. As a solo developer, I couldn't have achieved this level of performance optimization without it. The CLI gave me access to expert-level knowledge in:

WebGL and Three.js optimization
Memory management for JavaScript applications
Efficient algorithms for 3D spatial queries
Network resilience patterns for unreliable connections

Every suggestion was production-ready, followed best practices, and actually worked on the low-end hardware I was targeting. I could ask "how do I make this faster for 4GB RAM?" and get concrete, implementable solutions.

The natural language interface meant I could stay focused on the mission making CAD education accessible rather than getting lost in documentation. It felt like pair programming with a performance optimization expert who understood both the technical constraints and the social impact goal.

Most importantly: Copilot CLI helped me ship a lightweight, professional grade 3D platform that underprivileged students can actually use. That's not just faster development that's the difference between an idea and real impact.

Building a Modern SaaS Landing Page in Minutes with v0 by Vercel

JOYSTON — Thu, 04 Sep 2025 19:16:46 +0000

I recently tried out v0 by Vercel, and I’m amazed at how quickly I was able to generate a complete, modern landing page for a fictional SaaS company called StreamLine in just a few minutes!

Here’s what I asked v0 to build:

Prompt Used:
Create a modern, responsive landing page for a fictional SaaS company. The landing page should include the following sections:

A header with the company logo, navigation links, and a call-to-action button.

A hero section with a catchy headline, brief description, and a prominent call-to-action.

A features section highlighting 3–4 key features of StreamLine.

A testimonials section with quotes from satisfied customers.

A pricing section with different plan options.

A final call-to-action section to encourage sign-ups.

A footer with important links and social media icons.

And here’s the live result:
🔗 Live Demo – StreamLine SaaS Landing Page

What I Loved About v0

Speed: The entire page was generated in under a minute.
Clean Code: The React + Tailwind code was production-ready.
Customization: I could easily tweak text, colors, and layout.
Seamless Deployment: Deployed instantly to Vercel with one click.

Screenshot

v0 by Vercel is a game-changer for developers and designers who want to go from idea → production in record time. I’m excited to experiment more with v0 and use it in hackathons and client projects!

Have you tried v0 yet? Let me know what you think! 🚀

Boosting Performance with Gatsby Image CDN: A Developer’s Guide

JOYSTON — Mon, 04 Aug 2025 08:46:30 +0000

Introduction

Modern web performance is no longer a luxury—it’s a necessity. From reducing bounce rates to improving SEO rankings, faster websites deliver better user experiences. Gatsby, known for its speed and developer-friendliness, takes this a step further with Gatsby Image CDN — a powerful image optimization and delivery solution baked into Gatsby Cloud.

In this blog, I’ll walk you through what Gatsby Image CDN is, how it works, and how you can use it to supercharge image performance in your Gatsby site.

🔍 What is Gatsby Image CDN?

Gatsby Image CDN is a built-in cloud image optimization service that integrates seamlessly with your Gatsby site. It transforms, resizes, and delivers images over a global content delivery network (CDN), ensuring lightning-fast load times across the world.

Unlike traditional methods that rely on manual image compression or third-party plugins, Gatsby Image CDN requires zero configuration and works out-of-the-box with supported image sources (such as local files, CMSs like Contentful, Sanity, or even remote URLs).

Key Benefits

Blazing Fast Delivery: Images are optimized and served via a global CDN.
Built-in Lazy Loading & Blur-Up Effect: Enhances perceived performance and user experience.
Responsive Images: Auto-generates multiple sizes and formats (WebP, AVIF, etc.) for different screen sizes.
Works with gatsby-plugin-image: Smooth developer experience with React components like <StaticImage> and <GatsbyImage>.

How to Use Gatsby Image CDN

1. Install Required Plugins

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

Add to your gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
};

If you're using a headless CMS, make sure the relevant source plugin (e.g., gatsby-source-contentful) is also configured.

2. Add an Image Using `<StaticImage>`

import * as React from "react";
import { StaticImage } from "gatsby-plugin-image";

const HeroSection = () => (
  <div>
    <h1>Welcome to My Site!</h1>
    <StaticImage
      src="../images/hero.jpg"
      alt="Hero background"
      placeholder="blurred"
      layout="fullWidth"
    />
  </div>
);

You now have a fully optimized, lazy-loaded, responsive image served through the CDN.

3. Use Dynamic Images with `<GatsbyImage>`

When sourcing images from GraphQL (e.g., Contentful):

query {
  contentfulBlogPost {
    title
    featuredImage {
      gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
    }
  }
}

Render it in a component:

import { GatsbyImage } from "gatsby-plugin-image";

<GatsbyImage image={imageData} alt="Featured image" />;

Tips & Best Practices

Use layout="fullWidth" for banner-style images.
Use layout="fixed" or layout="constrained" for smaller or inline images.
Always set meaningful alt attributes for accessibility and SEO.
Prefer StaticImage for images in your codebase and GatsbyImage for GraphQL-driven images.

Real-World Performance Gains

On one of my recent projects, switching from static images to Gatsby Image CDN dropped our homepage load time by 42% and improved our Lighthouse performance score from 82 to 99 — just from optimizing images.

Gatsby Image CDN is more than just image optimization — it's an end-to-end solution that aligns with modern performance goals. Whether you're building a blog, an e-commerce site, or a corporate website, leveraging the power of Gatsby's image system is a no-brainer.

Try it out and feel the difference yourself

Why Notion Stands Out from Other Productivity Tools

JOYSTON — Fri, 18 Jul 2025 12:01:35 +0000

In today’s fast-paced world, staying organized is more important than ever. There are tons of productivity tools out there—Google Docs, Trello, Evernote, and more—but Notion brings something truly different to the table. Even as someone who’s just starting out with it, I can already see why so many people are making the switch.

All-in-One Workspace
Unlike most apps that focus on just one function (note-taking, task tracking, or project management), Notion combines them all. You can write documents, create to-do lists, build databases, set up kanban boards, and even manage wikis—all in a single workspace.

Full Customization
What sets Notion apart is how customizable it is. You’re not stuck with predefined layouts or rigid workflows. Whether you're a student, content creator, developer, or startup founder, you can tailor Notion to your exact needs—create your own dashboard, templates, or systems.

Connected Pages & Databases
Notion makes it easy to link information. Want your content calendar to connect with your task list? Done. Want your reading list to update automatically based on a tag? Easy. It’s like building your own internal tool without needing to code.

Clean, Distraction-Free UI
The minimalist design helps you focus on your work. No ads, no clutter—just a clean space to think, plan, and create.

Notion isn’t just a productivity tool—it’s a productivity platform. While tools like Trello, Docs, and Evernote are great in their own ways, Notion brings it all together. I’m just beginning my journey with it, and I’m excited to explore how it can improve my workflow as a developer, content creator, and lifelong learner.

How to Contribute to GoFr — Your Complete Guide and Earn Free Swags

JOYSTON — Thu, 10 Jul 2025 13:52:15 +0000

Hey everyone
Are you passionate about GoLang and open-source? Want to make your first contribution and earn some cool swags along the way? Here's a step-by-step guide to contributing to the GoFr project—a high-performance Golang framework built for reliability, testability, and scalability.
Whether you're fixing typos, refactoring code, writing tests, or improving documentation, this guide will help you contribute the right way!

What is GoFr?
GoFr is a GoLang-based microservices framework focused on performance and developer experience. It emphasizes clean code practices, test-driven development, and dependency injection—all backed by strong community standards.

Minor Contributions: Edit on the Fly
Small changes like:
• Fixing typos
• Renaming variables
• Improving error messages
...can be made directly on GitHub. Just hit the edit button on any file, GitHub will automatically create a temporary branch and a pull request (PR) for you. ✅
This is perfect for first-time contributors!

Want to Work on a Bigger Issue?
Follow these steps:

Browse open issues on GitHub.
Comment on the issue and request assignment.
Wait for a maintainer to assign it to you.
Start building! ⚠️ Avoid working on unassigned issues to prevent duplicated efforts.

⚠️ Triage Issues? Read This
Issues labeled with triage aren’t open for direct contributions. If you’re interested in working on one, first comment and ask for maintainer approval.

Code Formatting & Linting
Before committing your changes, make sure your code is formatted using:
• goimports
• golangci-lint
If you don’t, the pipeline will reject your PR. Save your time — set up your IDE to auto-format on save!

Testing is Not Optional
Every code change must be backed by tests:
• Unit Tests for all new methods/functions.
• Integration Tests for large features.
• Use table-driven tests for multiple scenarios.
Zero tolerance for decreased code coverage. The code-climate check will fail if test coverage drops.

Testing with Docker
GoFr uses multiple services like MongoDB, Redis, Kafka, PostgreSQL, and more. You can spin them up with Docker:
docker run --name mongodb -d -p 27017:27017 mongo
docker run --name gofr-pgsql -d -e POSTGRES_DB=customers -e POSTGRES_PASSWORD=root123 -p 2006:5432 postgres:15.1
…and many more! Check the full list in the official contribution guide.

Submit Your Pull Request the Right Way

Always submit PRs to the development branch.
Don’t open PRs until your feature is complete and tested.
All PRs must be reviewed by at least 2 GoFr developers before merging.
Add/Update documentation if applicable.
Use American English for consistency.

Documentation Matters
Improved docs = Better community.
• Update or add files in the development/docs/ folder.
• Add references to navigation.js.
• Add images to docs/public/ folder (if needed).
• Use Markdown standards.
You can also contribute by writing blog posts or tutorials—like this one

Coding Standards: Be a Pro
• No global variables.
• Use dependency injection (DB, logger, etc.).
• Don’t use init() functions.
• Exported functions must include GoDoc comments.
• Use context.Context as the first parameter (never use plain strings as keys).
• Lean interfaces: only take what you need.
• Avoid type assertions.

External Libraries
“A little copying is better than a little dependency.”
If you must use a library:
• Test the exact functionality you’ll rely on.
• Wrap it in an interface for easy replacement later.

Final Tip: Earn Swags & Recognition
Want to get noticed and earn swags? Here's what you can do:
• Star ⭐ the GoFr GitHub repository.
• Share your experience contributing to GoFr on platforms like Dev.to, Medium, or LinkedIn.
• Help review issues or guide others in GitHub Discussions.

Warp - The Intelligent Terminal for Developers

JOYSTON — Wed, 25 Jun 2025 16:45:23 +0000

Tired of slow, outdated terminals? Warp helps you write better commands with built-in AI assistance, making it easier and faster to build applications!

🎁 Want FREE Swags & Goodies?

Stickers
Hoodies
Bags
T-Shirts

Start using Warp today and earn rewards while boosting your dev productivity!
👉 https://app.warp.dev/referral/NQG5ZR

Forem: JOYSTON

VirtuLab: A Browser-Based Lab Built to Close the Practical Learning Gap

What I Built

3D Motion and Optics Lab

2D Circuit Builder

Astronomy Lab

What Makes It Different

Demo

Screenshots

Why This Matters

Designing a Reliable Contract Intelligence System with Gemini

Supabase Has More Depth Than Most People Use

Triax AI: A Free, Lightweight 3D CAD Platform Bringing Engineering Education to Underserved Students

What I Built

The Problem

The Solution & Core Challenge

The Impact

Demo

Screenshots

My Experience with GitHub Copilot CLI

Building a Modern SaaS Landing Page in Minutes with v0 by Vercel

What I Loved About v0

Screenshot

Boosting Performance with Gatsby Image CDN: A Developer’s Guide

Introduction

🔍 What is Gatsby Image CDN?

Key Benefits

How to Use Gatsby Image CDN

1. Install Required Plugins

2. Add an Image Using <StaticImage>

3. Use Dynamic Images with <GatsbyImage>

Tips & Best Practices

Real-World Performance Gains

Why Notion Stands Out from Other Productivity Tools

How to Contribute to GoFr — Your Complete Guide and Earn Free Swags

Warp - The Intelligent Terminal for Developers

2. Add an Image Using `<StaticImage>`

3. Use Dynamic Images with `<GatsbyImage>`