Developer Builds Interactive 3D Portfolio Using React, Three.js and Next.js

·1 views

Full-stack developer Muhammed Rifad KP has built a 3D interactive portfolio website using React 18, Three.js, Next.js, and Tailwind CSS. The portfolio features a rendered 3D desktop PC model powered by react-three/fiber and showcases over 10 live production web applications built for clients in the UAE and India. The site incorporates SEO optimizations including Schema.org JSON-LD markup, XML sitemaps, and canonical tags for better search indexing. A Node.js and Express.js backend connects to a MongoDB database, with the entire project deployed via Vercel CI/CD. Rifad shared the project on DEV Community, inviting feedback and potential collaboration on web engineering work.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Why AI Chat Answers Still Leave Half the Work to You

AI tools today typically deliver text responses that users must manually copy, paste, reformat, and place into the appropriate document or application. This 'copy-paste tax' accumulates across a workday and also causes a loss of context, since the AI's reasoning stays in the chat rather than traveling with the output. A more integrated approach would have the AI generate the actual working artifact—a live spreadsheet, a code file, a slide deck—directly within an editable surface. In that model, the gap between receiving an answer and completing the work effectively disappears. The article argues that the true measure of an AI tool is whether it delivers a usable, testable output or merely a claim that requires further human effort to apply.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Developer launches daily JavaScript puzzle game that auto-validates every answer

A developer has built 'What's the Output?', a free daily JavaScript puzzle game available at whatstheoutput.online. Each puzzle presents a code snippet and challenges players to predict its console output, with a new puzzle releasing every day at 00:00 UTC. Every snippet is executed in real Node.js as part of an automated test suite, ensuring no incorrect or unwinnable puzzles can go live. The system also lints hints to prevent them from inadvertently revealing answers, a flaw discovered during development. Built with Next.js ISR, the project aims to highlight the gap between what developers think JavaScript does and what it actually outputs.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Developer releases 'onwrite' to auto-format files written by scripts and AI agents

A developer has released onwrite, an open-source tool that brings format-on-save functionality to code generators, shell scripts, and AI coding agents — environments where editors like VS Code cannot intervene. The tool detects existing formatter configurations already present in a repository, such as Prettier, Ruff, or gofmt, and runs them automatically on files the moment they are written. For safety, onwrite never modifies source files directly; it pipes content through formatters via stdin/stdout and only replaces the file atomically if the full formatter chain succeeds. It also includes a watcher mode for processes that cannot be wrapped, a diagnostic command for transparency, and a hook for AI agents like Claude Code to re-read files after formatting changes them. Released as v0.1.0 under the MIT license, onwrite is available for macOS, Linux, and Windows, with install scripts and binaries hosted on GitHub.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Dev team migrates 5-year-old React admin app from CRA to Vite+SWC in 70 days

Engineers at ZURU migrated DreamNet, their internal React admin platform, from Create React App and Webpack to Vite and SWC to eliminate slow build times and near-unusable hot module replacement. The project, spanning 166 changed files and 70 days, revealed that CRA had embedded Webpack-specific semantics deep into the codebase over five years, making the migration far more complex than a simple config swap. The team deliberately kept the React version, router, and deployment contracts unchanged to ensure any behavioral difference could be treated as a clear regression. A 23-line Vite config handled the bundler switch, while the bulk of the work involved auditing and replacing Webpack assumptions across the source. The effort went through 28 diff revisions and 19 review comments before reaching production.

0 comments Read more at DEV Community