ScaleDynamics’s JavaScript Full Stack Playground is the first place where developers can code both frontend JavaScript and backend node.js directly in their browser.

To ease the coding, instead of using HTTP and JSON between your front and your Node.js backend, in the playground you use JavaScript call and JavaScript objects. It helps you save time by writing less code and offers a unique experience of coding Full Stack without being a Full Stack.⚡🍻 - you’re kinda transforming into a super saiyan!

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 😎✨

Table of content

React based apps
Weather forecasting apps
Database/Dashboard
Tensorflow.js/AI

React based apps

React Hover card with REST API

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.

React Hover card with JS Data

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 😉

Location tracking by IP Adresse

Tracking visitor's geolocation on map using only its IP address.

Weather forecasting apps 🌄🌦️☔

Get 5 days forecast

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.

GetCurrentWeather_V1

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.

GetCurrentWeather_V2

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? 😉

GetHistoricalWeatherData

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).

Dark Sky Weather API

This sample shows how to use a Weather Dark Sky REST API, to get a weather forecast at a specific location.

Weather forecast widget

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.

Database/Dashboard 📈📊

Morris GraphLine

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!

Dashboard

This is a Dashboard example which could help you create a dashboard and visualize data easier.

Datatable

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!

MongoDBMovies

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.

Movie UI using MongoDB

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.

Movie UI using MongoDB Scrollable

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 😉

Tensorflow.js/AI

Tensorflow.js interference

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.

Tensorflow toxicity detection

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.

Tensorflow.js face detection

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.

Tensorflow.js sound spectrogram

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.

Tensorflow.js sound speedup

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.

Hop in, show off your snippets, and inspire others!

The JavaScript Full Stack Playground will remain FREE for public code snippets. You can easily create an account, get on it and start creating yours or playing with other people’s snippets to become Full Stack a lot faster than you think 😉

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 😎✨
Twitter
Facebook
Instagram

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!