The latest articles on DEV Community by dahmen mohamed amine (@dahmen_mohamedamine_15fe). https://dev.to/dahmen_mohamedamine_15fe 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%2F3662717%2Fe2fe223e-acdf-4745-922d-9ee6c318f256.png https://dev.to/dahmen_mohamedamine_15fe en dahmen mohamed amine Mon, 15 Dec 2025 11:43:43 +0000 https://dev.to/dahmen_mohamedamine_15fe/building-wordly-a-complete-language-learning-app-in-3-months-with-ai-assistance-5a0l https://dev.to/dahmen_mohamedamine_15fe/building-wordly-a-complete-language-learning-app-in-3-months-with-ai-assistance-5a0l <p>In just <strong>three months</strong>, I designed and developed <strong>Wordly</strong>, a complete language-learning application, from backend architecture to mobile deployment.<br><br> The application offers <strong>interactive exercises</strong>, <strong>vocabulary packs</strong>, <strong>real-time voice chatrooms</strong>, a <strong>tutor marketplace</strong>, <strong>gamification systems</strong>, and an <strong>integrated payment solution</strong>.</p> <p>Using <strong>AI-assisted development tools</strong> throughout the process significantly accelerated delivery while preserving a <strong>clean</strong>, <strong>scalable</strong>, and <strong>production-ready architecture</strong>.</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%2Ftuo5qxo3mkmlzmoqbpnm.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%2Ftuo5qxo3mkmlzmoqbpnm.jpg" alt=" " width="800" height="1733"></a></p> <p>👉 <strong>Lien Google Play</strong><br><br> 🔗 <a href="https://play.google.com/store/apps/details?id=com.memowords.app&amp;hl=en" rel="noopener noreferrer">MemoWords – Disponible sur Google Play</a></p> <h2> Architecture Overview </h2> <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%2Ffv47oc7as0aaqds7484f.png" 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%2Ffv47oc7as0aaqds7484f.png" alt=" " width="800" height="1200"></a></p> <p>This clear separation enables:</p> <ul> <li> <strong>Independent evolution</strong> of components </li> <li> <strong>Improved resilience</strong> </li> <li><strong>Horizontal scalability</strong></li> </ul> <h2> Frontend – React Native Mobile Application </h2> <h3> Technical Stack </h3> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Technology</th> <th>Version</th> <th>Purpose</th> </tr> </thead> <tbody> <tr> <td>React Native</td> <td>0.79.5</td> <td>Cross-platform mobile app</td> </tr> <tr> <td>React</td> <td>19.0.0</td> <td>UI management</td> </tr> <tr> <td>React Navigation</td> <td>6.x</td> <td>Navigation</td> </tr> <tr> <td>Firebase</td> <td>23.4.0</td> <td>Authentication, analytics, notifications</td> </tr> <tr> <td>Stripe RN</td> <td>0.38.6</td> <td>Payments</td> </tr> <tr> <td>WebRTC</td> <td>124.0.6</td> <td>Real-time audio</td> </tr> <tr> <td>Google Mobile Ads</td> <td>14.11.0</td> <td>Monetization</td> </tr> <tr> <td>AsyncStorage</td> <td>1.24.0</td> <td>Local storage</td> </tr> <tr> <td>Jest</td> <td>29.7.0</td> <td>Testing</td> </tr> </tbody> </table></div> <h3> Key Features </h3> <ul> <li>🌍 <strong>Multilingual support</strong>: English, French, Arabic, Spanish, German, Italian, Portuguese </li> <li>📚 <strong>Interactive exercises</strong>: flashcards, multiple choice, fast translations </li> <li>🎮 <strong>Full gamification system</strong>: XP, levels, achievements, leaderboards, daily goals </li> <li>🎓 <strong>Tutor marketplace</strong>: bookings and voice sessions </li> <li>🗣️ <strong>Community features</strong>: voice chatrooms, conversations, articles </li> <li>🧠 <strong>Structured learning paths</strong>: courses, lessons, progress tracking </li> <li>📦 <strong>Offline mode</strong>: locally available word packs and exercises </li> </ul> <h3> Project Structure </h3> <p>src/<br> ├── components/ # Reusable UI components<br> ├── screens/ # Screens (70+)<br> ├── services/ # Business logic &amp; API (27+)<br> ├── contexts/ # Global state<br> ├── hooks/ # Custom hooks<br> ├── config/ # Configuration<br> ├── utils/ # Utility functions<br> └── translations/ # Internationalization</p> <p>This structure improves <strong>readability</strong>, <strong>testability</strong>, and <strong>code reuse</strong>.</p> <h2> Backend – Flask REST API </h2> <h3> Architectural Principles </h3> <ul> <li> <strong>Framework</strong>: Flask </li> <li> <strong>Style</strong>: RESTful JSON </li> <li> <strong>Deployment</strong>: PythonAnywhere </li> <li> <strong>Configuration</strong>: Environment-based (no hardcoded values)</li> </ul> <h3> API Categories </h3> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Domain</th> <th>Endpoints</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Auth</td> <td><code>/api/auth/*</code></td> <td>Login, registration</td> </tr> <tr> <td>Content</td> <td> <code>/api/packs</code>, <code>/api/articles</code> </td> <td>Vocabulary &amp; content</td> </tr> <tr> <td>Learning</td> <td> <code>/api/courses</code>, <code>/api/exercises</code> </td> <td>Progress tracking</td> </tr> <tr> <td>Social</td> <td> <code>/api/chatrooms</code>, <code>/api/conversations</code> </td> <td>Community</td> </tr> <tr> <td>Tutors</td> <td> <code>/api/tutors/*</code>, <code>/api/sessions/*</code> </td> <td>Bookings</td> </tr> <tr> <td>Gamification</td> <td><code>/api/gamification/*</code></td> <td>XP, achievements</td> </tr> <tr> <td>Payments</td> <td> <code>/api/no-ads/*</code>, <code>/api/forfaits/*</code> </td> <td>Stripe</td> </tr> </tbody> </table></div> <h3> Backend Features </h3> <ul> <li>🔐 CAPTCHA and anti-abuse protection </li> <li>💳 Secure Stripe payments </li> <li>🎮 Advanced gamification calculations </li> <li>📊 User analytics and tracking </li> <li>🔔 Notifications and reminders </li> </ul> <h2> Voice Backend – Django &amp; WebSockets </h2> <h3> Why a Separate Backend? </h3> <p>PythonAnywhere does not support <strong>WebSockets</strong>, so a dedicated backend was required for <strong>real-time communication</strong>.</p> <ul> <li> <strong>Framework</strong>: Django + Channels </li> <li> <strong>Hosting</strong>: Render.com </li> <li> <strong>Protocol</strong>: Secure WebSocket (WSS) </li> <li> <strong>Audio Communication</strong>: WebRTC P2P </li> </ul> <h3> Real-Time Features </h3> <ul> <li>Voice room creation and management </li> <li>Role management (speaker / listener) </li> <li>Paid tutor sessions </li> <li>Collaborative whiteboard </li> <li>Camera sharing </li> <li>Event logging </li> <li>Health check endpoint </li> </ul> <h3> WebRTC Signaling </h3> <p>wss://${voicechatroom_backend_url}/ws/voice/{roomId}/<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">peerConnection</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">RTCPeerConnection</span><span class="p">({</span> <span class="na">iceServers</span><span class="p">:</span> <span class="p">[</span> <span class="p">{</span> <span class="na">urls</span><span class="p">:</span> <span class="dl">'</span><span class="s1">stun:stun.l.google.com:19302</span><span class="dl">'</span> <span class="p">},</span> <span class="p">{</span> <span class="na">urls</span><span class="p">:</span> <span class="dl">'</span><span class="s1">stun:stun1.l.google.com:19302</span><span class="dl">'</span> <span class="p">}</span> <span class="p">]</span> <span class="p">});</span> </code></pre> </div> <h2> Deployment on Render.com </h2> <h3> Why Render.com? </h3> <p>Render.com was chosen to host the real-time backend due to several key advantages:</p> <ul> <li>✅ <strong>Native WebSocket support</strong> </li> <li>🔐 <strong>HTTPS / WSS secure communications</strong> </li> <li>🚀 <strong>Simple deployment from Git repositories</strong> </li> <li>🔌 <strong>Django Channels compatibility</strong> </li> <li>🧪 <strong>Suitable for testing and validation environments</strong> </li> </ul> <h2> AI Contribution (Cursor AI) </h2> <h3> Main Benefits </h3> <ul> <li>⚡ <strong>Rapid prototyping</strong> (~70% development time saved)</li> <li>🎯 <strong>Code consistency</strong> across the entire project</li> <li>🐛 <strong>Advanced debugging support</strong> (WebRTC, native dependencies, mobile builds)</li> <li>📚 <strong>Accelerated documentation generation</strong> </li> <li>🔄 <strong>Intelligent refactoring</strong> and reduced code duplication</li> <li>✅ <strong>Automated test templates</strong> </li> </ul> <h2> Conclusion </h2> <p>The development of <strong>Wordly</strong> demonstrates that combining:</p> <ul> <li>🏗️ <strong>Modular architecture</strong> </li> <li>🤖 <strong>AI-assisted development</strong> </li> <li>🚀 <strong>Automated deployments</strong> </li> <li>🧪 <strong>Systematic testing</strong> </li> <li>⚙️ <strong>Dynamic configuration</strong> </li> </ul> <p>allows a <strong>solo developer</strong> to deliver a <strong>production-ready application</strong> in a short timeframe without compromising technical quality.</p> <h2> Key Statistics </h2> <ul> <li> <strong>70+</strong> screens</li> <li> <strong>27+</strong> services</li> <li> <strong>50+</strong> API endpoints</li> <li> <strong>12</strong> supported languages</li> <li> <strong>Integrated payments</strong> and <strong>real-time audio</strong> </li> </ul> <h2> Key Takeaways </h2> <blockquote> <p><strong>AI accelerates development but does not replace architectural thinking.</strong></p> <p><strong>A solid architecture enables rapid iteration without technical debt.</strong></p> </blockquote> <h2> Future Enhancements </h2> <ul> <li>🔍 Advanced load testing</li> <li>📡 Observability and distributed tracing</li> <li>📊 Behavioral analytics</li> <li>🔐 Automated security in CI/CD pipelines</li> <li>⚡ Global performance optimization</li> </ul> <p><em>Built with ❤️ using React Native, Flask, Django, and AI.</em></p> react python ai programming