The latest articles on DEV Community by Andreo Costa (@andreocosta2). https://dev.to/andreocosta2 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%2F568122%2F579b7fbd-9947-474f-b121-ee4db6611c01.jpg https://dev.to/andreocosta2 en Andreo Costa Wed, 24 Mar 2021 15:37:00 +0000 https://dev.to/andreocosta2/vue-3-portfolio-template-54o0 https://dev.to/andreocosta2/vue-3-portfolio-template-54o0 <p><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%2Flhtfs0weatt19h74w7l6.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%2Flhtfs0weatt19h74w7l6.png" alt="Alt Text"></a></p> <h1> Vue 3 Portfolio Template </h1> <p>It's a Vue 3 (composition-api) project ready to be use and modified thanks to BootstrapMade for the Portfolio HTML Template.</p> <p>Get the original HTML <code>iPortfolio - Bootstrap Portfolio Websites Template</code> from BootstrapMade </p> <p><a href="https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/" rel="noopener noreferrer">Download</a>.</p> <h2> What is this? </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>It has the same look and feel but it's converted to VUE 3 and PWA Support. </code></pre> </div> <h2> Demo </h2> <p><a href="https://vcodes-portfolio.surge.sh" rel="noopener noreferrer">View demo</a>.</p> <h2> Project setup </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>yarn install or npm install </code></pre> </div> <h3> Compiles and hot-reloads for development </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>yarn serve or npm run serve </code></pre> </div> <h3> Compiles and minifies for production </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>yarn build or npm run build </code></pre> </div> <h3> Customize configuration </h3> <p>See <a href="https://cli.vuejs.org/config/" rel="noopener noreferrer">Configuration Reference</a>.</p> vue javascript template tutorial Andreo Costa Wed, 27 Jan 2021 04:02:56 +0000 https://dev.to/andreocosta2/making-an-airbnb-clone-in-vue3-desktop-mobile-pwa-admin-backend-5aaa https://dev.to/andreocosta2/making-an-airbnb-clone-in-vue3-desktop-mobile-pwa-admin-backend-5aaa <p>I think I just finished the Airbnb clone that I worked for over 4 months. My back is hurting, unshaved, eyes hurt, I can barely watch TV.<br> I had to make a desktop version and mobile version as well. Bonus, an installable PWA for both desktop and mobile.<br> And a backend for api ..</p> <p><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%2Fi%2Ftombicbh6vtq08do5phz.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%2Fi%2Ftombicbh6vtq08do5phz.png" alt="Alt Text"></a><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%2Fi%2Ftirjzc5h20cnksev43z0.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%2Fi%2Ftirjzc5h20cnksev43z0.png" alt="Alt Text"></a><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%2Fi%2Fdockdrmrhaojnh15eqfl.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%2Fi%2Fdockdrmrhaojnh15eqfl.png" alt="Alt Text"></a><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%2Fi%2Fbcltp9zxjq794q0mabhg.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%2Fi%2Fbcltp9zxjq794q0mabhg.png" alt="Alt Text"></a><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%2Fi%2Fl6gyv4vvu2fu2c6pt7tx.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%2Fi%2Fl6gyv4vvu2fu2c6pt7tx.png" alt="Alt Text"></a><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%2Fi%2Fh9110x0atwq5zesi16ev.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%2Fi%2Fh9110x0atwq5zesi16ev.png" alt="Alt Text"></a><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%2Fi%2Fy2zfjv5fx34trykn1udz.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%2Fi%2Fy2zfjv5fx34trykn1udz.png" alt="Alt Text"></a><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%2Fi%2F3yk7e0tvkf13qpk03dwj.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%2Fi%2F3yk7e0tvkf13qpk03dwj.png" alt="Alt Text"></a><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%2Fi%2Fwajnslxcvr30bdxmg6wm.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%2Fi%2Fwajnslxcvr30bdxmg6wm.png" alt="Alt Text"></a><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%2Fi%2Fiqg7gixnr84qnr1frcuu.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%2Fi%2Fiqg7gixnr84qnr1frcuu.png" alt="Alt Text"></a></p> <p>Project is huuuge! remember; just one person as a hobby.<br> So; the project is written in Vue 3 with composition API, all the new stuff, all the bells and whistles.<br> Let me know what you think …</p> <p><strong>Demo client-side</strong> <a href="https://airbnb-cloudcdn.surge.sh/rooms/23049796" rel="noopener noreferrer">https://airbnb-cloudcdn.surge.sh/rooms/23049796</a></p> <p>Not working if you use proxy vpn etc..</p> <p><strong>Animated GIF Screenshot</strong> <a href="https://dev-to-uploads.s3.amazonaws.com/i/lhs207ewg4tin3l7tuxk.gif" rel="noopener noreferrer">https://dev-to-uploads.s3.amazonaws.com/i/lhs207ewg4tin3l7tuxk.gif</a></p> <p><strong>Demo mobile</strong><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%2Fi%2Fg4dubq50l57qycj1lei7.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%2Fi%2Fg4dubq50l57qycj1lei7.png" alt="Alt Text"></a><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%2Fi%2Fsrmws88r9p5ijy6bgkjn.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%2Fi%2Fsrmws88r9p5ijy6bgkjn.png" alt="Alt Text"></a><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%2Fi%2Fi861iy3ef0zi2zzc4st2.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%2Fi%2Fi861iy3ef0zi2zzc4st2.png" alt="Alt Text"></a><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%2Fi%2Fjubfxxmgwz3x0eyxriej.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%2Fi%2Fjubfxxmgwz3x0eyxriej.png" alt="Alt Text"></a><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%2Fi%2Fnjm5fmeya0l646zjpzci.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%2Fi%2Fnjm5fmeya0l646zjpzci.png" alt="Alt Text"></a><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%2Fi%2Fdjfove5wkw7jjynrmt6g.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%2Fi%2Fdjfove5wkw7jjynrmt6g.png" alt="Alt Text"></a><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%2Fi%2Fs00ng33mmvn4uje3anqg.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%2Fi%2Fs00ng33mmvn4uje3anqg.png" alt="Alt Text"></a><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%2Fi%2Fgr7rdk6y36he25dxqfk7.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%2Fi%2Fgr7rdk6y36he25dxqfk7.png" alt="Alt Text"></a><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%2Fi%2F04ukiybe0lbbm76nmcvk.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%2Fi%2F04ukiybe0lbbm76nmcvk.png" alt="Alt Text"></a><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%2Fi%2Fe3js32187aw2zm04bxra.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%2Fi%2Fe3js32187aw2zm04bxra.png" alt="Alt Text"></a></p> vue javascript angular react