The latest articles on DEV Community by sano.senxpai (@mikey177013). https://dev.to/mikey177013 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3947758%2F7ef9abb3-802e-4586-984b-d10831d72ef0.jpeg https://dev.to/mikey177013 en sano.senxpai Sat, 23 May 2026 14:47:56 +0000 https://dev.to/mikey177013/oprix-from-a-simple-messaging-web-app-to-a-well-structured-and-enhanced-ui-messaging-web-app-1f68 https://dev.to/mikey177013/oprix-from-a-simple-messaging-web-app-to-a-well-structured-and-enhanced-ui-messaging-web-app-1f68 <p><em>This is a submission for the <a href="https://dev.to/challenges/github-2026-05-21">GitHub Finish-Up-A-Thon Challenge</a></em></p> <h2> What I Built </h2> <p>Oprix – Modern Real-Time Social Messaging Platform<br> Oprix is a full-stack messaging and social communication platform built with React, TypeScript, Vite, Supabase, and Tailwind CSS. It combines real-time chatting with social and smart interaction features in a clean mobile-first experience.</p> <p><strong>Key features:<br> ●Real-time private messaging<br> ●Voice notes and calling UI<br> ●Message reactions and forwarding<br> ●Mentions and smart autocomplete<br> ●Poll creation and voting<br> ●Screenshot detection<br> ●Role badges and profile system<br> ●Notifications support<br> ●Offline queue handling<br> ●AI-powered chat integration<br> ●PWA support with installable app experience<br> ●Authentication with OTP and password recovery</strong></p> <h2> Demo </h2> <p><strong>Website is live</strong>: <a href="https://oprix-new.vercel.app/" rel="noopener noreferrer">https://oprix-new.vercel.app/</a></p> <h2> The Comeback Story </h2> <p>I originally built this project for fun after one of my friends suggested the idea. The first version was very simple and focused only on core communication features.</p> <p>Before:</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fve9qishbslk5h5gjuma9.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fve9qishbslk5h5gjuma9.jpg" alt=" " width="800" height="1704"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9bqpd0esc3laoii2l85l.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9bqpd0esc3laoii2l85l.jpg" alt=" " width="800" height="1582"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftja24zmbn6b13xfqgepk.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftja24zmbn6b13xfqgepk.jpg" alt=" " width="800" height="1585"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flyfuuehu77ptdxx1p6k4.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flyfuuehu77ptdxx1p6k4.jpg" alt=" " width="800" height="1582"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjxytlqd0r4z3om880aeh.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjxytlqd0r4z3om880aeh.jpg" alt=" " width="800" height="1585"></a></p> <p>Basic one-to-one messaging system</p> <p>Simple profile editing</p> <p>Add friends feature</p> <p>Basic node/community system</p> <p>Minimal UI and standard chat experience</p> <p>What I improved and rebuilt:</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft9kc4kjkr3lh2l7mhj52.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft9kc4kjkr3lh2l7mhj52.jpg" alt=" " width="800" height="1704"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4l43jrwtobxdnxxdm28l.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4l43jrwtobxdnxxdm28l.jpg" alt=" " width="800" height="1704"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmbjz725hi6jr6jshreb0.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmbjz725hi6jr6jshreb0.jpg" alt=" " width="800" height="1704"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1ohrfdlfvjvdsgzchmdn.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1ohrfdlfvjvdsgzchmdn.jpg" alt=" " width="800" height="1704"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffzhjopmrppnsz2tuhz6c.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffzhjopmrppnsz2tuhz6c.jpg" alt=" " width="800" height="1704"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F36ctw2mtm6no7qhlpfk8.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F36ctw2mtm6no7qhlpfk8.jpg" alt=" " width="800" height="1704"></a></p> <p>Completely redesigned the entire UI/UX with a modern glassmorphism design</p> <p>Rebuilt the chat interface for a cleaner, smoother and more polished experience</p> <p>Fixed Vox calling system and voice call functionality</p> <p>Added message reactions with emojis</p> <p>Added message forwarding support</p> <p>Added polling system</p> <p>Added oprix AI </p> <p>Remade the Node system with:</p> <p>Code sharing</p> <p>Node joining via shareable links</p> <p>Optimized chat and node interactions for better usability</p> <p>Fixed and improved add friend functionality</p> <p>Fixed and improved notification handling</p> <p>Added block and report user functionality</p> <p>Improved overall responsiveness and performance</p> <p>Current result:<br> The project evolved from a basic messaging website into a more complete social communication platform with calling, interactive messaging features, improved community functionality, and a significantly more polished user experience.</p> <h2> My Experience with GitHub Copilot </h2> <p>GitHub Copilot helped speed up development by assisting with repetitive coding tasks, generating component structures, suggesting TypeScript and React code patterns, and reducing time spent on boilerplate code.</p> <p>&lt;!-- Team Submissions: <a class="mentioned-user" href="https://dev.to/mikey177013">@mikey177013</a></p> devchallenge githubchallenge ai programming