The latest articles on DEV Community by Nour-Yahyaoui (@nouryahyaoui). https://dev.to/nouryahyaoui 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%2F3837874%2Fc3141560-610b-4ecc-9cf2-02d09c6c4cac.png https://dev.to/nouryahyaoui en Nour-Yahyaoui Thu, 26 Mar 2026 23:45:51 +0000 https://dev.to/nouryahyaoui/grafspee-build-faster-with-60-components-kn0 https://dev.to/nouryahyaoui/grafspee-build-faster-with-60-components-kn0 <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%2F3njmeus15mysbijpunt2.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%2F3njmeus15mysbijpunt2.png" alt=" " width="800" height="367"></a></p> <p>A complete UI toolkit with live examples, code snippets, and production-ready components. Perfect for building modern web applications.</p> <p>60+ production-ready React/Next.js components with TypeScript. Copy-paste, customize, and build faster. Includes live examples and code snippets.<br> created by Nour yahyaoui<br> <a href="https://github.com/Nour-yahyaoui/grafspee" rel="noopener noreferrer">visit repo: https://github.com/Nour-yahyaoui/grafspee</a><br> <a href="https://grafspee.vercel.app/" rel="noopener noreferrer">visit demo: https://grafspee.vercel.app/</a></p> nextjs react showdev ui Nour-Yahyaoui Sun, 22 Mar 2026 03:37:19 +0000 https://dev.to/nouryahyaoui/devdash-all-in-one-developer-toolkit-for-html-css-javascript-and-react-4262 https://dev.to/nouryahyaoui/devdash-all-in-one-developer-toolkit-for-html-css-javascript-and-react-4262 <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%2F37nh8wka55shorj4j3vq.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%2F37nh8wka55shorj4j3vq.png" alt=" " width="800" height="375"></a></p> <h2> What is DevDash? </h2> <p>DevDash is a curated platform built for developers who want to learn faster and build better. It combines courses, interactive tools, and ready-to-use code into one seamless experience.</p> <p><strong>Live Demo:</strong> <a href="https://devdash-ten.vercel.app/dashboard" rel="noopener noreferrer">devdash-ten.vercel.app/dashboard</a></p> <h2> 📚 What's Inside </h2> <h3> 🎓 Courses </h3> <ul> <li>HTML &amp; CSS fundamentals</li> <li>JavaScript</li> <li>TailwindCSS</li> <li>React Icons</li> </ul> <h3> 🛠️ Interactive Tools </h3> <ul> <li> <strong>HTML/CSS Code Playground</strong> – experiment with code in real-time</li> <li> <strong>AI Prompt Guide</strong> – write better prompts for development tasks</li> </ul> <h3> ⚡ Ready-to-Use Components </h3> <ul> <li>Pre-built, reusable components</li> <li>Ready-to-use buttons with various styles</li> <li>Copy-paste friendly code snippets</li> </ul> <h3> 🎨 Resources </h3> <ul> <li>Icon names reference for React Icons</li> <li>UI component inspiration</li> </ul> <h2> 🛠️ Tech Stack </h2> <ul> <li> <strong>Next.js 16</strong> – App Router, server components</li> <li> <strong>TypeScript</strong> – type safety</li> <li> <strong>TailwindCSS</strong> – utility-first styling</li> <li> <strong>Framer Motion</strong> – smooth animations</li> </ul> <h2> Why I Built This </h2> <p>As a developer, I often found myself jumping between multiple tabs – one for documentation, one for code playgrounds, one for component inspiration. DevDash brings everything together in one place.</p> <h2> 🔗 Links </h2> <p><strong>GitHub Repository:</strong> <a href="https://github.com/nour-yahyaoui/devdash-online-tools" rel="noopener noreferrer">github.com/nour-yahyaoui/devdash-online-tools</a></p> <p>If you find this useful, please ⭐ star the repo – it helps others discover the project!</p> <h2> 🚀 What's Next? </h2> <p>I'm planning to add:</p> <ul> <li>More interactive playgrounds</li> <li>Additional component libraries</li> <li>Dark mode (if not already implemented)</li> </ul> <h2> 💬 Let's Connect </h2> <p>Drop a comment with your feedback or suggestions. What tools would you add to a developer dashboard?</p> webdev productivity programming react