The latest articles on Forem by Audun Hilden (@audn). https://forem.com/audn 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%2F632600%2Ff1cf0ccf-c8a2-45a1-99e2-8fc580f0d8e6.png https://forem.com/audn en Audun Hilden Mon, 17 May 2021 07:03:32 +0000 https://forem.com/audn/frontend-boilerplate-with-react-next-js-tailwindcss-4l9l https://forem.com/audn/frontend-boilerplate-with-react-next-js-tailwindcss-4l9l <p>Introducing the one-in-all boilerplate for your next project!</p> <p>I've spent the entire week structuring this repo to make it super-insanely-easy to deal with modals, forms (ugh), and tons of other small breakpoints!</p> <p><strong>Live demo</strong> <br> <a href="http://align-items.center/" rel="noopener noreferrer">http://align-items.center/</a></p> <p>Modal as seen on the page<br> <a href="https://media.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%2F03aujl9z1jf0unzr131m.png" class="article-body-image-wrapper"><img src="https://media.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%2F03aujl9z1jf0unzr131m.png" alt="Modal"></a></p> <p>Code for the modal above<br> <a href="https://media.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%2F69903hl22m6mhbndhksr.png" class="article-body-image-wrapper"><img src="https://media.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%2F69903hl22m6mhbndhksr.png" alt="Modal on image above"></a></p> <p>Forms<br> <a href="https://media.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%2F46aj8as6md7noe260uw7.png" class="article-body-image-wrapper"><img src="https://media.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%2F46aj8as6md7noe260uw7.png" alt="Forms"></a></p> <p>Code for the image above<br> <a href="https://media.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%2Farrzj2cz49d9ivdrdm1j.png" class="article-body-image-wrapper"><img src="https://media.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%2Farrzj2cz49d9ivdrdm1j.png" alt="Code for forms"></a></p> <p><strong>GitHub Repo</strong><br> <a href="https://github.com/audn/frontend-boilerplate" rel="noopener noreferrer">https://github.com/audn/frontend-boilerplate</a></p> <p><strong>If you're using it, I'd appreciate if you left a Star for your followers to see it in their feed!</strong></p> <p>What you can expect:</p> <ul> <li>Framer motion</li> <li>Google Analytics setup</li> <li>Responsive at all sizes + hamburger </li> <li>Typescript interfaces</li> <li>Regex for regular stuff such as url/emails</li> <li>Modal component</li> <li>Premade Button components <code>&lt;Button.Primary title={..}/</code> </li> <li>Premade for normal inputs, textarea &amp; checkboxes</li> <li>SEO optimization built into the <code>&lt;Layout&gt;</code> component</li> <li>Cookies! </li> </ul> react nextjs tailwindcss frontend