4 Steps to Update the Next.js Marketplace Template

Migrate from WordPress to a headless CMS in 3 easy steps

Introducing Cosmic 2.0

We recently launched the <a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Story Licensing</a> application which uses some of the most powerful development tools available. &nbsp;By offloading the non-core development functionality onto available API services, we were able to build this application faster than I ever could have imagined. &nbsp;I&#39;m excited to share with you how we did it.<h3> TL;DR</h3><a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Check out the live Story Licensing app</a><h3> The Requirements</h3><img src="https://media.giphy.com/media/cALkoAIov3Y9a/giphy.gif" style="width: 100%;" class="fr-fic fr-dib">Every application starts with a goal and requirements. &nbsp;For this application, the goal was to acquire leads interested in purchasing the rights to repost online content from publications in the <a href="http://www.amipublications.com/" rel="noopener noreferrer" target="_blank">AMI Publications</a> network. &nbsp;Our requirements:1. Stories (for our app, stories published on <a href="http://twitter.com/ami">@ami</a> sites) need to be quickly and easily searchable 2. Stories need to indicate a ranking of publicly available social validation (Claps) to the interested lead 3. Ability to capture the lead&#39;s email (before the search action) 4. Ability to capture the bid request data: story title, lead email, search term bid and send an email to the admin 5. Ability to manage copy content by a content manager via a content management system<h3> The Services</h3><img src="https://cosmic-s3.imgix.net/d14ae260-6ce0-11e8-b2d8-b962f2783be9-nextjs-algolia-cosmicjs.jpg" style="width: 100%;" class="fr-fic fr-dib">For this app we knew we didn&#39;t want to build and manage *everything*. &nbsp; Instead, we wanted to offload non-core development to the best available services, only building what we need. &nbsp;Any web project with a time crunch (pretty much every
project) would be well-advised to do this so you don&#39;t unnecessarily reinvent functionality that already exists at a high level. &nbsp;So for this app we decided to use:1. <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> for content management, data storage, this is also where our Medium articles are stored using the <a href="https://cosmicjs.com/apps/medium-backup" rel="noopener noreferrer" target="_blank">Medium Backup Application</a>. 2. <a href="https://algolia.com" rel="noopener noreferrer" target="_blank">Algolia</a> to search stories. &nbsp;It definitely satisfies our speedy search requirement (It&#39;s FAST!) 3. <a href="https://sendgrid.com" rel="noopener noreferrer" target="_blank">SendGrid</a> for sending email notifications 4. <a href="https://twitter.com/ami" rel="noopener noreferrer" target="_blank">@ami</a> for supplying the story librarySo with all of these, we&#39;ve got the best in class services for the respective functionality. And building our application would involve locking these services together.<h3> Building the Search Functionality</h3><img src="https://media.giphy.com/media/c5eqVJN7oNLTq/giphy.gif" class="fr-fic fr-dib" style="width: 100%;">For this app I knew I wanted to use <a href="https://reactjs.org/" rel="noopener noreferrer" target="_blank">React</a> (mainly for personal preference). &nbsp;So in keeping with the &quot;build only what you have to&quot; theme, the natural framework choice for me was <a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">Next.js</a>. &nbsp;Their value proposition is &quot;React Applications Made Simple&quot;. &nbsp;It makes it easy to get a React app up and running without a lot
of boilerplate development while providing for a nice developer experience.To integrate Algolia, I needed to implement the search bar into the React app. &nbsp;Luckily, they&#39;ve got an excellent <a href="https://community.algolia.com/react-instantsearch/" rel="noopener noreferrer" target="_blank">InstantSearch React Component</a>, which allows for easy integration into React apps. &nbsp;Just set your <code>appId</code>, <code>apiKey</code> and <code>indexName</code>. &nbsp;You can find these in your Algolia dashboard.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6cb53eb0-6ce8-11e8-9928-d7068ff63fd8-Screen Shot 2018-06-10 at 2.56.21 PM.png" style="width: 90%;" class="fr-fic fr-dib">Now that I had the search bar implemented, I needed to add records to Algolia. &nbsp;To do this, I needed to add the Cosmic-saved Medium articles into Algolia. &nbsp;I created a script to add Objects from Cosmic into our Algolia search index.Here&#39;s <code>add-records.js</code>:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/326cec4254f2fb0a14504bf561687452' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/326cec4254f2fb0a14504bf561687452" class="embedly-card"></a></div>Next I needed to get claps for stories, because the Medium XML feed for stories (Example: <a href="https://hackernoon.com/feed">https://hackernoon.com/feed</a>) doesn&#39;t include this vital information for our app. &nbsp;So to do this, I needed to create a worker script that could run daily, updating all of our story clap counts.Here&#39;s <code>get-claps.js</code>:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/1b041812c301e1d3c9aef76ecf40ec31' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/1b041812c301e1d3c9aef76ecf40ec31" class="embedly-card"></a></div>This script does the following: Gets all of the saved records in Algolia, hits the <a href="https://twitter.com/ami" rel="noopener noreferrer" target="_blank">@ami</a> story URL, gets the JSON data, parses it for the clap count, and then updates the record in Algolia. &nbsp;This process can run in the background to get and save the latest claps count for each story. &nbsp;This will increase our record actions per day quota in Algolia, increasing our costs, but it&#39;s worth it to get the latest social validation for each story.With the search results coming from Algolia, the search term relevance gets priority, but we can also reorder the stories to show the highest clap count on top:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/884465b0-6da7-11e8-ba26-bd4442701118-story-licensing.gif" style="width: 100%;" class="fr-fic fr-dib"> <h3>Saving the Lead Emails and Bid Requests</h3>Since the goal of this app is to save bid requests for potential customers, we chose SendGrid for a reliable email service provider. &nbsp;I created two endpoints to save the lead email prior to search, and the bid request information after a story had been found.Here&#39;s <code>leads.js</code> and <code>bids.js</code>:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/7aca4425df89ce7cbf7960c4bcde2202' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/7aca4425df89ce7cbf7960c4bcde2202" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/a11e50cd33a6606b422e3960f75281b2' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/a11e50cd33a6606b422e3960f75281b2" class="embedly-card"></a></div>Notice for both of these actions (lead email and bid request), we are also storing the data in Cosmic. &nbsp;This has been done so we can use this data for admin record keeping. &nbsp;Cosmic now has this data available to view, query and deliver
via the Cosmic API into any future applications.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ea2bdfb0-6da7-11e8-ba26-bd4442701118-Screen Shot 2018-06-11 at 1.45.53 PM.png" style="width: 100%;" class="fr-fic fr-dib"><h3>In Conclusion</h3>The finished app is now available to help you find high-quality content from the <a href="http://www.amipublications.com/" rel="noopener noreferrer" target="_blank">AMI Publications</a> network to license to your website or blog. &nbsp;<a href="https://storylicensing.com" rel="noopener noreferrer" target="_blank">Check it out here</a>. &nbsp;<h4> Resources Used</h4><a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic NPM module</a> <a href="https://www.npmjs.com/package/react-instantsearch" rel="noopener noreferrer" target="_blank">Algolia React InstantSearch NPM module</a> <a href="https://www.npmjs.com/package/@sendgrid/mail" rel="noopener noreferrer" target="_blank">SendGrid NPM module</a>I&#39;m happy with the way this project came together. &nbsp; The development was fast thanks to using the best services and developer tools available (Algolia, SendGrid, Next.js and Cosmic) to deliver a fast and scalable application. &nbsp;Let me know your thoughts, <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a> and <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">follow Cosmic on Twitter</a>.

How we built the Story Licensing app using Next.js, Algolia and Cosmic

This is a quick, fully-working example of how to process an uploaded image server-side using <a href="https://www.npmjs.com/package/multer" rel="noopener noreferrer" target="_blank">Multer</a>.Open a terminal and run the following commands:<pre>mkdir test
cd test
npm i cosmicjs multer express
vim index.js
// Add the gist code below to index.js
node index.js</pre>Then if you&#39;re using <a href="https://www.getpostman.com/" rel="noopener noreferrer" target="_blank">Postman</a>. Set this request up to test:POST <a href="http://localhost:5000/upload-keyart"></a>http://localhost:5000/uploadAdd form-data file to the request.Let me know if you have any questions! <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">DM me in Slack</a>, or <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out on Twitter</a>.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/3c0e231857e99e88a6f668e314e69169' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/3c0e231857e99e88a6f668e314e69169" class="embedly-card"></a></div>Photo by <a href="https://unsplash.com/@danielleone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Daniel Leone</a> on <a href="https://unsplash.com/search/photos/mountain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.

Upload Media to Your Cosmic Bucket Using Multer

Thank you to everyone who joined us for our Halloween edition of our Wednesday Webinar series. In this presentation, we teamed up with <a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a> developer advocate <a href="https://twitter.com/jlengstorf" rel="noopener noreferrer" target="_blank">Jason Lengstorf</a> to discuss how to make localization for websites less spooky using Gatsby and Cosmic.The main points discussed are: ✅&nbsp;How to create localized content models in Cosmic ✅&nbsp;How to install the Cosmic <a href="https://github.com/cosmicjs/gatsby-localization-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter</a> ✅&nbsp;How Gatsby builds your localized website for performance and SEO <a href="https://github.com/cosmicjs/gatsby-starter-localization" rel="noreferrer nofollow noopener" target="_blank"></a><iframe width="640" height="360" src="//www.youtube.com/embed/16m3wRFPGAY?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>Also we had a curveball thrown at us about localizing the language selectors. &nbsp;This has now been added to the <a href="https://github.com/cosmicjs/gatsby-localization-starter/blob/master/gatsby-config.js" rel="noopener noreferrer" target="_blank">gatsby-config.js</a> in the Gatsby Localization Starter by adding a <code>localized_name</code> property with different values for each locale:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/d99317cf37f6e316ec5ab3a45e250d7d' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/d99317cf37f6e316ec5ab3a45e250d7d" class="embedly-card"></a></div>

Webinar Video: Localization with Gatsby and Cosmic 🌏

Our digital world is being built on top of API services. And Webhooks are the operators that enable these API services to communicate with each other. Using Cosmic Webhooks to customize your service-to-service communications, you can create some powerful
automated workflows, helping you better communicate with your team and the world.Below are a few practical use-cases for Cosmic Webhooks: Add Webhooks to your Bucket by going to&nbsp;<a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Your Bucket &gt; Settings &gt; Billing &gt; Add-ons</a> <h3>1. Slack: Send notifications to your team</h3> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/274fddc0-c0d6-11e8-9b44-5583ac3a75ef-slack.svg" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"> Slack is a preferred chat tool to help teams stay in constant communication. Cosmic integrates easily with your Slack workspaces, allowing you to send chat notifications whenever content is added, edited, or deleted in your Cosmic Bucket. &nbsp;This
is great for when you would like to maintain a channel to log all content edits in between mocking co-workers with gifs.<a href="https://slack.com/oauth/authorize?&client_id=11020550018.203122635188&scope=incoming-webhook" rel="noopener noreferrer" target="_blank">Add Slack to your Cosmic Bucket &raquo;</a> <h3>2. Netlify: Build your website automatically</h3> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4a604e80-c0d6-11e8-9b44-5583ac3a75ef-netlify.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"> <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> is a web hosting provider for your modern web projects that allows for some amazing automation capabilities. One of these nice automated capabilities is the ability to trigger automatic builds. Connecting your Cosmic Bucket to Netlify is a cinch, allowing you to rebuild your Netlify-hosted web project automagically whenever content is edited in your Cosmic Bucket. Follow the link below to learn exactly how to do this:<a href="https://cosmicjs.com/articles/netlify-gatsby-cosmic-js-automatic-builds-with-webhooks-ji3fhda9" rel="noopener noreferrer" target="_blank">Add the Netlify build hook to your Cosmic Bucket &raquo;</a> <h3>3. SendGrid: Send email notifications to your team</h3> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/549f4ae0-c0d6-11e8-9b44-5583ac3a75ef-sendgrid.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"> We recently released <a href="https://cosmicjs.com/docs/functions" rel="noopener noreferrer" target="_blank">Cosmic Functions</a> to help developers deploy code quickly and easily. A clear use-case for quickly deployed endpoints via Cosmic Functions is to use them for Webhook endpoints. Check out the <a href="https://github.com/cosmicjs/webhook-email-function" rel="noopener noreferrer" target="_blank">Webhook SendGrid Email Function</a> that enables you to send an email whenever content is added, edited, or deleted in your Cosmic Bucket. This is great for when your micro-managing content editor absolutely must read every draft from the comfort of their email inbox.<a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Go to Your Bucket &gt; Settings &gt; Functions to add the Send Email Webhook &raquo;</a> <h3>BONUS: Zapier Integrations</h3> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/67005710-c0d6-11e8-9b44-5583ac3a75ef-zapier-logo.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"> <a href="https://zapier.com/" rel="noopener noreferrer" target="_blank">Zapier</a> may be the undisputed king of webhooks. Their ecosystem of thousands of apps that communicate with each other allow you to create some powerful integrations. Use the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier App</a> (currently invite only 😉) to connect your Cosmic Bucket to any number of services including Google&#39;s Product Suite, Salesforce, Facebook, Twitter, and more.<a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Connect thousands of services to your Cosmic Bucket &raquo;</a><h3> </h3><h3>Conclusion</h3>Our digital world is powered by API services. &nbsp;Cosmic Webhooks connects your Bucket to the world of API services allowing your team to automate communications to help you build better products together.&nbsp;Let me know if you have any questions or comments about Cosmic Webhooks. <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our Slack community</a>.

3 Simple, but Powerful, Automation Webhooks

We recently released <a href="https://cosmicjs.com/docs/functions" rel="noopener noreferrer" target="_blank">Cosmic Functions</a> (public beta). We&#39;re excited to help teams build amazing modern products together with new serverless solutions.In this short tutorial, I&#39;m going to show you how to get up and running with the <a href="https://github.com/cosmicjs/send-email-function" rel="noopener noreferrer" target="_blank">SendGrid Email Function</a> to send emails via SendGrid (to view more example functions login and go to Your Bucket &gt; Settings &gt; Functions).<h3>Deploying the Function</h3>1. Install the function To install the SendGrid function, go to Your Bucket &gt; Settings &gt; Functions, find the SendGrid function, and click &quot;Install Function&quot;.2. Add keys, and deploy After you install the function, you will be redirected to a page to add your AWS credentials and environment variables. Follow the steps to add your AWS creds (if you don&#39;t have them handy).Go to your SendGrid account and find your API Secret Key located in <a href="https://app.sendgrid.com/settings/api_keys" rel="noopener noreferrer" target="_blank">Settings &gt; API Keys</a> (you may need to create a new one) and add this as the value to SENDGRID_API_KEY.Once you have your keys added, click &quot;Deploy Function&quot; and in a minute your function will be deployed and ready for requests.<h3>Code a Web Contact Form</h3>Next, let&#39;s create a contact form to access the newly deployed endpoint. Follow these steps to install the <a href="https://cosmicjs.com/getting-started#quickstart" rel="noopener noreferrer" target="_blank">React Starter</a>:<pre>npm i -g cosmic-cli
cosmic init react-starter
cosmic develop</pre>Now go to your app codebase and go to the default page component located in <code>pages/default.js</code> and edit it to look like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/9d3947dd3db31885914d12e894a3bff1#file-default-js' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/9d3947dd3db31885914d12e894a3bff1#file-default-js" class="embedly-card"></a></div>Notice a couple things here:1. We&#39;ve added a <code>form</code> element to take the input for email, first name, and last name. 2. We&#39;ve added the <code>handleSubmit</code> method to handle the form submission which takes the values of the form and sends the data to our Cosmic Function endpoint.And that&#39;s it! We&#39;ve now got an endpoint that receives the data from our form and sends it to the SendGrid API for processing.<h3>Benefits</h3>Less Code We didn&#39;t have to worry about building an API endpoint in our app to send the data to SendGrid.Less Config Hassles We don&#39;t have to worry about config hassles like possibly leaking secret keys client-side. We don&#39;t have to share API keys with anyone else, just the endpoint. Config is handled in the Cosmic Function as an Environment Variable.Reusable We can use this endpoint in any other app that needs to send an email.I hope you enjoyed this quick tour of the SendGrid Function, now ready for installation and deployment (go to Your Bucket &gt; Settings &gt; Functions). Let me know if you have any questions or comments. <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our Slack community</a>.

Sending Emails with the SendGrid Function

A common approach to website development is to build components that can be reused across different web pages. The benefit to this approach is that you end up doing less duplicate work by managing the components rather than managing duplicate content
across different pages. &nbsp;Popular JavaScript frameworks like React, Vue and Angular utilize this concept on the application code level to much success. &nbsp;How can we benefit from this approach on the content management level?In this tutorial I&#39;m going to show you how to build a component-based website using React and the Cosmic CMS. The goal is to save developers and content managers time and provide a scalable content model.<h3> Build the Content Model</h3>* Prereqs: This article assumes you have an understanding of Cosmic concepts: Object Types, Objects and Metafields. &nbsp;If you need to brush up on these concepts, go to the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Getting Started guide</a>.Using Cosmic Object Types and Metafields, we can create composable components that can be used across website pages. &nbsp;For our example we will create three Object Types:1. Pages 2. Sections (components used in Pages) 3. Team Members (used in the Team Section)Let&#39;s look at each Object Type:<h4> </h4><h4>Pages</h4>All Pages will include the following: 1. Title (Text) 2. Content (HTML Textarea) 3. Sections (Multiple Objects Relationship Metafield)The Multiple Objects Relationship Metafield will be used to manage the Page Sections.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/22e80ef0-89f0-11e8-bc83-f9172b473721-Screen Shot 2018-07-17 at 1.34.49 PM.png" style="width: 300px;" class="fr-fic fr-dib fr-fil"><h4> </h4><h4>Team Members</h4>Metafields: 1. Name (Text Metafield) 2. Image (File Metafield) 3. Quote (Plain Textarea Metafield) <h4>Sections</h4>The Sections Object Type will be more dynamic and allow for different Metafields.Team SectionMetafields: 1. Headline 2. Multiple Object Relationship Metafield (Team) - Name - Image - QuoteAdd your team members:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/63cb1af0-8a97-11e8-9c55-e31a389591ba-team-gif.gif" style="width: 100%;" class="fr-fic fr-dib">Signup SectionMetafields: 1. Headline (Text Metafield) 2. Image (File Metafield) 3. Content (HTML Metafield) 4. CTA (Text Metafield) Add Sections to Pages Now that we have our Sections set up, we can add them to our Pages:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/8b6d21c0-8a97-11e8-9c55-e31a389591ba-sections-gif.gif" style="width: 100%;" class="fr-fic fr-dib"><h3> Code it up</h3>Now that we have our content saved, let&#39;s do some coding. Download the <a href="https://github.com/cosmicjs/react-starter" rel="noopener noreferrer" target="_blank">React starter</a>:<pre class=" language-bash"><code class=" language-bash">git clone https://github.com/cosmicjs/react-starter</code></pre>Now go into the Page component and edit it to look like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/67376ea64c4ecff6faba35cc4f7ee8ad#file-page-sections-js' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/67376ea64c4ecff6faba35cc4f7ee8ad#file-page-sections-js" class="embedly-card"></a></div>As you can see, we&#39;ve added Section List on our Page Object. Our Section List and Section components looks like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/fa68ae9484899ce0ae7e8228528fdda5#file-section-js' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/fa68ae9484899ce0ae7e8228528fdda5#file-section-js" class="embedly-card"></a></div>Output of the Section component is determined by the data passed via the <code>section</code> prop.<h3> In Conclusion</h3>The Cosmic CMS is a great solution for building component-based websites. &nbsp;In our example, we created a Page Object with a Multiple Object Metafield connected to a Sections Object Type to add our Section components. The benefit to this approach is that we can now manage the section content in one place and reuse it across pages without having to go into each page to edit duplicate data.I hope you found this useful. If you have any further questions, <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our community on Slack</a> and reach out to us on Twitter.Photo by <a href="https://unsplash.com/photos/ZHVy20iPb7E?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Lance Anderson</a> on <a href="https://unsplash.com/collections/1063303/bg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Blogs by Tony Spiro

Start building today

Blogs by Tony Spiro

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today