The latest articles on DEV Community by Aryan Sarvaiya (@aryan_sarvaiya_fc3b81c8cb). https://dev.to/aryan_sarvaiya_fc3b81c8cb 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%2F3352815%2Ffeddcce5-7c7b-49aa-ae8b-f87a39bad902.jpg https://dev.to/aryan_sarvaiya_fc3b81c8cb en Aryan Sarvaiya Tue, 15 Jul 2025 06:48:39 +0000 https://dev.to/aryan_sarvaiya_fc3b81c8cb/traderos-3d9d https://dev.to/aryan_sarvaiya_fc3b81c8cb/traderos-3d9d <p><em>This is a submission for <a href="https://dev.to/challenges/frontend/axero">Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space</a></em></p> <h2> What I Built </h2> <p>I built <strong>Trader’s Academy</strong>, a fictional intranet homepage designed for a modern financial firm to onboard, educate, and empower new traders. The goal was to blend structured learning with interactive tools and real-time insights — all styled in a professional yet inviting layout.</p> <p><strong>Key Features:</strong></p> <ul> <li>🧠 Daily quiz card to reinforce trading knowledge </li> <li>📊 Learning progress tracker with core modules </li> <li>📚 Expandable glossary and knowledge base </li> <li>📈 Market snapshot widget (mock data updates) </li> <li>🧮 Built-in calculators (position size, risk:reward) </li> <li>🎯 Events timeline for upcoming team sessions </li> <li>🧘 Wellness corner with break timers and motivation </li> <li>👤 Mentor spotlight &amp; community Q&amp;A </li> <li>🌗 Dark mode toggle with saved preference</li> </ul> <p>The entire project is built using only <strong>HTML, CSS, and JavaScript</strong>, with no frameworks or backend. It simulates an internal dashboard experience traders might use daily, tailored for accessibility and interactivity.</p> <h2> Demo </h2> <p>🔗 <strong>Live Preview</strong>: <a href="https://traderos.netlify.app/" rel="noopener noreferrer">TradeOS Demo</a><br> 💻 <strong>Source Code</strong>: GitHub Repository <em>(optional)</em><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="c">&lt;!-- You can also embed your CodePen using iframe --&gt;</span> <span class="nt">&lt;iframe</span> <span class="na">height=</span><span class="s">"600"</span> <span class="na">style=</span><span class="s">"width: 100%;"</span> <span class="na">scrolling=</span><span class="s">"no"</span> <span class="na">title=</span><span class="s">"Trader’s Academy"</span> <span class="na">src=</span><span class="s">"https://codepen.io/YOUR_USERNAME/embed/preview/PROJECT_ID"</span> <span class="na">frameborder=</span><span class="s">"no"</span> <span class="na">loading=</span><span class="s">"lazy"</span> <span class="na">allowtransparency=</span><span class="s">"true"</span> <span class="na">allowfullscreen=</span><span class="s">"true"</span><span class="nt">&gt;</span> <span class="nt">&lt;/iframe&gt;</span> </code></pre> </div> <h2> Journey </h2> <p>This project helped me explore how to simulate real-time UX without relying on external APIs or frameworks. I focused on:</p> <p>Creating modular components with CSS and JS only</p> <p>Handling user input and interactivity with plain JavaScript</p> <p>Structuring a dashboard layout that's clean, responsive, and professional</p> <p>Designing with empathy for new traders and office culture alike</p> <p>I particularly enjoyed building the quiz logic and dynamic glossary filter. It was also a fun challenge to design the layout around the "learning meets live trading" experience.</p> <p>This challenge helped me grow in:</p> <p>UX thinking for dashboards</p> <p>JavaScript DOM manipulation and localStorage</p> <p>Creating a workplace-themed UI that still feels engaging</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%2Fdspsh88pk0m0bbn4q5o3.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%2Fdspsh88pk0m0bbn4q5o3.png" alt=" " width="800" height="382"></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%2Fqfxrbjtc6b1velrbbusp.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%2Fqfxrbjtc6b1velrbbusp.png" alt=" " width="800" height="381"></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%2F9u0c44oxeinjqhojlpj1.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%2F9u0c44oxeinjqhojlpj1.png" alt=" " width="800" height="382"></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%2Fi9mnaty1eymf1mpcm0j7.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%2Fi9mnaty1eymf1mpcm0j7.png" alt=" " width="800" height="381"></a></p> devchallenge frontendchallenge css javascript