Academic project | 2024
Picasso 1.0 Web Platform
Full-stack drawing app with React canvas tools, account authentication, and email sharing for created artwork.
Role
Full-stack contributor (canvas interactions, auth flow, API integration, and setup hardening)
Stack
ReactNode.jsExpressMongoDB AtlasREST APIsJWTMaterial UINodemailer
Problem
Create a browser-based drawing experience that stays responsive while also supporting user signup/login and simple sharing workflows.
Local source folder: picasso-main/Picasso-EllipseEtRectangle
Architecture / System Design
- - React frontend with route-based pages (`/`, `/signup`, `/login`) and a canvas editor composed of tool-specific components.
- - Express backend exposing auth and utility endpoints (`POST /register`, `POST /login`, `POST /send-email`).
- - MongoDB Atlas persistence for user accounts via Mongoose; passwords are hashed with bcrypt before storage.
- - Environment-driven configuration for frontend API base URL and backend secrets/origins to support local/dev deployments.
Engineering Choices
- - Implemented mode-based canvas tooling (brush, eraser, rectangle, ellipse) with dedicated components for cleaner event handling.
- - Used snapshot + preview rendering (`getImageData`/`putImageData`) so rectangle/ellipse shapes can be positioned before commit.
- - Kept account flow simple with bcrypt password hashing and JWT issuance on successful login.
- - Used `canvas.toDataURL()` plus a backend mail endpoint to support one-click sharing.
- - Removed hardcoded backend URLs/credentials and introduced `.env.example` files for reproducible setup.
Challenges
- - Coordinating pointer events so freehand drawing and shape-preview interactions do not conflict.
- - Keeping UX simple while adding authentication and backend integration.
- - Making the project easy for external users to run without leaking credentials.
Results / Lessons Learned
- - Delivered a usable drawing app with brush/eraser, rectangle/ellipse tools, color and size controls, and canvas reset.
- - Implemented signup/login backed by MongoDB and bcrypt-hashed credentials.
- - Published a frontend-only Vercel demo so users can immediately test the drawing experience.
- - Made onboarding clearer for new users/developers through environment-based config and updated run documentation.
Screenshots
