dpinones / starklings-app

Starklings App

A web interactive tutorial to start learning Cairo and Starknet.

About

Starklings App is a web interactive platform designed to help users kickstart their journey into learning Cairo. This platform is based on Starklings exercises, considered essential for those taking their first steps in understanding Cairo.

Our goal is to simplify the Starklings experience by getting rid of complex configurations and installations. Just access the app on a browser and start coding.

Components

Backend

The backend of the Starklings App is responsible for handling data processing and interactions with the Starknet exercises. Follow these steps to set up and run the backend:

cd api/

Install dependencies:

npm i

Run the development server:

npm run dev

Frontend

The frontend is the user interface of the Starklings App, providing an interactive environment for users to engage with Cairo exercises. To get the frontend up and running, follow these steps:

cd client/

Install dependencies:

npm i

Launch the development server:

npm run start

starklings-app's Issues

Add Dockerfile

Create a Dockerfile with the following:

• NodeJS and npm
• Rust
• Scarb
• Copy and launch the API
• Expose the API

start from where you left off

save a currentExercise variable on local storage, so when a user closes the browser and opens it again, he can start from where he left off
add a start over button

complete Home screen

add data about the project, link github, about, etc

create about modal

instead of showing the github button all the time in the navbar, show a ? icon that opens up a modal with more info about the project and the link to github

Add endpoint for completed exercises by user

Add an endpoint that returns a list of completed exercises

Compile cairo code

When compile button is pressed in the workspace, the cairo code should be compiled
if it succeeds, show a success notification, if not show an error notification

update theme colors

use nextExercise prop

create twitter account 'starklings.app'

create a final page where user can see what exercises are missing

React app basic setup

configure the react app so it has

• Routing
• use TS
• use MUI
• move current version to a POC component in a /poc route
• API integration using react query:
  • /groups (https://run.mocky.io/v3/0d9261be-5605-47ef-ace2-cc1d5f4931b0)
  • /exercises (https://run.mocky.io/v3/3fb874b9-688e-4e60-9a1c-c039ab1e8306)
  • /exercises/{exerciseName}
    • intro1: https://run.mocky.io/v3/c7db65b2-7953-4958-a62c-0031973717f4
    • intro2: https://run.mocky.io/v3/0076602c-4d8c-49b1-9331-ba1e68e402ef
    • variables1: https://run.mocky.io/v3/311ff612-77fa-4305-b7aa-6174bad01195
• A basic home (fancy visuals to be applied later) with starklings title that call groups and exercises and show them in screen

Add endpoint `scarb/build`

This endpoint should receive the user and the code. It should check if a folder exists for this user. If not, execute scarb new user. Now it should run scarb build inside this folder and return the result of this command.

add error handling

Create endpoint resolver exercise

This endpoint should receive: user, exercise id, and code. Depending on the exercise, it should execute scarb build or scarb test.

register domains

register starklings.com and starklings.app

exercises start at line 0

add button to reset code

add navegability sidebar

Set Scarb Version

In the Dockerfile, set the version of Scarb to v2.3.0. This version is used by the exercises.

add username for compile requests

username should be wallet in case there's a wallet connected, or a random string
in the second case, store the username in localStorage to use always the same value

Deploy the API with Docker

On Render or another hosting service, deploy the Docker containing the API.

add a final screen after user completes last exercise

make workspace panels resizable

user can drag and resize panels on workspace

Create Resolutions table

Create the resolutions table with the following schema.

CREATE TABLE Resolutions (
    id SERIAL PRIMARY KEY,
    user_name VARCHAR(255),
    exercise_id VARCHAR(255) REFERENCES Exercises(id),
    resolution_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UNIQUE (user_name, exercise_id)
);

Additionally, when an exercise is completed, it should be saved in this table.

Add Logic Endpoints

Add logic to the endpoints:

• /api/exercises
• /api/exercises/:id
• /api/groups
• /api/groups/:id

Ensure that the requests match the mocks.

Also add a first version of the Cairo Code parser. Include making GET requests to the Starklings repository with Axios

API basic setup

Create an API with NodeJS. That includes:

• Routers
• Controllers
• Connection to a PostgreSQL database

Add get hint functionality

Add a 'GET HINT' button in the action bar
on click, call the get hint API and show it as a (closable?) info alert in the left panel

Action bar should be always visible

Right now, when there is too much content in the left panel, you need to scroll down to see the action bar where the compile/next buttons live.

That bar should be always visible at the bottom of the left panel. If there's too much content, everything else should scroll.

add api call to match user with wallet on connect wallet

Add match endpoint

A person can complete exercises without connecting their wallet. Now, if they complete several exercises and want to save their progress, they will connect their wallet. Create an endpoint to address this.

connect to wallet

compile in backend

Show a warning when the user tries to access the workspace on a small screen

Add endpoint `scarb/test`

This endpoint should receive the user and the code. It should check if a folder exists for this user. If not, execute scarb new user. Now it should run scarb test inside this folder and return the result of this command.

add a spinner to indicate the workspace is compiling

user should be 'w' + complete wallet when compiling

Modify project structure

Create the api and client folders at the root of the project and move the files from the root to the client folder

navegability between exercises

add a skip button and a previous exercise button

make code font size bigger

Add Hint Endpoint

Add the endpoint /api/exercises/:id/hint. Based on the exercise id, it should retrieve the hint by consulting the info.toml in Starklings

Add cairo-test to Cairo WASM

Modify Cairo WASM to allow running tests. Repository: https://github.com/cryptonerdcn/wasm-cairo

Create a Script for the DB

Develop an SQL script that does the following:

• Create the tables Exercises, Groups, and Modes.
• Perform the inserts into these tables. For the Groups and Modes tables, extract the information from Starklings

Deploy the project on Render

• Deploy the frontend and the backend on separate instances
• Create a PostgreSQL database
• Perform an end-to-end test

Create new home

disable test exercises

There are some exercises that are of type 'demo'
We don't support those exercises yet
Show a warning message and enable next button on those exercises

Create workspace to complete a starklings exercise

create workspace that contains:

• a space in the left where we can put the description of the exercise
• an IDE in the right where the user can code
• a button to compile the code in the right bottom

place this in a route /exercises/{exerciseName}

this page gets the exerciseName from the URL and makes the API call to get the exercise data and fill the components with it

when the GET /exercises call is loading on the home screen, the start coding button doesn't work

add link to cairo docs

wallet should stay connected after refreshing