The growing Full Stack community of the Playground provides a high volume of code snippets which make it easier and quicker for other developers to learn, test and prototype ideas 🤩
Here is the list of useful code snippets provided by the Playground’s Full Stack community which mainly focus on Node.js, React, MongoDB, Tensorflow.js…
So, with no further ado, let get into it 😎✨
This snippet was specifically built to demonstrate how to do a REST API on the backend and show the result on a hover card build with React.
Another example of presenting personal information on hover cards. But this time, the snippet shows another way to do that using a Node.js backend providing JSON Data 😉
Tracking visitor's geolocation on map using only its IP address.
Open Weather Map is a set of APIs to get weather forecasts for multiple cities. A 5 days forecast is available at any location or city. It includes weather data every 3 hours. You’ll need a demo key from rapidAPI to be able to run the snippet.
Still using APIs from Open Weather Map, but with this snippet, you can get weather data in any location on the earth. The current weather data are updated online based on data from more than 40,000 weather stations. And just like the previous one, you’ll need a demo key to be able to run as well.
This one provides access to current weather data for any location on Earth including over 200,000 cities! 🤯 This snippet collects and processes weather data from different sources such as global and local weather models, satellites, radars and vast networks of weather stations. That looks cool to you, don’t you think? 😉
To get access to historical weather data for the 5 previous days. Parameters are composed with geographical coordinates (latitude, longitude) and DT date (unix time, UTC time zone).
This sample shows how to use a Weather Dark Sky REST API, to get a weather forecast at a specific location.
This snippet shows a forecasting widget that uses Open Weather Map API. You’ll need an API key from rapidapi.com, and subscribe to the Open Weather Map API.
This snippet shows a Morris graph line example. Graph config and data are sent by the backend and the frontend shows it. Add your data on the backend side to test and reuse it for your needs!
This is a Dashboard example which could help you create a dashboard and visualize data easier.
Example of a data table that shows random user data. Sorting, filtering, and pagination enabled. Feel free to use it in your snippets to show your own data!
This example shows how to query a MongoDB movie database on the backend and show results. In this sample, the author fetches movies from the Sample Mflix Dataset provided by MongoDB Atlas.
This snippet shows a use case of a frontend and a proxy backend that access a MongoDB database. The backend uses mongoDB to request the movie posters. The frontend part is based on https://codepen.io/cb2307/pen/XYxyeY.
This snippet is basically similar to the previous one, which also is to build a movies list page. But this time, it’s updated with scrollable feature and I bet it looks way cooler 😉
This snippet shows how to use Tensorflow.js on the Node.js back-end side to apply furthermore on AI, through buildup and training of a simple sequential neural network.
Another example for applying Tensorflow.js on your AI projects, this time, the author infers a pre-trained Tensorflow model for toxic words detection on the snippets, showing how to integrate that as a feature in your projects.
This faces detection snippet streams video from a webcam live stream on the backend, and applies a black or blurred overlay on detected faces regions, either on frontend or backend. Images are passed (in or out) to the back-end as ArrayBuffer function arguments.
This snippet streams audio from the device microphone and displays a live spectrogram, whose frequencies are computed on the frontend side with an audio API analyzer or on the backend side using tensorflow.js utility.
This snippet performs sound/speech capture, increases sound speed on a server, using simply fixed time frames cross-fading algorithm, then plays it back on the device.
The code structure is quite similar to spectrogram snippets.
The first step is very simple, just sign up for the FREE developer plan in this link
The playground is part of our Managed Web application platform for Node.js. We provide an SDK to build and deploy projects using the same coding approach (no HTTP/JSON, just JS calls and JS objects) 🦄
And if you feel it’s interesting and want to explore more about the tech or just to keep yourself updated, feel free to follow our social media. I guarantee that it’ll be fun, and you’ll never miss a single new snippet on the Playground 😎✨
Also, to clearly and fully understand the tech behind the Playground, you can take a look at this article in which our CEO explains how he created the Playground and its coding approach.
Stay tuned for cooler stuff coming!