Pixels - Learn Programming through Pixel Art

Pixels is an interactive learning platform that aims to teach highschool students programming by allowing them to create pixel art on a canvas using any programming language.

Introduction

Pixels introduces students to the exciting world of programming by enabling them to create and manipulate pixel art simple through writing code in any programming language. Learners can develop their programming skills, as well as their creativity and problem-solving abilities.

Features

• Interactive canvas for creating pixel art
• Simple API calls for placing and manipulating pixels
• Real-time updates for a collaborative experience

Prerequisites

• Node.js >=18.x
• pnpm >=8.x
• Docker >=23.x

Development

1. Clone the repository:

git clone https://github.com/pixelcorp-nl/canvas.edu.git
cd canvas.edu

2. Set up environment variables

cp frontend/.env-example frontend/.env
# by default you don't have to change anything in the .env file

3. Start dependencies (database, etc.)

make start-deps

4. Start the development server

cd frontend
pnpm install
pnpm run dev

5. Pixels is ready at http://localhost:5173

Code structure

The project consists of 3 parts:

1. frontend - The frontend of the application, built with SvelteKit
2. redis - The Redis database for storing pixel data
3. postgres - The Postgres database for storing user data and other information

If you break the database(s), you can clear them by:

# cd to the root of the project
make nuke-postgres # if you want to clear the postgres database
make nuke-redis # if you want to clear the redis database
make nuke-all # if you want to clear both databases

Pixels is released under the MIT License