CanvasLab is a full-stack web application that enables users to create, edit, store, and manage digital paintings directly in the browser. The system provides a RESTful API with authentication, persistent storage, and an interactive frontend built with the HTML5 Canvas API.
The application is designed as a data-centric system demonstrating full CRUD functionality, secure user authentication, and structured API design. It follows a layered backend architecture and includes automated testing and API documentation.
- User authentication using JSON Web Tokens (JWT)
- Create, read, update, and delete digital paintings
- Per-user data isolation
- Interactive drawing canvas (brush, eraser, color tools)
- Persistent storage using PostgreSQL
- RESTful API with proper HTTP methods and status codes
- Unit-tested business logic
- Interactive API documentation via Swagger (OpenAPI)
- Vanilla JavaScript
- HTML5 Canvas API
- CSS
- Node.js
- Express.js
- PostgreSQL
- JWT (authentication)
- bcrypt (password hashing)
- Jest (unit testing)
- Swagger (OpenAPI documentation)
- Git & GitHub (version control)
canvasLab/
│
├── server/
│ ├── controllers/ # HTTP layer (request/response handling)
│ ├── services/ # Business logic (testable layer)
│ ├── routes/ # API route definitions
│ ├── middleware/ # Authentication middleware
│ ├── config/ # Database and Swagger configuration
│ ├── tests/ # Unit tests (Jest)
│ └── server.js # Application entry point
│
├── src/ # Frontend logic
├── styles.css
└── README.md
Interactive API documentation is available via Swagger UI:
http://localhost:3000/api-docs
This interface allows:
- Exploring all endpoints
- Sending real HTTP requests
- Viewing request and response structures
- Testing authentication-protected routes
The API uses JWT-based authentication.
- User registers via
/auth/register - User logs in via
/auth/login - Server returns a JWT token
- Token must be included in subsequent requests:
Authorization: Bearer <token>
Protected routes require a valid token.
POST /auth/register— Register a new userPOST /auth/login— Authenticate user and receive JWT
GET /users— Retrieve all users (protected)GET /users/:id— Retrieve a specific user (protected)DELETE /users/:id— Delete a user (protected)
GET /paintings— Retrieve all paintings for the authenticated userGET /paintings/:id— Retrieve a specific paintingPOST /paintings— Create a new paintingPUT /paintings/:id— Update an existing paintingDELETE /paintings/:id— Delete a painting
git clone https://github.com/JavedanCode/canvasLab.git
cd canvasLab/server
npm install
Create a .env file inside /server:
DATABASE_URL=your_postgres_connection_string
JWT_SECRET=your_secret_key
npm run dev
The server will start at:
http://localhost:3000
Unit tests are implemented for all business logic using Jest.
Run tests with:
npm test
Tests cover:
- User service logic
- Authentication logic
- Painting service logic
- Edge cases and failure scenarios
-
Service Layer Architecture Business logic is separated from controllers to ensure clean structure and testability.
-
JWT Authentication Stateless authentication suitable for RESTful APIs.
-
PostgreSQL Reliable relational database with structured querying.
-
Swagger Integration Provides an explicit API contract and interactive testing interface.
- Image data is stored as Base64 (not optimized for large-scale systems)
- No pagination for large datasets
- No image compression implemented
- Backend hosted on free tier may experience cold starts
- Migrate image storage to cloud services (e.g., AWS S3, Cloudinary)
- Implement pagination and filtering
- Add image compression and optimization
- Improve UI/UX
- Introduce public gallery or sharing features
This project is licensed under the MIT License.