Article published on Strapi's blog:

https://strapi.io/blog/how-to-build-a-crud-app-with-react-and-a-headless-cms

https://images.ctfassets.net/mvkmiycntf3t/19nkwkqEyVGeMIip1XVJGT/2d7ed5bcbd9a65355ee55bee750ac68f/Snipcart_Strapi_7_5b10bec6d6.png

Learn how to create a Pet Adoption CRUD application using Strapi headless CMS for the backend, and React with Redux for the frontend.

How to Build a CRUD App with React and a Headless CMS

### Short:

Facundo is the Solutions Engineering Team Manager at Storyblok. From Buenos Aires, Argentina, he has more than 15 years of experience in software and web development. He loves engaging with the dev community, speaking at events and conferences, and creating and sharing content. He is one of the organizers of React Buenos Aires, the biggest React community in Argentina. He also organizes DevSummit AR, a Dev community in Argentina. He has been selected as Prisma Ambassador, Auth0 Ambassador, and Cloudinary Media Developer Expert.

### Medium:

Among the different things that Facundo enjoys, some of them are meeting and connecting with other people, web development, and talking a lot. After more than 15 years working as a developer, creating products and projects for different organizations and clients, he thought it would be great to combine those three interests in some way. In his search of ways to handle that, he discovered the world of Developer Relations. 
Nowadays, Facundo works as a Solutions Engineering Team Manager at Storyblok, and he spends his time engaging with the dev community, speaking at events and conferences, creating and sharing content, writing articles for different websites and platforms, leading workshops, and talking (of course). He is one of the organizers of React Buenos Aires, the biggest React community in Argentina. He also organizes DevSummit AR, a Dev community in Argentina. He has been selected Prisma Ambassador, Auth0 Ambassador, and Cloudinary Media Developer Expert. 

### Long:

Hello! I'm Facundo from Buenos Aires, Argentina.

At the age of 8, I got my first personal computer, a gift from my father: An old 386 PC. I started playing around with MS-DOS, Windows 3.11, and really old games. The first time I formatted my computer and re-installed all the apps, I felt like a hacker.

Later, in high school, I studied informatics and graduated as an informatics technician. That was my first approach to software development. I started learning how to code, using Visual Basic 6. I put this knowledge into practice when I got together with some friends to create games and apps. In our senior year, we developed an accounting system that was used by a small factory in our neighborhood. In the meantime, I spent my time doing other things that I still love doing: Listening to music, meeting new people, going to concerts, attending football matches, and discussing about movies and TV shows.

It was at that same time that I had my first experience with web development. I created very simple and ugly websites using tools like Microsoft FrontPage or Macromedia Flash. I created websites with articles, pictures, and even background music (ugh). In order to learn more and experiment with HTML and CSS, I created websites for everything: My group of friends, local rock bands, sports tournaments, etc.

I started studying at university when I was 18. That was when I got my first real job: Software Developer in a consulting company. I started working with Visual Basic 6 and MS-SQL Server. A couple of years later I learned C# and started using .NET Framework. 

By that time, a friend and I created a tech forum. It was a cool place to discuss different topics, answer questions, or share updates related to technology in general. I met some cool people thanks to that community.

During my later years, I worked for several clients and companies: Agencies, software factories, exchange offices, electricity distributors, insurance companies, assistance companies, financial investments firms, etc. I learned a lot, I worked a lot and I improved a lot as a professional.

As side-projects, I contributed to a couple of tech blogs, writing and sharing news about applications, websites, and the internet in general.

As software and web development aren't everything to me, I also enjoyed doing other activities: I played the bass guitar, learned French, started a personal blog with short stories, etc. I also participated in different radio shows, on both AM and online radio stations.

In December 2011 I graduated from the National Technological University of Argentina (Universidad Tecnológica Nacional) as a Systems Engineer. I haven't stopped there and I continue challenging myself and learning every day.

After going through several jobs and experiences as a developer, for more than 12 years, I started to feel that I wanted to mix my development experience with some of the other things that I also love doing: Meeting and engaging with other people, writing, creating things, and talking (a lot). In this search for ways to handle this idea, I discovered the world of Developer Relations. I met some great DevRel engineers, developer advocates, and other community members that helped me to learn about this "area" of the technology organizations, and the different tasks that a DevRel position involves. And all the dots started to connect.

I am now a remote Solutions Engineering Team Manager at Storyblok. This job position makes me enjoy my everyday work, learn a lot of new things, and face new challenges. All of this helps me grow as a professional and as a person.

I am also one of the organizers of React Buenos Aires Meetup, the biggest React community in Argentina. We organize monthly events in different spots of Buenos Aires, where we enjoy sharing interesting talks from the community and networking with people from different backgrounds.

I also organize DevSummit AR, a Dev community from Argentina where people interested in different tech topics can engange and share knowledge and experiences in different in-person and online initiatives.

I'm an optimistic, enthusiastic, and hard-working person waiting to see what the future holds for my career.

About Me

## Upcoming Talks

No upcoming talks at the moment.

## Past Talks

2024-04-19 - [Pushing boundaries to the edge](https://www.reactmiami.com/) 🇬🇧    
React Miami 2024 (Miami, USA 🇺🇸)

2023-12-12 - [Pushing boundaries to the edge](https://reactday.berlin/) 🇬🇧    
React Day Berlin 2023 (Online)

2023-11-15 - [Pushing boundaries to the edge](https://reactsummit.us/) 🇬🇧    
React Summit US 2023 (Online)

2023-09-29 - [Pushing boundaries to the edge](https://www.youtube.com/watch?v=UGjOU4P2xnE) ([Video](https://www.youtube.com/watch?v=UGjOU4P2xnE)) ([Slides](https://docs.google.com/presentation/d/1rVSf5bMARFIFPHeliL1y0at-dJexvQVFWPjkbCsqYN8/)) 🇬🇧    
React Alicante 2023 (Alicante, Spain 🇪🇸)

2023-06-06 - [Pushing boundaries to the edge](https://reactsummit.com/) 🇬🇧    
React Summit 2023 (Online)

2023-05-30 - [Full Stack Composable Architecture](https://youtu.be/A3Vd4BeVno8?si=mAcjZ4Q4vxYBG2sO&t=68) ([Video](https://youtu.be/A3Vd4BeVno8?si=mAcjZ4Q4vxYBG2sO&t=68)) ([Slides](https://docs.google.com/presentation/d/1yapxlX_uQQO_yPl91HPw3eHt_nZwUgDF-XB8kVhuniw/edit?usp=sharing)) 🇬🇧    
CityJS Athens 2023 (Athens, Greece 🇬🇷)

2023-05-29 - [Go headless and international with Remix and Storyblok](https://greece.cityjsconf.org/) ([Slides](https://docs.google.com/presentation/d/1aerorjaLxrAXJrJKqGjJ-63L4CRWfRAUKOWuedbw_QU/edit?usp=sharing)) 🇬🇧    
CityJS Athens 2023 (Athens, Greece 🇬🇷)

2023-05-10 - [Your Personal Remix](https://www.youtube.com/watch?v=qc7y5C-pjtE) ([Video](https://www.youtube.com/watch?v=qc7y5C-pjtE)) ([Slides](https://docs.google.com/presentation/d/186gK1YXnojW2ddpqfICKcqsZfk0p-nzGPB2ruSs-lfY/)) 🇬🇧    
Remix Conf 2023 (Online)

2023-04-20 - [Personalization: The Art of Offering Custom Experiences
](https://www.youtube.com/watch?v=OfL9mEl3woQ) ([Video](https://www.youtube.com/watch?v=OfL9mEl3woQ)) ([Slides](https://docs.google.com/presentation/d/1nBvssSUedTwXuZOr2dn3hRuxUZJ9v0FhZF00ooYgPZs/)) 🇬🇧    
React Miami 2023 (Miami, USA 🇺🇸)

2022-10-19 - [Como crear contenido y verlo "sin cabeza"](https://www.youtube.com/live/TAE91PepUTE?feature=share&t=2485) ([Video](https://www.youtube.com/live/TAE91PepUTE?feature=share&t=2485)) 🇪🇸     
React Buenos Aires Meetup (Buenos Aires, Argentina 🇦🇷)

2022-11-18 - [Your Personal Remix](https://www.youtube.com/watch?v=jSu5JSKxPKc) ([Video](https://www.youtube.com/watch?v=jSu5JSKxPKc))  ([Slides](https://docs.google.com/presentation/d/1TeMgBfBLDM5r0AVPKyMxo5smC4RwBW7xi4rV1xKwBIs/)) 🇬🇧     
Remix Conf Europe

2022-11-17 - [Don't take it personally, it is personalization](https://www.modernfrontends.live/) ([Slides](https://docs.google.com/presentation/d/1aRsqTU3yXfqHPNPP24x1EP6kJwtU3Jz7SxiIuHDgJiA/)) 🇬🇧     
Modern Frontends Live (London, England 🇬🇧)

2022-11-08 - [Don't take it personally, it is personalization](https://jamstack.org/conf/) ([Slides](https://docs.google.com/presentation/d/1aRsqTU3yXfqHPNPP24x1EP6kJwtU3Jz7SxiIuHDgJiA/)) 🇬🇧     
Jamstack Conf 2022 (San Francisco, USA 🇺🇸)

2022-10-19 - [Incremental Static Regeneration: Static sites on steroids](https://www.youtube.com/watch?v=3JB2QJRiEGg) ([Video](https://www.youtube.com/watch?v=3JB2QJRiEGg)) ([Slides](https://docs.google.com/presentation/d/1ZUej5jpxzwLWk5nY8iCSwQfbO2Iv2Gifc6YuSkNUOVs/)) 🇪🇸     
Nerdearla 2022 (Buenos Aires, Argentina 🇦🇷)

2022-10-01 - [Incremental Static Regeneration: Static sites on steroids](https://www.youtube.com/watch?v=Y0t8bQ25-Bk) ([Video](https://www.youtube.com/watch?v=Y0t8bQ25-Bk)) ([Slides](https://docs.google.com/presentation/d/15Kn-cndnHwO8PmdgqvNoMuGigD8AvXbdCGUIy8Rbn0Y/edit?usp=sharing)) 🇬🇧     
React Alicante 2022 (Alicante, Spain 🇪🇸)

2022-09-29 - [Workshop: Crash Course into the Jamstack with Next.js & Storyblok](https://reactalicante.es/) 🇬🇧     
React Alicante (Alicante, Spain 🇪🇸)

2022-08-10 - [Workshop: Crash Course into the Jamstack with Next.js & Storyblok](https://www.kcdc.info/) 🇬🇧     
Kansas City Developer Conference (Kansas City, USA 🇺🇸)

2022-07-28 - [How to View and React without a Head](https://www.youtube.com/watch?v=kD4xISzB9MU) ([Video](https://www.youtube.com/watch?v=kD4xISzB9MU)) ([Slides](https://docs.google.com/presentation/d/1Q1H7UItfjzo2DSWToa8X4qkbWMLDa1YfyyzGmHmSlTo/)) 🇬🇧\
Composability Summit 2022

2022-06-21 - [Don't take it personally, it is personalization](https://reactsummit.com/) ([Slides](https://docs.google.com/presentation/d/1MRaRpfBq6yNHYj6vMCWJwQqZGeVS4v3JwkWPQHbF5YA/)) 🇬🇧     
React Summit Online (Netherlands 🇳🇱󠁮󠁧󠁿)

2022-06-01 - [How to get a remixed view without a head](https://www.youtube.com/watch?v=DDhNna4mmHo) ([Video](https://www.youtube.com/watch?v=DDhNna4mmHo)) ([Slides](https://docs.google.com/presentation/d/1Vc3JnyHhBIomFQ2hpVHLzKwfZxM00qxp6pzfCjV8Tn8/)) 🇬🇧\
Render ATL (Atlanta, USA 🇺🇸)

2022-04-30 - [How to View and React without a Head](https://www.youtube.com/watch?v=JFVcx3bYl6M) ([Video](https://www.youtube.com/watch?v=JFVcx3bYl6M)) ([Slides](https://docs.google.com/presentation/d/1Q1H7UItfjzo2DSWToa8X4qkbWMLDa1YfyyzGmHmSlTo/)) 🇬🇧\
CityJS Brazil (São Paulo, Brazil 🇧🇷)

2022-04-18 - [Are you DXperienced?](https://www.youtube.com/watch?v=Gbu11btefQ8) ([Video](https://www.youtube.com/watch?v=Gbu11btefQ8)) ([Slides](https://docs.google.com/presentation/d/1FOxQysOvvjnPnfiPlSsiCeqJ68pO4CCFgU4sur5zM0k/)) 🇬🇧    
React Miami (Miami, USA 🇺🇸)

2022-02-09 - [Incremental Static Regeneration: Static sites on steroids](https://www.youtube.com/watch?v=hhfif-V0PTA) ([Video](https://www.youtube.com/watch?v=hhfif-V0PTA)) ([Slides](https://speakerdeck.com/fgiuliani/incremental-static-regeneration-static-sites-on-steroids)) 🇬🇧\
JSWorld Conference Online (Netherlands 🇳🇱󠁮󠁧󠁿)

2021-12-02 - [How to View and React without a Head](https://events.codemotion.com/conferences/online/2021/online-tech-conference-autumn/) ([Slides](https://slides.com/storyblok/react-without-head)) 🇬🇧\
Codemotion Online Conference

2021-11-30 - [Incremental Static Regeneration: Sitios estáticos con esteroides](https://www.youtube.com/watch?v=Ort2-wcOrq4) ([Video](https://www.youtube.com/watch?v=Ort2-wcOrq4)) ([Slides](https://speakerdeck.com/fgiuliani/incremental-static-regeneration-sitios-estaticos-con-esteroides)) 🇪🇸\
JSConf México (Mexico 🇲🇽)

2021-11-30 - [How to View and React without a Head](https://www.youtube.com/watch?v=JCCUGUDOHYw) ([Video](https://www.youtube.com/watch?v=JCCUGUDOHYw)) ([Slides](https://slides.com/storyblok/react-without-head)) 🇬🇧\
reactjsday 2021 (Italy 🇮🇹)

2021-11-20 - [Incremental Static Regeneration: Sitios estáticos con esteroides](https://www.youtube.com/watch?v=yHhWCmmGCUU&t=6183s) ([Video](https://www.youtube.com/watch?v=yHhWCmmGCUU&t=6183s)) ([Slides](https://speakerdeck.com/fgiuliani/incremental-static-regeneration-sitios-estaticos-con-esteroides)) 🇪🇸\
vOpen 2021

2021-11-10 - [Crash Course into the Jamstack with Next.js & Storyblok](https://geekle.us/workshopfacundogiuliani) 🇬🇧\
React Global Summit 2021 (USA 🇺🇸)

2021-11-03 - [How to View and React without a Head](https://www.youtube.com/watch?v=0HhWIvPhbu0&t=13451s) ([Video](https://www.youtube.com/watch?v=0HhWIvPhbu0&t=13451s)) ([Slides](https://slides.com/storyblok/react-without-head)) 🇬🇧\
React Global Summit 2021 (USA 🇺🇸)

2021-10-28 - [Incremental Static Regeneration: Static sites on steroids](https://www.conf42.com/JavaScript_2021_Facundo_Giuliani_Incremental_Static_Regeneration) ([Slides](https://speakerdeck.com/fgiuliani/incremental-static-regeneration-static-sites-on-steroids)) 🇬🇧\
Conf42: JavaScript 2021

2021-10-25 - [Incremental Static Regeneration: Static sites on steroids](https://youtu.be/Nrr-aw1mJY0?t=22704) ([Video](https://youtu.be/Nrr-aw1mJY0?t=22704)) ([Slides](https://speakerdeck.com/fgiuliani/incremental-static-regeneration-static-sites-on-steroids)) 🇬🇧\
React Advanced London (England 🏴󠁧󠁢󠁥󠁮󠁧󠁿)

2021-10-20 - [Hybrid backend using Prisma and a Headless CMS](https://www.youtube.com/watch?v=-oRbc1Efz5Q) ([Video](https://www.youtube.com/watch?v=-oRbc1Efz5Q)) ([Slides](https://slides.com/fgiuliani/backend-prisma-headless-cms)) 🇬🇧\
Front-end Development South Africa Meetup (South Africa 🇿🇦)

2021-10-10 - [Headless CMS, o como alegrar a los desarrolladores y editores al mismo tiempo](https://www.youtube.com/watch?v=ldp-SM_KEAo) ([Video](https://www.youtube.com/watch?v=ldp-SM_KEAo)) ([Slides](https://slides.com/fgiuliani/netcore-headless-cms)) 🇪🇸    
Virtual NetCoreConf 2021 (Spain 🇪🇸)

2021-09-22 - [Jamstack: Deploying blazing fast static sites using Git](https://www.youtube.com/watch?v=moZWRGon9fk\&list=PLe6EXFvnTV78OwMKQNYZ-s7e6yhsV3mTD) ([Video](https://www.youtube.com/watch?v=moZWRGon9fk\&list=PLe6EXFvnTV78OwMKQNYZ-s7e6yhsV3mTD)) ([Slides](https://slides.com/fgiuliani/gitkon-2021/)) 🇬🇧\
GitKon 2021 (USA 🇺🇸)

2021-09-01 - [How to View and React without a Head](https://youtu.be/myzAXCye-Qo?t=274) ([Video](https://youtu.be/myzAXCye-Qo?t=274)) ([Slides](https://slides.com/storyblok/react-without-head)) 🇬🇧\
React Finland 2021 (Finland 🇫🇮)

2021-08-26 - [Mirando el vaso medio lleno](https://youtu.be/Lh8PDrHb5xo?t=6708) ([Video](https://youtu.be/Lh8PDrHb5xo?t=6708)) ([Slides](https://docs.google.com/presentation/d/1UpAfb0-rtEcUR4ODp308T0gTp_zWBBCG59RZVe2heZM/edit?usp=sharing)) 🇪🇸\
WebConf LATAM 2021 (Argentina 🇦🇷)

2021-07-26 - [Storyblok: A visual experience](https://youtu.be/Teui9D4tTGs?t=7169) ([Video](https://youtu.be/Teui9D4tTGs?t=7169)) ([Slides](https://speakerdeck.com/fgiuliani/storyblok-a-visual-experience)) 🇬🇧\
Jamstack Porto (Portugal 🇵🇹)

2021-06-02 - [Secure your Next.js + Prisma app with Auth0](https://youtu.be/1bh4HET5-0Y?t=356) ([Video](https://youtu.be/1bh4HET5-0Y?t=356)) ([Slides](https://slides.com/fgiuliani/next-prisma-auth0)) 🇬🇧\
Prisma Meetup (Germany 🇩🇪)

2021-05-21 - [Jamstack, static sites y Azure](https://youtu.be/EpSbSxQDMb8?t=12842) ([Video](https://youtu.be/EpSbSxQDMb8?t=12842)) ([Slides](https://speakerdeck.com/fgiuliani/azure-days-conosur-jamstack-sitios-estaticos-y-azure)) 🇪🇸\
Global Azure ConoSur 2021 (Argentina 🇦🇷)

2021-05-21 - [Incremental Static Regeneration: Static sites on steroids](https://youtu.be/JraesXvwhoU?t=16438) ([Video](https://youtu.be/JraesXvwhoU?t=16438)) ([Slides](https://speakerdeck.com/fgiuliani/incremental-static-regeneration-static-sites-on-steroids)) 🇬🇧\
200OK: Oklahoma’s Web Developer Conference (USA 🇺🇸)

2021-04-26 - [Bringing the Jamstack to Azure with Static Web Apps](https://www.youtube.com/watch?v=lsahHCzDXiQ) ([Video](https://www.youtube.com/watch?v=lsahHCzDXiQ)) ([Slides](https://speakerdeck.com/fgiuliani/introduction-to-azure-static-web-apps-english)) 🇬🇧\
Jamstack Berlin (Germany 🇩🇪)

2021-04-17 - [Jamstack, static sites y Azure](https://youtu.be/PjADCOjMDlM?t=21552) ([Video](https://youtu.be/PjADCOjMDlM?t=21552)) ([Slides](https://speakerdeck.com/fgiuliani/netcoreconf-jamstack-static-sites-y-azure)) 🇪🇸\
Global Azure México 2021 (Mexico 🇲🇽)

2021-02-27 - [Jamstack, static sites y Azure](https://www.youtube.com/watch?v=85IrWVDLqAc) ([Video](https://www.youtube.com/watch?v=85IrWVDLqAc)) ([Slides](https://speakerdeck.com/fgiuliani/netcoreconf-jamstack-static-sites-y-azure)) 🇪🇸\
NetCoreConf (Spain 🇪🇸)

2021-02-19 - [Jamstack: Going (a little bit) back to the roots](https://emamo.com/event/developerweek-2021/r/speaker/facundo-giuliani-2) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DeveloperWeek 2021 (USA 🇺🇸)

2021-01-28 - [Jamstack: The Return of the Static Websites](https://gdg.community.dev/events/details/google-gdg-bucharest-presents-chrome-dev-summit-extended-2020/) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
Bucharest Chrome Dev Summit Extended (Romania 🇷🇴)

2020-12-06 - [Jamstack: The Return of the Static Websites](https://gdg-siberia.com/) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DevFest Siberia 2020 (Russia 🇷🇺)

2020-11-26 - [Jamstack: Volviendo (un poco) a las raíces](https://valdivia.beerjs.cl/) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-volviendo-a-las-raices)) 🇪🇸\
BeerJS Valdivia (Chile 🇨🇱)

2020-11-26 - [Jamstack: El retorno de los sitios estáticos](https://youtu.be/3Aa51mIxt1k) ([Video](https://youtu.be/3Aa51mIxt1k)) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-el-retorno-de-los-sitios-estaticos)) 🇪🇸\
ArqConf Summit Latam 2020 (Argentina 🇦🇷)

2020-11-24 - [Jamstack, static sites, and Azure](https://www.youtube.com/watch?v=o5EHiH2Knyk) ([Video](https://www.youtube.com/watch?v=o5EHiH2Knyk)) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-static-sites-and-azure)) 🇬🇧\
Azure Community Conference (India 🇮🇳)

2020-11-19 - [Jamstack: Volviendo (un poco) a las raíces](https://youtu.be/yrBDlZsDBFA?t=4800) ([Video](https://youtu.be/yrBDlZsDBFA?t=4800)) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-volviendo-a-las-raices)) 🇪🇸\
BeerJS Córdoba (Argentina 🇦🇷)

2020-11-17 - [Jamstack: Going (a little bit) back to the roots](https://emamo.com/event/developerweek-austin-2020/r/speaker/facundo-giuliani-1) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DeveloperWeek Austin 2020 (USA 🇺🇸)

2020-10-22 - [Jamstack: Going back to the roots](https://www.youtube.com/watch?v=GlgAm8CfDFc) ([Video](https://www.youtube.com/watch?v=GlgAm8CfDFc)) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
Big Mountain Data and Dev Conference 2020 (USA 🇺🇸)

2020-10-17 - [Jamstack: Going back to the roots](https://youtu.be/x325JPp1aSo?t=18125) ([Video](https://youtu.be/x325JPp1aSo?t=18125)) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DevFest Poland 2020 (Poland 🇵🇱)

2020-10-17 - [Jamstack: Going back to the roots](https://gdg.community.dev/events/details/google-gdg-bujumbura-presents-gdg-bujumbura-devfest-2020) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DevFest Bujumbura 2020 (Burundi 🇧🇮)

2020-09-07 - [Introducción a Azure Static Web Apps](https://youtu.be/4o-arkj8kgc?t=321) ([Video](https://youtu.be/4o-arkj8kgc?t=321)) ([Slides](https://speakerdeck.com/fgiuliani/introduccion-a-azure-static-web-apps-espanol)) 🇪🇸\
Jamstack Medellín (Colombia 🇨🇴)

2020-07-27 - [Introduction to Azure Static Web Apps](https://youtu.be/8VczqlbVF1k?t=2094) ([Video](https://youtu.be/8VczqlbVF1k?t=2094)) ([Slides](https://speakerdeck.com/fgiuliani/introduction-to-azure-static-web-apps-english)) 🇬🇧\
Jamstack Porto (Portugal 🇵🇹)

2020-07-18 - [Introducción a Azure Static Web Apps](https://www.youtube.com/watch?v=-SfPzYL9Xlw) ([Video](https://www.youtube.com/watch?v=-SfPzYL9Xlw)) ([Slides](https://speakerdeck.com/fgiuliani/introduccion-a-azure-static-web-apps-espanol)) 🇪🇸\
Jamstack Mexico City (Mexico 🇲🇽)


Talks

Article published on Smashing Magazine website:

https://www.smashingmagazine.com/2023/11/introduction-full-stack-composability/

https://images.ctfassets.net/mvkmiycntf3t/vVZCKExT7UKAHzkJfUZai/ac133e2b5073045497482e6b037965de/introduction-full-stack-composability.jpeg

A well-designed composable system should not only consider the technical aspects but also take into account the nature of the content it handles.

An Introduction To Full Stack Composability

Solutions Engineering Team Manager at [Storyblok](https://www.storyblok.com/)     
Full Stack Developer       
From Buenos Aires, Argentina 🇦🇷    

[React Buenos Aires](https://twitter.com/react_ba) organizer       
[DevSummit AR](https://twitter.com/devsummitar) organizer       

Auth0 Ambassador\
Prisma Ambassador\
Cloudinary Media Developer Expert

Hi, I'm Facundo!

Home

After a couple of years of uncertainty and online activities, 2022 showed that developers were really missing the in-person events. Dozens of initiatives happened all around the world, with different approaches and ideas, offering the possibility to people from different backgrounds to congregate in venues of all types to learn, share, connect and enjoy.

From a personal perspective, 2022 was the first year I attended in-person conferences as a Developer Relations Engineer. Also, during this year I had the chance to present talks at in-person international conferences for the first time, being [React Miami 2022](https://jsworld.hashnode.dev/react-miami-2022) my first experience.

With this article, I’ll try to recap and share some thoughts, reviews, and impressions related to my in-person experiences during this year that is about to end. 

## Before the events

Among the different tasks that the organizers have to accomplish, communicating with the people is an important one. They need to send details about the conference, the venue, the talks, the tickets, pre and post-conference events, and other interesting information for the attendees. To maximize the experience, organizers should share with the people as many details of the event as possible.

From the point of view of the speaker, you may be asked to send some information in advance: An outline of your talk, the slides that you will use, equipment that you’ll need, preferences about the day/time for your talk, etc. One thing I learned is that even though not all the speakers will have the slides ready in advance, sending them to the organizers can help to verify the direction of your talk and check if you are following the code of conduct and accessibility standards. Organizers can check the font, colors, and animations to confirm that your slides will see correctly during the event.

If you are going to the event as a regular attendee, you will probably receive some emails with important information about the conference: The schedule, venue details, sponsors, details about the talks and the speakers, stats about the tickets being sold, etc. Some conferences also send regular emails, like a newsletter, with other interesting news and articles.

## The trips

I’m grateful for being able to travel to different countries and cities. I always loved traveling, and doing it as part of my job makes me really happy. Visiting nice places, talking to locals, going to cool restaurants and pubs, and getting some spare time to walk around the streets, are great boosts of energy that, combined with the events themselves, end up being amazing experiences.

I had to take a lot of planes this year, and most of them were really long trips. Buenos Aires is pretty far from most of the cities in Europe and the US, and we don’t have direct flights to all of them. The more I traveled, the more efficient I tried to be with the whole experience. Traveling to the airports, going through all the security checks, waiting for the plane to take off, connecting flights, and other fun (?) experiences consume a lot of time and energy, that you would prefer to spend on other things.

Here I share some tips that helped me to get better experiences when traveling to different cities. If you, the reader, have some tips and travel hacks to share, I’ll really appreciate it!

- Pack as less as possible. Avoid taking big bags with you, you will have to carry them. Also, you will need space for the swag that you will get at the conference.
- Whenever it’s possible, do the check-in of your trip in advance, online.
- Don’t check your bag. Most of the time spent in an airport is taken by the process of checking bags. The long line at the airline desk, waiting for the families and groups to get everything ready and leave their big bags, can be spent in a smarter way (arriving a little later to the airport, drinking a coffee, reading, etc.)
- Sign up for the loyalty programs of the different airlines. And, whenever it’s possible, use the same airline to fly in order to earn more miles that can be used later.

One more important thing: Check which hotel are the speakers going to stay in, and book a room at the same hotel if it’s possible. The fun things of a conference also happen in the lobby of the hotel.

## Being from South America

Something that I always insist on, and I usually tell this to the people I meet during the conferences, is how privileged I am to attend these amazing events full of people from all over the world. In Argentina, and Buenos Aires in particular (the city where I live), we have just a few dev conferences and a bunch of local meetups. And even though some of them are pretty cool, the speakers are generally local, as well as the audience. 

Don’t get me wrong: That’s very cool and I really enjoy attending these events. But in other parts of the world, conferences join attendees and speakers from different countries and cities, who rarely come down to Argentina. This year I had the chance to meet amazing folks, some of them whom I already knew from the internet, and some I didn’t, and I ended up sharing amazing moments with them. 

If you have the chance, at least once, to travel to a different country and attend a conference, I encourage you to do that. I know that not everyone has the chance to do it, because of different reasons. Conferences, in general, happen in places like Europe or the US. And might be hard to plan, organize and pay for a trip to those destinations from distant places, like South America. And that’s why I say I’m a privileged person and I’m thankful for that. But again, if you are lucky like me and you have the chance to travel, attending a dev conference with interesting talks, and chatting with people from different backgrounds, and from different places of the world, is a really fulfilling experience.

Also, it’s always cool to meet your heroes in person. 

## Speakers

I enjoyed having one-to-one talks with awesome people from the developer community. Some people that I already knew from the internet, and some people that I met for the first time and now we keep the contact. You don’t need to get to any VIP place to talk to the speakers. They spend time at the conference as any other attendee, and they are open to talking with you! Popular devs, trainers, and teachers, that have created amazing content to help other people to learn about development, are in-person at the same place as you are. And they will be happy to talk to you. That’s an opportunity that you don’t want to miss.

Conference staff usually organizes a speaker’s dinner, as a way of saying “thank you” to the people for the effort they put into creating the content, preparing the talk, and traveling to the event. This is a cool opportunity to talk to other speakers while having some food and drinks, in a place with a reduced amount of people. If you are speaking at an event, the speaker’s dinner is a great moment to talk to your colleagues and learn from them.

Something super valuable is that speakers usually attend other talks, and they share feedback about them. That’s very helpful mainly for speakers with not much experience. Also, having the chance to see them presenting is a way of learning from them. Each speaker has their own style, but you can learn something new from all of them.

If you don’t have the chance to talk to the speakers during the conference, you can do it at the after-events that usually are organized by the conference staff. I will talk more about them later in this article.

## Venues

From usual office spaces to big conference venues, I had the chance to visit places very different, in size and style. It’s that the organizers consider the number of people that will attend the event, in order to have enough seats for the people that want to attend a talk, but also to have enough space to chat and walk through the sponsor booths. 

For me, it’s good not to have a super small place, but either a big place can be counterproductive: People would scatter among the whole place, not enabling sporadic groups to chat to appear. It’s also cool to have quiet places available for people that need to do some work, or want to rest a little bit. About the lunch time and coffee breaks, I personally prefer the type of food and drinks that allow the people to eat standing up, while talking to other attendees.

About the stages, I personally prefer the single-track conferences. I understand that sometimes the idea is to have multiple tracks to catch the attention of people from different backgrounds, in order to cover different topics. Also, it depends on the number of people attending to the conference, since not all the venues have gigantic rooms to held all the people at the same time. But from the speaker point of view, and my personal opinion, I prefer not having to “divide” the audience and make them choose which speaker they want to see.

To mention some of the places I’ve been to this year:

- [Jamstack Conf](https://jamstackconf.com/) was organized in some kind of raw ballroom in the center of San Francisco. A very big place with an outdoor rooftop connected to different parts of the venue.
- [Render ATL](https://2022.renderatl.com/)’s venue was a campus in Atlanta with three different stages. There were a lot of people and the weather was amazing. That helped to enjoy the curious part: An outdoor stage with no seats where, in order not to bother people working at a close office space, attendees needed to use headphones to hear the talk.
- [React Miami](https://www.reactmiami.com/) was “a conference inside a conference”: eMerge Americas, a big tech conference, was organized in a gigantic conference venue in Miami, and a big room inside that venue was dedicated to React Miami.
- [Kansas City Developer Conference](https://www.kcdc.info/) congregated really a lot of people in a very big venue in downtown Kansas City. With multiple rooms to host the different tracks, all the rooms were always crowded with people.
- [Nerdearla 2022](https://nerdear.la/), the Argentinian conference, is held in some kind of abandoned factory pretty popular in Buenos Aires.

## Attendees

I love talking to people. And the cool thing about conferences is that there is a lot of people to talk to! Listening about their stories, backgrounds, jobs, is a great experience that helps to learn a lot. People from different countries, with different levels of expertise, sharing feedback or asking questions, is something that helps the speakers to engage with the community. But also helps the developers in general to know about what is a trend in the dev world, what are the preferences when picking a tool, what is the people expecting or waiting for, what are their regular pains when working with certain frameworks, etc.

Because of the size of the conference, [CityJS Brazil](https://brazil.cityjsconf.org/) was probably the one with the most local attendees. It was a very cool experience, full of people that enjoyed starting a chat, asking things, and thanking for being there.

About that, something cool for the speakers is getting a “thank you” from the attendees. It may sound silly, but after presenting a talk in front of hundreds of people, you need a kind of signal to know that your talk was cool. Or probably that it was not what they were expecting: All the feedback is helpful.

## Talks

I attended a lot of talks, and I had the chance to see many good ones. I personally prefer the ones that are not overloaded of data and information, but they present a specific topic in an interactive and dynamic way, triggering the interest of the attendees to learn more about that when they get back home (or to talk to the speaker later, in the coffee breaks).

Depending on the conference, you can have talks about different topics: Deep lessons about advanced topics, introductions to new tools or techniques, discussion panels, soft-skills talks, etc. That will depend on the expected audience for the conference. Conf staff will keep that in mind during the talk selection process.

What’s great for me, and it’s something I need to improve, is the way on how to present the talk. The words you use, the gestures, the design of the slides, the structure of the talk, the code that you show, the gags and jokes. I attended great talks from amazing people that I would love to learn from.

What I want to keep clear, and I think most of the speakers will agree with me, is that you don’t need to be the smartest person of the planet to stand up at the stage and present a talk. All people have great ideas to share, or interesting topics to discuss, and each one of us has its own style to present it. If you are considering to present a talk at an event, but your impostor syndrome doesn’t allow you, it’s time to present the fight. The community is rooting for you, and they want to learn what you want to share, with your personal style. If you want to get into the conference speaking world, and you don’t know how to start or you think you can’t, contact me! I will help you as much as I can.

About the questions and answers related to the talks, I prefer to do it during the coffee breaks instead of taking time in the stage. As the time is limited and I prefer to see more talks at the conference, the Q&A time can be used to fill the schedule with more talks. If the attendees want to discuss topics with the speakers, they can do it in other moments of the event.

Something that should be implemented in more conferences, from my point of view, is asking the attendees to share feedback about the talks and the speakers. That is super helpful for them, in order to review the content and the presentations that they are creating, to see if they can improve something for future opportunities. One place where I saw this implemented in a great way was [Kansas City Developer Conference](https://www.kcdc.info/): There was a form that the attendees were able to fill with feedback about each one of the talks they attended. At the end of the conference, they did a raffle with super cool prizes between all the people that share feedback.

The pandemic forced the conference organizers to re-invent themselves and, as a side-effect, to open new gates. Making the events “hybrid”, doing a live-stream of the talks, allows people from different parts of the world to join and experience, in a different way, the conference. Hybrid events can go from doing a live-stream of what is happening at the conference venue, to set up a platform in order to provide a place to allow the online attendees to engage between themselves.

## During the events

Event organizers try to offer the attendees and speakers the best experience possible. That takes a lot of effort, time, and energy. Even more, several in-person conferences are community-driven events, which means that people put everything in place without getting any money, just for the love of doing the event and seeing the people enjoy it. For all of that, I really respect and thank all the people involved in the organization of the conferences. Sometimes people walk through the conference venues, drinking coffee and eating snacks, going from one room to the other, or getting headphones to listen to a real-time translation of a talk, and they don’t stop on the fact that all of that is available because a group of people spent a lot of energy doing it.

During the event, it’s all about enjoying. You should consider planning your days based on the schedule and details shared by the organizers. Pick which talks you want to see and create your own schedule, especially if there are multiple tracks/stages. It’s also a good idea to leave some time to walk around the sponsor booths to know more about them and the products and services they offer and ask for career opportunities in case you are interested. And also, to grab some swag!

## After parties and other events

Besides the conference itself, the event staff normally organize pre and post-events in order to have fun and do networking with other attendees and speakers. These events, from my point of view, are really valuable. Chatting while having fun, drinking, and eating is a comfortable scenario to know more about others, meet new people and make friends. You can also start interesting discussions about tech topics that can end up generating exciting ideas for you to bring home.

Some cool events I remember from the conferences I attended this year:

- [React Miami](https://www.reactmiami.com/) organized a party in a cool place with drinks and live music.
- [Jamstack Conf](https://jamstackconf.com/) had an after-party with beer, live coding, and games in the same venue as the conference. There were also puppies that you could adopt and take home with you.
- [Remix Conf](https://remix.run/conf/2022) had a karaoke and board games night.
- After [Next.js Conf](https://nextjs.org/conf), attendees went to a local club to enjoy a DJ playing music while playing “foosball”, ping-pong, and other games.
- [Kansas City Developer Conference](https://www.kcdc.info/) co-organized a tech impro/stand-up night, with fun geek and nerd jokes.
- [Render ATL](https://2022.renderatl.com/) went one step forward: Every night from the conference there were multiple events to attend. From sushi night to a music club, attendees were able to pick which type of event they wanted to go to.
- [React Alicante](https://reactalicante.es/) organized a post-event party where attendees needed to take a ship to get to the place.

If you are planning to attend a conference, don’t miss the “satellite events”.

## Final words

As I said, I love in-person events. They are amazing experiences where you can learn new cool things and spend time with awesome people. I’m already starting to plan my 2023. Hope it is as great as the year that is ending. See you in any place in the world!

https://images.ctfassets.net/mvkmiycntf3t/3Nuo3qLx76Bfsozs06uvJo/c02cdfc4bbec7d32632e31a264765f07/conference-people.jpeg

With this article, I’ll try to recap and share some thoughts, reviews, and impressions related to my in-person experiences during this year that is about to end. 

Impressions from 2022 Dev Conferences

2022-06-03 ["Learn with Jason" show episode](https://www.learnwithjason.dev/personalization-using-storyblok) 🇬🇧

2022-06-03 ["That’s My JAMstack" Podcast episode](https://pnc.st/s/thats-my-jamstack/e9e798e3/facundo-giuliani-on-end-user-experiences-nextjs-and-storyblok) 🇬🇧

2021-12-27 ["Jamstack Radio" Podcast episode](https://www.heavybit.com/library/podcasts/jamstack-radio/ep-93-elevating-headless-cms-with-facundo-giuliani-of-storyblok/) 🇬🇧

2021-12-15 - ["República Web" Podcast episode](https://republicaweb.es/podcast/headless-cms-con-facundo-giuliani-de-storyblok/) 🇪🇸

2021-11-04 ["FSJam" Podcast episode](https://fsjam.org/episodes/episode-51-storyblok-with-facundo-giuliani) 🇬🇧

2021-10-06 ["CodingCat.dev" Podcast episode](https://codingcat.dev/podcast/1-39-organizing-your-content-for-the-world-with-storyblok) 🇬🇧

2021-05-21 - ["Discover Headless Tech" Podcast episode](https://www.headlesscreator.com/una-conversacion-e-introduccion-a-jamstack) 🇪🇸

2021-08-20 [StepZen Stream "How to mix data from Storyblok CMS with your own project using StepZen"](https://www.youtube.com/watch?v=gDxYEUIzRMQ) 🇬🇧

2021-05-21 - [ConoSur "Azure Days 2021" Interview](https://www.youtube.com/watch?v=nlOz6Q1R350) 🇪🇸

2021-01-11 - ["Camino Dev" Podcast episode](https://anchor.fm/caminodev/episodes/29-Facundo-Giuliani-eorfls) 🇪🇸

2020-12-01 - ["UsoEsto" interview](https://usoesto.com/entrevistas/fgiulani/) 🇪🇸

2020-11-23 - ["Café con Tech" Podcast episode](https://www.cafecon.tech/1081172/6506308-el-no-ya-lo-tienes-junto-a-facundo-giuliani) 🇪🇸


Collaborations

Article published on Smashing Magazine website:

https://www.smashingmagazine.com/2022/07/look-remix-differences-next/

https://images.ctfassets.net/mvkmiycntf3t/7r3JpkM1SnDUNXlNt03OYh/e5b406ff5b09e688b08c9edbc87dd355/FXY1AbZXEAAn_kP.jpeg

Let’s talk about Remix, the framework to create JavaScript projects using server-side rendering. Let’s go through its main features and concepts and see the similarities and differences with Next.js. Remix became open-source not so long ago, and it has a promising future. Let’s see how it evolves, which features are added, which related projects are created to improve the developer experience, and which other scenarios it tries to solve.

A Look At Remix And The Differences With Next.js

Artículo publicado en Escuela Frontend:

https://www.escuelafrontend.com/articulos/conoce-remix-un-framework-para-mejorar-tu-ux

https://images.ctfassets.net/mvkmiycntf3t/7mY4FNad9chiXUyITxdGEZ/90f15f7ed561fe2fa13e02e95cb2509e/q2m3jQz7.jpeg

En el mundo del desarrollo web, y de la tecnología en general, nuevas herramientas aparecen cada vez más seguido. Si bien muchas son bastante similares entre sí, o comparten los mismos propósitos, son las que ofrecen un punto de vista diferencial las que logran hacerse masivas y popularizarse entre los miembros de la comunidad web. Si hablamos de frameworks, y más específicamente los que se basan en React, podemos ver que Remix ha estado sonando fuerte en los últimos meses.

¿Es Remix el Próximo Framework Para Ti?

Artículo publicado en Escuela Frontend:

https://www.escuelafrontend.com/articulos/mutabilidad-de-objetos

https://images.ctfassets.net/mvkmiycntf3t/5Zur8DuIHekluMiiZWfvux/c44cda7015c58748723c5dd5b145962e/pyEbhl6F.jpeg

Los desarrolladores, a veces, suelen hacer las cosas de manera automática sin analizar las consecuencias de las funciones que crean y ejecutan en sus proyectos JavaScript

Mutabilidad de Objetos en JavaScript

Artículo publicado en Escuela FrontEnd:

https://www.escuelafrontend.com/articulos/aprende-sobre-la-coercion-de-datos-en-javascript

https://images.ctfassets.net/mvkmiycntf3t/1IrQ7g2jM8yFnArtH9TJp4/760db70aa754cbbcae866e2d3e27f152/o2hXH2-u.jpeg

En este artículo definimos y explicamos el concepto de coerción de datos. Analizamos como JavaScript puede convertir valores de un tipo de dato a otro, de manera implícita y explícita. 

Aprende Sobre la Coerción de Datos en JavaScript

Article published on Auth0 website:

https://auth0.com/blog/introduction-to-async-programming-in-csharp/

https://images.ctfassets.net/mvkmiycntf3t/4hKgCA3iVx6f6esiSsypIE/7edb2790fbeaa44c8bb0c2ddd97d9fcd/csharp.png

Most languages and frameworks support asynchronous programming. But, what is it exactly? Learn about async programming and how to implement it in C#.

Introduction to Async Programming in C#

Article published on MediaJams website:

https://mediajams.dev/post/automate-social-images-next-puppeteer

https://images.ctfassets.net/mvkmiycntf3t/1cRVyPqX3vb9Rd5u6jREdu/4796676190c527e8e4274902e75307ce/image__1_.jpeg

In this article, we will see how to create a web app that generates social images automatically. The service will generate HTML content dynamically, based on a request, generate a "snapshot" of the content, and return it to the requester. In order to do this, we will need to automate the usage of a web browser.

Automate Social Images with Next.js and Puppeteer

Article published on MediaJams website:

https://mediajams.dev/post/upload-and-display-images-using-prisma

https://images.ctfassets.net/mvkmiycntf3t/1AC6bgj1QCBIep9uzoabnE/76b8b683b9d8cf432968e7c64fe152ea/image.jpeg

Sometimes you need to handle and manage images linked to information that is stored in the database of your web application. We can improve and simplify both image management, and data storage, using two helpful products: Prisma and Cloudinary.

Upload and display images using Prisma

Article published on Smashing Magazine website:

https://www.smashingmagazine.com/2021/07/migrate-jquery-nextjs/

https://images.ctfassets.net/mvkmiycntf3t/2Ew91EMs7U4OXwVQCOWs7N/71c1fb1a85382be0ce2a42f6bf0754c2/photo-1580311907323-df0f274f7828.jpeg

In this article, we’re taking a closer look at different approaches and strategies on how we can migrate a web application that uses jQuery framework, and start using one of the coolest React frameworks in the market: Next.js.

How To Migrate From jQuery To Next.js

Article published on Storyblok's blog:

https://www.storyblok.com/tp/add-a-headless-cms-to-asp-net-in-5-minutes

https://images.ctfassets.net/mvkmiycntf3t/6sXBMmHF3VQ3cOMq2XVi4c/8bb184725f8dfa47d980d58ca55a1dfd/1626958669008.jpeg

In this tutorial we will see how to integrate the Storyblok API with an ASP.NET Core MVC application and enable a preview of the content in the real-time Visual Editor. We will use Adliance.Storyblok, a C# client for the Storyblok API, to manage our data.

Add a headless CMS to ASP.NET in 5 minutes

Article published on Sanity.io website:

https://www.sanity.io/guides/graphql-vs-rest-api-comparison

https://images.ctfassets.net/mvkmiycntf3t/6rpFt6bJu4HPCpII2unpCl/51d0788b59cd0007c48fec6790f4c9c6/3058082eb7077e1ee27a85c1e033facea075d3a8-2400x1800.jpg

Are you planning to build an API for your web application and you don't know what architectural approach to take? In this article, we will describe REST and GraphQL APIs. We will see their features, advantages, disadvantages, and use cases.

GraphQL vs REST: which API is better for your web app?

Article published on Auth0 website:

https://auth0.com/blog/e2e-testing-with-playwright-sharp

https://images.ctfassets.net/mvkmiycntf3t/3aqgbrbAEVLypcZ1V83AwH/f3f19ac0fd495b2858a50244279b9427/playwright-sharp.png

Automating web browser interactions is a great way to test the functionalities of our web application. Let's see how to create UI tests in C# using Playwright Sharp, a browser automation library.

End-To-End Testing With Playwright Sharp

Article published on Auth0 website:

https://auth0.com/blog/pdf-generation-with-puppeteer-sharp

https://images.ctfassets.net/mvkmiycntf3t/7krszP4UnKZ5zN78kht8H1/bf65093c8d94b290c45f78a57efa15bc/PuppeteerSharp.png

Besides surfing the web, you can use web browsers programmatically to automate tasks. Learn how to drive a Chromium browser using Puppeteer Sharp, a browser automation library for C#.

PDF Generation with Puppeteer Sharp

Article published on Smashing Magazine website:

https://www.smashingmagazine.com/2021/05/implement-authentication-nextjs-auth0

https://images.ctfassets.net/mvkmiycntf3t/2WfV1DWWPzcjJGVWLAFrQy/8b36fdc2680419ab097c6990639df5b5/photo-1528312635006-8ea0bc49ec63.jpeg

At the moment of adding authentication and authorization to our web applications, there are some things that we should evaluate, e.g. whether we need to create our own security platform or whether we can rely on an existing third-party service. Let’s see how we can implement authentication and authorization in Next.js apps, with Auth0.

How To Implement Authentication In Next.js With Auth0

Blog

Do you use Jira as the issue tracker in your company? Do you link GitHub PRs with Jira issues, and you want to ensure that link exists in every created PR of your repository? This GitHub Action is for you!

### Workflow

Defining a Jira "prefix" issue, `Jira Issue Key Checker` will verify every PR created in your repository contains a linked Jira issue key in both the PR title and description. You can see how to configure and trigger the action here:
https://github.com/fgiuliani/jira-issue-key-checker/blob/master/README.md

To see the complete code of the project, you can go here:
https://github.com/fgiuliani/jira-issue-key-checker

### Init project and install packages

As we'll use Node.js to create this GitHub Action, we will run `npm init` in our directory to generate `package.json` file. In this file we will set the details of our project. We will also install some dependencies that will help us to integrate our code with GitHub.

`npm install @actions/core`
`npm install @actions/github`

The `@actions/core` package provides an interface to the workflow commands, input and output variables, exit statuses, and debug messages.

The `@actions/github` package grants access to GitHub Actions contexts.

### Create an action metadata file

Create a file called `action.yml`. It defines action's inputs and details. It also tells the action runner how to start running this JavaScript action. Write the following example code in the file:

```
name: "Jira Issue Key Checker"
description: "Checks If a PR contains its linked Jira issue key in both the title and the description."
on: [pull_request]
inputs:
  GITHUB_TOKEN:
    required: true
  jira-prefix:
    required: true
    description: "Jira issue key prefix. Ex. ABC-1111, prefix would be ABC"
runs:
  using: "node12"
  main: "index.js"
```

### Write the action code

Let's create `index.js` file, which will containg the action code.

```
const core = require("@actions/core");
const github = require("@actions/github");

const jiraPrefix = core.getInput("jira-prefix");

async function run() {
  try {
    const prTitle = github.context.payload.pull_request.title;
    const prBody = github.context.payload.pull_request.body;

    let regex = new RegExp(`${jiraPrefix}-[0-9]+`);
    if (!regex.test(prTitle) || !regex.test(prBody)) {
      core.setFailed("Jira Issue Key missing in PR title or description.");
      return;
    }
  } catch (error) {
    core.info(error);
  }
}

run();
```

Some aspects to consider about the code:
- GitHub Actions provide context information about the webhook event, workflow, action, etc. To access the context information, you can use the `github` package.
- `core.getInput("jira-prefix")` will get the prefix we defined for the issues we want to check.
- `github.context.payload.pull_request` exposes information related to the PR we're evaluating with the action.
- `core.setFailed` marks the PR as failed If it doesn't pass the evaluation of the Regular Expression that validates both PR title and description contain the linked Jira issue key.

### Commit, tag, and push the action to GitHub

Commit all the files inside the directory of your project. You will also need to commit `node_modules` folder.

```
git add .
git commit -m "My GitHub Action"
```

It's a good practice to also add a version tag for releases of your action. Let's create a version and push the changes to the repository.

```
git tag -a -m "My GitHub Action" v1
git push --follow-tags
```

### Test and use the action

Take any GitHub repository and create the file `.github/workflows/jira-issue-key-checker.yml`. In the file, paste this example code:

```
name: "Jira Issue Key Checker"
on:
  pull_request:
    types:
      - opened
      - edited
      - synchronize

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: [your-user]/[your-action-repository]@v1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          jira-prefix: "ABC"
```

Add this file to your GitHub repository. After this, whenever a new PR is created in that repository, the GitHub Action will run and evaluate it. You will be able to see the workflow execution and details about that clicking on the **Actions** tab.

https://images.ctfassets.net/mvkmiycntf3t/luIOM3L7MKpP7qpbnKSyu/db1fc56c9298efd4848fb653f5150e54/jira-github.jpg

Check the inclusion of Jira Issue Keys in PRs with GitHub Actions

https://images.ctfassets.net/mvkmiycntf3t/6qlqi9TZtaLGTEdXcC75BZ/74df2b29191df31b8b795145ab127eb1/stefan-bookblock-wdf0FsoPAGc-unsplash.jpg

Public bookmark list and URL shortener with Fauna, Next.js and Auth0

---

This article is part of [#ServerlessSeptember](https://aka.ms/ServerlessSeptember2020). You'll find other helpful articles, detailed tutorials, and videos in this all-things-Serverless content collection. New articles from community members and cloud advocates are published every week from Monday to Thursday through September. 

Find out more about how Microsoft Azure enables your Serverless functions at [https://docs.microsoft.com/azure/azure-functions/](https://docs.microsoft.com/azure/azure-functions/?WT.mc_id=servsept20-devto-cxaall). 

---

If our organization has a YouTube channel with videos, users may comment on them with questions or doubts. If only one person checks the channel, regular notifications may be enough. But what would happen If we want to notify other people whenever a user posts a comment in one of our videos?

In this article, we'll use [Azure Functions](https://azure.microsoft.com/en-us/services/functions/) and a couple of third-party APIs to create a JavaScript serverless application to send emails when new comments are added in any video from a YouTube channel. We will call the [YouTube API](https://developers.google.com/youtube/v3/docs) from the app, using a [Google Developer Project](https://console.developers.google.com) to get an API Key. 
As we don't have anything like push notifications to get new comments automatically, we will create a serverless application to do that. It will run on a schedule (seconds, minutes, or hours), and it will verify If we have new comments in any of the videos of a specific channel. To do that we will call the YouTube API. If we get new comments, this app will send a notification email to a list of people using [SendGrid API](https://sendgrid.com/).

If you want to see the final source code, you can check out the repository on [GitHub](https://github.com/fgiuliani/youtube-notifier)

We will use [Node's package manager](https://nodejs.org/) to install the dependencies we need for this demo.

### Create Google Developer Project to get a YouTube API Key

- Go to https://developers.google.com/ and log in with your Google Account (or create an account, if necessary). 
- Go to https://console.developers.google.com/project and click on **Create Project**. Put the details you prefer for the project.

![](https://photos.collectednotes.com/photos/59/25ee142a-8c8a-4876-ac9b-eb629bbd4f1e)

- Go to the project you just created and click on **Enable APIs and Services** and look for **YouTube Data API v3**. Select it and click on **Enable**.

![](https://photos.collectednotes.com/photos/59/d197abd8-b2cd-4d9d-98d3-411bac79918a)

- Go to **Credentials** and click on **Create Credentials** -> **API Key**. Save the generated key. We will need it in our Azure Functions app.

![](https://photos.collectednotes.com/photos/59/51f8dd94-f615-4d31-8428-ebb141ab3f58)

### Create SendGrid account to get an API Key

[SendGrid](https://sendgrid.com/) is a powerful tool used to send emails, but it can also track user interaction. You can create marketing campaigns, generate reports, and see different types of statistics.

- [Sign Up on SendGrid](https://signup.sendgrid.com/). You don't need a credit card to create an account. The free tier will be enough to go through this tutorial.
- Go to https://app.sendgrid.com/settings/api_keys and click on **Create API Key**. Set a name for it and give it Full Access.
- Click on **Create and View**. Copy the generated key somewhere safe since it won't be displayed again.

![](https://photos.collectednotes.com/photos/59/1225073c-af82-4604-b4f0-e7ab4a21ef2a)

After that, you will need to [Verify a Single Sender](https://app.sendgrid.com/settings/sender_auth/senders). We need to add some information to clarify which email account we will use later in the app to be the sender of our notifications, and some details related to that account.

![](https://photos.collectednotes.com/photos/59/d5eaed0f-e62e-43e6-8931-790c6551a3f4)

### Create an Azure Account

[Microsoft Azure](https://azure.microsoft.com/) is a cloud computing service for building, testing, deploying, and managing applications. It offers different products to help us with our applications. For our project, we will use [Azure Functions](https://azure.microsoft.com/en-us/services/functions/), the serverless application service from Azure. Different languages are supported to create these Functions. We will use JavaScript.

- [Sign Up on Microsoft Azure](https://azure.microsoft.com/en-us/free/). There is a free tier for many of the services offered, and a trial period for other features. You won't need to pay anything for this demo.
- After setting up your account, let's create an [Azure Storage account](https://docs.microsoft.com/en-us/azure/storage/common/storage-account-create). This will be the space you will use to host the Function.

![](https://photos.collectednotes.com/photos/59/05ab4c6e-bf6d-4c77-890b-946dfdb3014e)

- Select your storage account, select **Access keys** in Settings, then copy the first Connection string. We will need it later.

![alt](https://photos.collectednotes.com/photos/59/6d86fcca-7606-4eb1-9142-f1d34b0a2e03)

### Install Azure Functions Extensions

The IDE I use is [Visual Studio Code](https://code.visualstudio.com/). It's a powerful editor with many plugins and customizations. I recommend using it for this demo because there's an [Azure Functions Extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions), which will make our job easier and will help us create and deploy the Function.

![](https://photos.collectednotes.com/photos/59/e8427ae8-f63a-429d-92cd-fe76919805dc)

After installing the extension, in the left menu, you should have an Azure icon. Click on it and sign in with your Azure Account, so the IDE links your personal account.

![](https://photos.collectednotes.com/photos/59/3154f39a-9f44-43f4-a33d-678f06735682)

Finally, to enable local debugging, we need to install the [Azure Functions Core Tools](https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=macos%2Ccsharp%2Cbash#v2).

Now it's time to code!

### Create a new Azure Function Project

In Visual Studio Code, in the same menu, you signed in, now you should see your Azure Subscription. Click on the icon with a folder and a thunder that says **Create New Project** and follow the steps:

- Name your project.
- The language we'll use is JavaScript.
- You should select the template **Timer Trigger**. 
- I want my Function to run every 5 hours, so I set the time interval cron as **"0 0 */5 * * *"**. You can read more about the cron format [here](https://docs.microsoft.com/en-us/azure/azure-functions/functions-bindings-timer?tabs=javascript). You will be able to change this later in the **function.json** file.

After following these steps, we should have all the initial files of our Azure Function Project generated.

### Install NPM packages

To call the YouTube API, we will use [Google APIs Node.js Client](https://www.npmjs.com/package/googleapis). We need to run `npm install --save googleapis` in the terminal to install the package so our Azure Function can use it.

For the SendGrid API, we also have an NPM package that we will use to send the emails. Run `npm install --save @sendgrid/mail` to install [Mail Service for the [SendGrid v3 Web API](https://www.npmjs.com/package/@sendgrid/mail).

### Define Environment variables

We will need some key values to be stored as environment variables. Go to `local.settings.json` file and add these keys inside "Values":

```javascript
"YouTubeAPIKey": "[YOUTUBE_API_KEY]", // The API Key generated in your Google Developer Project.
"YouTubeChannelID": "[YOUTUBE_CHANNEL_ID]", // The ID of the YouTube channel you want to watch.
"SendGridAPIKey": "[SENDGRID_API_KEY]", // SendGrid API Key.
"EmailFrom": "[SENDER_EMAIL]", // The sender email for the notifications.
"EmailTo": "[RECEIVER_EMAIL]" // The receiver email for the notifications.
```

The channel ID is the identifier of the YouTube channel you want to keep track of. If you see, the URL of a channel looks like `https://www.youtube.com/channel/[ChannelID]`.

`"EmailTo"` could contain more than one email address. You have to separate them with commas, ','.

Also, you will need to set the connection with your Azure Storage account. To do this, paste the connection string you previously generated as the value of the key `AzureWebJobsStorage`.

### The Function

Let's go now to the `index.js` file inside the project directory. We will start coding our app.
First, we will initialize the YouTube and SendGrid API clients. We will use the NPM packages we installed in the previous section, and the environment variables we defined. This is how the code inside our function should look like:

```javascript
  const { google } = require("googleapis");
  const sendGridClient = require("@sendgrid/mail");

  const youtubeClient = google.youtube({
    version: "v3",
    auth: process.env["YouTubeAPIKey"],
  });

  sendGridClient.setApiKey(process.env["SendGridAPIKey"]);
```

After that, we will call the YouTube API to get a list of the last comments (and replies) posted in all the videos of a specific channel.

```javascript
  const response = await youtubeClient.commentThreads.list({
    part: "snippet,replies",
    allThreadsRelatedToChannelId: process.env["YouTubeChannelID"],
    maxResults: 100,
    order: "time",
  });
```

A few things to consider here:

- We call [**commentThreads**](https://developers.google.com/youtube/v3/docs/commentThreads/list) endpoint because we want to retrieve all the comments and their replies.
- We use the environment variables we set before with the channel ID.
- The API supports a maximum of 100 results. That's the number of results we will bring not to lose any comment.
- `order: "time"` sets the order of the results from the newest to the oldest.

You can read the YouTube API documentation to see the details of the results we get from the YouTube API. It will be helpful for the following part of the code.

```javascript
  if (response.data) {
    const lastRun = new Date(myTimer.scheduleStatus.last);

    response.data.items.forEach(function (comment) {
      const topLevelComment = comment.snippet.topLevelComment.snippet;
      const topLevelCommentDate = new Date(topLevelComment.publishedAt);

      if (topLevelCommentDate.getTime() > lastRun.getTime()) {
        sendEmail(
          topLevelComment.authorDisplayName,
          topLevelComment.textDisplay,
          `https://www.youtube.com/watch?v=${topLevelComment.videoId}&lc=${comment.id}`
        );
      }

      if (comment.snippet.totalReplyCount > 0) {
        comment.replies.comments.forEach(function (reply) {
          const replyDate = new Date(reply.snippet.publishedAt);

          if (replyDate.getTime() > lastRun.getTime()) {
            sendEmail(
              reply.snippet.authorDisplayName,
              reply.snippet.textDisplay,
              `https://www.youtube.com/watch?v=${reply.snippet.videoId}&lc=${reply.id}`
            );
          }
        });
      }
    });
  }
```

Let's break this down:

```javascript
  if (response.data) {
```

We'll keep executing the function only If we get any result.

```javascript
    const lastRun = new Date(myTimer.scheduleStatus.last);
```

Azure Functions exposes a [timer object](https://docs.microsoft.com/en-us/azure/azure-functions/functions-bindings-timer?tabs=javascript#usage), which contains the data related to the execution of the timerTrigger function. We can use it to get the last execution time to compare it with the comments date/time. If the comment is newer, we assume we didn't notify the users about it, so we send the email. We have to make that comparison with every comment we get from the API.

```javascript
    response.data.items.forEach(function (comment) {
      const topLevelComment = comment.snippet.topLevelComment.snippet;
      const topLevelCommentDate = new Date(topLevelComment.publishedAt);

      if (topLevelCommentDate.getTime() > lastRun.getTime()) {
        sendEmail(
          topLevelComment.authorDisplayName,
          topLevelComment.textDisplay,
          `https://www.youtube.com/watch?v=${topLevelComment.videoId}&lc=${comment.id}`
        );
      }
```
But also with the comments' replies (If they have any)

```javascript
      if (comment.snippet.totalReplyCount > 0) {
        comment.replies.comments.forEach(function (reply) {
          const replyDate = new Date(reply.snippet.publishedAt);

          if (replyDate.getTime() > lastRun.getTime()) {
            sendEmail(
              reply.snippet.authorDisplayName,
              reply.snippet.textDisplay,
              `https://www.youtube.com/watch?v=${reply.snippet.videoId}&lc=${reply.id}`
            );
          }
        });
      }
```

You should have noticed we're calling twice a function called `sendEmail`, sending as parameters the comment's user, text, and the direct URL. Let's create that function, which will call the SendGrid API to send the emails. Write the code for the function inside the main function.

```javascript
  function sendEmail(user, comment, url) {
    let body = "There is a new comment in one of your videos\n";
    body += `User: ${user}\n`;
    body += `Comment: ${comment}\n`;
    body += `Url: ${url}`;

    const msg = {
      to: process.env["EmailTo"],
      from: process.env["EmailFrom"],
      subject: "There is a new comment in your YouTube Channel",
      text: body,
    };

    sendGridClient
      .send(msg)
      .then(() => {
        console.log("Email sent");
      })
      .catch((error) => {
        console.log(error.response.body);
      });
  }
```

As we said, `sendEmail` receives the user, the comment, and the URL. Then, it creates the email body, and instantiates a `msg` with all the email details. After that, it calls the SendGrid API with the client we initialized, and we send the email to the users.

That would be all the code for the Azure Function. You can execute it locally and debug it directly from Visual Studio Code, using its integrated debugger (press F5 to debug). Consider that we created a timerTrigger, and it will follow the time interval we defined even when debugging locally. So, If you want to debug in a better way, maybe you should define a smaller time interval to execute the function more frequently.

### Deploy the function to Azure

With the Azure Functions Extension, deploying from Visual Studio Code is very simple.
- Click on the Azure logo to open the Azure Explorer. Under **Functions**, click on the blue up arrow.

![](https://photos.collectednotes.com/photos/59/3154f39a-9f44-43f4-a33d-678f06735682)

- At the prompt, select **Create new Function app in Azure**.
- Enter a globally unique name for your Function.
- Choose the Node.js version/runtime.
- Select the Azure region of your preference.

After following these steps, and waiting for a while, your Function will be up and running in Azure.

### Final words

In this demo, we learned how to create, debug, and deploy an Azure Function (time-triggered) using JavaScript and Visual Studio Code. We developed some basic integrations with YouTube and SendGrid APIs. 

A next step would be analyzing the resources consumed by the function and evaluating [the costs it would incur](https://azure.microsoft.com/pricing/details/functions/) while working in Azure. If you don't want to keep the Function, you can clean up the resources. Right-click the Function App in the **Azure: Functions** explorer and select **Delete Function App**.

https://images.ctfassets.net/mvkmiycntf3t/jeT8z4Qb7FAol6nB5OrkO/609bacd32f618515282f3fef38a04188/christian-wiediger-usWE9pOuTfE-unsplash.jpg

Notify YouTube comments with Azure Functions


Thank you for contacting me! I will get back in touch with you soon.

**Have a great day!**

Thank You!

To get in touch please fill the form below.

name

email

message

Contact

**This is a paragraph**. Pellentesque habitant morbi *tristique senectus et netus et malesuada* fames ac turpis egestas. Vestibulum [tortor quam](https://www.google.com), feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit <mark>amet est et sapien ullamcorper</mark> pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

# This is an H1

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

## This is an H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

### This is an H3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

#### This is an H4

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

## Quoting

>Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. <cite>Scott Adams</cite>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

<hr />

## Unordered Lists

+ Donec non tortor in arcu mollis feugiat
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+ Donec id eros eget quam aliquam gravida
+ Vivamus convallis urna id felis
+ Nulla porta tempus sapien

## Ordered Lists

1. Donec non tortor in arcu mollis feugiat
2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
3. Donec id eros eget quam aliquam gravida
4. Vivamus convallis urna id felis
5. Nulla porta tempus sapien

## Code Blocks

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces.

```

body {
  color: #333;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
```

## Tables

<div class="responsive-table">
  <table>
    <caption>Simple table with caption and header</caption>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
      </tr>
    </tbody>
  </table>
</div>

The style guide provides you with a blueprint of default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.