Skip to main content

Build a full-stack app in under 5 minutes!

Welcome to Squid! Squid offers a versatile platform for developing applications and communicating between the client and the backend. Learn the basics of the Squid platform's powerful capabilities through a mock stock trading application.
Note

This full-stack app showcases Squid's extensive features and demonstrates how it empowers developers to build sophisticated and real-time applications. It is designed for people who prefer to have an overview first and then experience Squid hands-on by coding additional functionality into the app.

If you prefer to learn by quickly making something tangible yourself, dive right in to our introductory tutorial.

You can also follow along with the tutorial in this video:

Get started with Squid by exploring a sample stock trading application powered by Squid. This guide will provide instructions on how the application works and explain key areas where Squid can empower your own applications. As you run the project in your browser, read through the codebase as well to gain a better understanding of how Squid works.

Getting started

When you first sign up to join Squid through the Squid Console, you are greeted by a welcome page where you can choose one of two projects to build: a stock trading application or a chat widget.

Console Welcome

Click Build archer to build the stock portfolio app. From there, you are prompted to name your new application. Choose whatever name you want. Remember, this is a stock trading application, so you may want to name it something relevant to keep your projects organized.

Console Name App

Continue to the next step. Here, you see three commands to run in order to set up the sample application. To run the commands, first install the latest version of Node.js.

Copy the commands and run them in your terminal. This creates a new folder for the project's code in your current directory, so make sure you are in the right place to store your code.

Follow the steps from the console to automatically populate the initialization commands with the correct values.


Install the Squid CLI (If you see permission errors, please read npm's official guide)

npm install -g @squidcloud/cli

Initialize the Squid sample project

squid init-sample YOUR_APP_NAME --appId YOUR_APP_ID --apiKey YOUR_API_KEY --environmentId dev --squidDeveloperId YOUR_DEVELOPER_ID --region YOUR_REGION

Start the frontend and backend

cd YOUR_APP_NAME
squid start

After running the final command, your application will be up and running locally at http://localhost:5173/!

The sample app

This sample app is a simulation of a stock trading web application. Users are given an initial cash balance to purchase shares of stocks for their portfolio. As you are buying and selling stocks, Squid provides graphs and metrics that analyze your portfolio's performance over time.

There's plenty to explore in this Archer stock trading application! The functionality in this stock trading simulation provides examples of what you can do with Squid and why it is so valuable. Let's take a closer look...

Using the sample app

Stock trading is the primary focus of this application. You are given $100,000 to invest in whatever stocks you'd like. Once you have bought and sold stocks, you can run a simulation to see how your portfolio will perform over the span of a month.

You can change your portfolio and run the simulation as many times as you want. You can also click the Regenerate button to randomly give you a brand new portfolio.

Tooltips

Toggle the tooltips on in the top right in order to get more information on how the application was built. The tooltips provide instructions on how to use the application, explanations of Squid's principles, code samples, and more!

Real-time updates

One of the key advantages of Squid's platform is that it enables real-time updates with minimal setup. Just by using Squid, you get near-instant updates across clients. Test it out by opening the trading app in two different tabs:

Executables

The Regenerate button invokes a Squid backend executable to run data mutations in a transaction, performing multiple operations all at once. The mutations update the stocks you hold in your portfolio.

Queries

Squid retrieves the list of stock tickers and holdings in your portfolio by querying Squid's backend database in real-time. Learn more about Squid's powerful queries here.

Schedulers

Schedulers are a type of backend function that run at fixed time intervals. This sample app uses schedulers to modify stocks' prices and replicate the stock market's constant changes.

Next steps

There is even more to delve into in the Archer stock trading app! Make sure to try out all the functionality and read through the source code for examples of how Squid is used in a real implementation.

To learn the basics of using Squid, check out our Getting Started Tutorial, where you will make a simple stub project that implements the basic functionality of a database.

To find out more about all Squid has to offer, continue reading our documentation or check out one of our other tutorials.