Learning Management System for p5.js

Learning Management System for p5.js

Platform for teaching p5.js with exercises, user accounts, code saving and previewing

April 2021
TypeScriptp5.jsNode.jsReactGraphQLApolloExpressPostgreSQL

Project Overview

Following my coding camp in 2020, I developed a full-stack application to create an online platform for teaching p5.js. This project served as a learning experience in GraphQL, Apollo, and PostgreSQL.

Key Features

  1. User account creation and authentication
  2. Interactive "Exercises" or problems, including:
    • iframe p5.js preview window
    • Console with error logging
    • Instructions article using markdown
    • Code editor using codemirror
  3. Data storage in PostgreSQL database
  4. "Starting code" provision for new exercises
  5. Stripe integration for user creation process

Technical Implementation

  • Frontend: React with TypeScript
  • Backend: Node.js with Express
  • Database: PostgreSQL
  • API: GraphQL with Apollo
  • ORM: TypeORM for database access
  • Payment: Stripe integration

Learning Outcomes

This project provided valuable experience in:

  • Structuring a larger schema for data transmission between client and server
  • Using Apollo and GraphQL for efficient data transfer
  • Deploying a full-stack app using Docker and AWS

Screenshots

An exercise
An exercise
Example of an exercise page with code editor and preview

An error in the code
An error in the code
Error logging in the console

Menu of the app
Menu of the app
Main menu of the application

Future Improvements

  • Implement real-time collaboration features
  • Add more interactive coding challenges
  • Develop a mobile app version
GitHubView on GitHub