Inspiration
A lot of college students get told to draw something, for a class or a project. A lot of them get discouraged fast, and some hand the whole thing to an AI instead.
We wanted a way in that doesn't start from a blank page. You photograph a real place and draw over it. If you can't picture how something looks, a reference panel shows you, with the source and license right next to the canvas. It's for the student who got stuck, for the person who's curious about drawing but doesn't know where to start, and for artists who want to sharpen their work, learn from references and share it.
The place part is the other half. Most art platforms are built around feeds, profiles and followers. A street corner, a building or a park looks different depending on who's looking, and we wanted those versions to stay attached to the place instead of vanishing into a scroll.
The name is the old painters' word for the reddish underdrawing sketched on a wall before a fresco goes over it. Our line for the whole project is Same wall. Different eyes.
What it does
Sinopia lets you photograph a real place and draw your own version straight over it. Sketches, colors, layers. The original photo never changes. When you're unsure how something looks, the reference panel searches openly licensed images and shows each one's source and license beside your canvas.
A finished drawing becomes a Fresco, and from there you can:
- Keep it private in your Sketchbook
- Publish it to your own Sinopia, an interactive globe of your work
- Show your exact location or only your neighborhood
- Open other artists' Sinopias and explore their globes
- Drag the Reality ↔ Drawing slider to compare the artwork with the original place
- Use Same Wall to find other artworks made at the same spot
- See street-level imagery beside the artwork when it exists, plus the weather captured with it
- Report inappropriate content before or after publishing
How we built it
Sinopia is a responsive Progressive Web App in TypeScript, React and Vite. Drawing runs on Konva and Perfect Freehand. Supabase covers authentication, storage and geospatial data, using Postgres, PostGIS and Row Level Security.
The globe and maps use MapLibre GL JS with OpenFreeMap and OpenStreetMap data. Geocoding goes through Nominatim and Photon, reference images come from Openverse, and street-level imagery comes from Mapillary with Panoramax as a fallback. Open-Meteo supplies historical weather for each capture, and nsfwjs with TensorFlow.js runs a safety check in the browser before anything is published. It's hosted on Vercel.
Privacy shaped the data model. A fresco's exact location is stored separately from its public location, and the artist picks which one gets published. EXIF metadata, GPS included, is stripped before upload. The platform gives you the place and the tools. The interpretation belongs to whoever drew it.
Challenges we ran into
Every piece worked on its own. Capture, drawing, geolocation, maps, a 3D globe, reference images, street-level imagery, weather, moderation, privacy: these normally live in separate apps, and making them feel like one product was one of our biggest challenges.
Location was the sharpest edge. It's central to Sinopia and it's also a privacy risk. So the exact spot and the public spot are separate in how the data is stored, not just a warning in the UI.
Free services pushed back too: limits on image storage and bandwidth, patchy street-level coverage, third-party API availability. We had to work around all of it.
The globe also had to earn its place. We wanted it to say that every artist has their own world, with shared places connecting those worlds.
Accomplishments that we're proud of
Sinopia is deployed and working. It's a live app, not a concept or a mockup.
A photo becomes an artwork, the artwork becomes a point on a personal globe, and that point connects to other artists who drew the same place. We're proudest of the Reality ↔ Drawing slider: drag it and the real place and the artist's version sit against each other. Same Wall changes the question from "who posted this?" to "who else saw this place?"
The privacy model is the third one. Exact and public locations are separate, so the artist decides how much of where they stood becomes part of the artwork.
What we learned
Making the drawing tools work was only part of it. The harder part was defining how the artist, the artwork and the place relate to each other.
Once location is in a product, privacy, geospatial queries, metadata handling, map services, image storage and API reliability stop being technical details and become product decisions. We learned to design around the limits of free services instead of assuming they'd behave. We also learned a product gets more interesting when every feature points at the same idea. For us that was same wall, different eyes.
What's next for Sinopia
We want Sinopia to become a living visual history of places.
- Draw This Wall: respond to another artist's fresco at the same place, with both works credited separately
- Place Timelines: see how one location has been interpreted across dates and years
- Sketch Missions: creative prompts tied to places
- Collaborative Frescos: several artists contributing independently to one shared location-based artwork
Sinopia TEAM:
Ian Patrick A. Flores — Team Lead
Jace Matthew M. Catriz
Joey T. Cuison
Mary Princess Angel L. Dizon
Mark Jemiel P. Guevarra
Eiko G. Yaiki
Built With
- freehand
- gl
- javascript
- konva
- mapillary
- maplibre
- nominatim
- open-meteo
- openstreetmap
- openverse
- panoramax
- perfect
- pglite
- photon
- playwright
- postgis
- postgresql
- progressive
- react
- security
- supabase
- tensorflow.js
- typescript
- vite
- vitest
Log in or sign up for Devpost to join the conversation.