CSS-Tricks Presents
The Power of Serverless
for Front-End Developers


Want to play with serverless technology?

That's a great way to learn. Here are some ideas.

A Blog

Static site builders are a perfect match for modern static file hosts, but there is another way you can build a serverless blog as well. You could store and manage the structured data as JSON stored in the cloud and build it as an SPA.

Here's a complete tutorial on building a blog using mostly Firebase. A bonus feature could be having an image uploader via Cloudinary, a cloud function for Markdown processing, or storing and fetching files in S3 with Serverless.

Focus AreasAuthDatabaseMedia Storage

A Food Log

A web form could be used to log what you ate and the calories. Then you could chart the data and offer daily/weekly/monthly summaries.

Here's a barebones food log app using Firebase on CodePen Projects.

Focus AreasAuthDatabase

A Recipe Site

What if a static site full of featured recipes offered a feature to let you send a text message of the complete recipe to your phone?

A cloud function to send an SMS message through Twilio is a great way to wet your feet with serverless technology. The Twilio Node Helper Library provides a simple example function you can put on something like Webtask and call with a simple form or through JavaScript.

Focus AreasCloud FunctionsNotifications

A To-Do App

This classic app doesn't just have to be a demo. Your version could be personalized to your needs, or compete on features and UX with all the others out there.

TodoMVC has examples of how to build a to do app in loads of different JavaScript frameworks. Now it's your job to hook them up to a data store and add features.

Focus AreasInteractivityDatabaseAuth

API Endpoints

Imagine you have a database full of data you'd like to give people API access to. The functions to retrieve and format that data are a perfect fit for cloud functions. GraphQL is worth looking into here.

A Front End Developer’s Guide to GraphQL

How to Build a Serverless API with Amazon Web Services’ API Gateway.

Focus AreasDatabase

Social Media Card Creation

Tweets and Facebook Posts tend to do better when accompanied by an image, the legend goes. Perhaps that doesn't have to be a manual graphic design process, but can be automated. You could use a serverless function to turn a quote from an article's author into a beautiful graphic just by hitting a URL.

Focus AreasCloud FunctionsMedia