In an effort to understand what Serverless Applications are I completed a course on what it is, how it works, and where its going in the future. Here is the product after completing about 120hrs+ of study.
Here we have "Nate's Taco Shack", a fictional restaurant based out of Austin, TX. We give users the ability to view the current menu, chefs employed at our location, order for curbside or delivery, receive emailed order details, and a hidden feature for a beer menu!
This application goes over a ton of modern web development practices and features. Such as, ES6 JavaScript, Gatsby, React.js, GraphQL, Headless CMS, Progressive Images, Scoped CSS, Serverless Functions. Just to name a few.
There is some really good stuff here, check it out, read the README, click the links, whatever makes your heart content. 😊
| Client GraphiQL || Order with Custom Hooks || Pagination || Api Call || Mobile Responsiveness || Custom Loading States |
Gatsby will cache the data from our Sanity Headless CMS. Here we are Querying Tacos according to their ingredients using a REGEX statement.
There is quite a lot going in in this page. Custom hooks is the name of the game. We are injecting a custom Context that will set state for a custom provider. When the user actually "submits" their order, we also have a serverless function that will then use NodeMailer to send the order details. P.S we have a Honey Pot! 🍯 to defend against bots 🤖
What do we do to prevent from too much data from spilling on our pages? Dynamic pages that will look at our data and create 1 page per 3 chefs. If we manipulate our amount of employees, Gatsby will adjust the amount of pages we output.
Gatsby dynamic components come back again for this one! We are calling for some dummy data from SampleAPIs.com then use the createContentDigest api provided via Gatsby to create all of our nodes!
CSS Grid, Flexbox, and Media Queries all working in unison to build a beautiful desktop and mobile app!
It is possible to directly make a GraphQL Query from out Serverless Gatsby app to the Sanity Headless CMS. But it takes longer than it would to just query our cached client data. Our Grids ridged frame makes it possible to check for a loading state and use place holder items complete with dynamic item rendering according depending on the number queried, and some clever CSS animations.
What is so special about Gatsby anyway?! Automatic routing based on your directory structure. No need to include additional code for configuring the router. HTML code is generated server-side. Pre-configured Webpack-based build system. Easily extensible by plugin ecosystem.Optimized for speed. Gatsby loads only critical parts so that your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so that clicking around the site feels incredible fast. Easy data integration from sources like CMSs, SaaS services, APIs, databases, file system... just to name a few.
Ok, then why Sanity Headless CMS? Since a Headless CMS is API driven, it is more flexible. It allows you to build your own head or a presentation layer/ frontend. For marketers to provide a customer-pleasing experience, each channel used by the business would require access to the current product information and availability. Headless CMS is Future-Proof A headless CMS enables businesses to future-proof their applications by separating the presentation layer from the data and logic layer. It is a lot cheaper for your business team to create a new functionality because headless CMS requires little technical involvement. Offers Better Software Architecture A headless CMS is architected to decouple CMS platforms and published content. Allows you to do more with less Organizations will no longer need large teams of specialists with particular CMS knowledge, unlike the requirements for a traditional CMS. Lets You Focus on Your Business Worrying about your CMS can be time-consuming and distracting.
| (503)504-7581 || [email protected] || LinkedIn |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent