jake desantis

welcome.

welcometospace.app

this was an ambitious project that allowed me to experiment with stack engineering for the purpose it was trying to fulfill.

the problem

effort and direct focus compounds when someone is trying to stay in the moment.

the solution

the cameraman is a role. space tries to solve this by containerizing the editing process into similar video capturing habits, in such a way that the automation can be fed into a pipeline.

in plain english: space makes anyone the cameraman by making any device capable of recording a small clip, where the full movie can be viewed back in full. some example use cases are a family vacation or a night out with friends.

screenshot — creating a video (space-create.png)
creating a video — set a name, your hosting window, and an optional location.

how to use

sign up and create a new video — this makes you the video host for up to the next 48 hours. you can end the video before then, so you can save those hours for a later video. you can add people to the video using a shareable link, or they can scan the qr-code.

all participants can begin recording clips, which are stored chronologically for the final result to be played back once the video hosting is turned off.

screenshot — share via link / qr-code (space-qr.png)
add people with a shareable link or qr-code.
screenshot — the capture / recording view (space-record.png)
the capture view — hold the button to record a clip.

how i built it, and how it works

space is a very simple frontend, and the capturing tool is a media recording service. you can record a clip up to 20 seconds, which uploads to the backend, as do all clips contained in the same video.

the backend uploads first to the database until the video recording duration is over. once the video hosting is ended, the clips are automatically sent to AWS MediaConvert for stitching. once completed, the final video can be viewed in full. you can also save the video in parts.

screenshot — playback (space-playback.png)
playback — watch the stitched video back in full, or save it in parts.

some design choices

rounded corners — i wanted each button to resemble something more like a cloud or a galaxy, which is why everything is pill-shaped for the ux.

the original backsplash was plain black, but i then chose to go with something more inspired — the color eigengrau, described by scientists as the visual darkness seen by the human eye. you can almost see the same color when you close your eyes in a dimly lit room. eigengrau was chosen because the memories are through the lens of the camera, and visually all around it — our eyes might be closed to it.

on aws

aws is being used because it was the easiest to get running for the scale that space is at — the video quality suffers a bit, only because sending HEVC video is costly. the goal was to get space to work from anywhere, which has been achieved. the long-term strategy is to bring a more evolved version of this to fit a higher market demand down the line.

demo

a couple of weeks ago, a friend of mine was performing a dj set (as one does in their 20s). inspired by his ambition, i decided to get involved in the scene — but i didn't have $4,000 to spend on a deck and monitors.

the problem

i ended up looking into two different problems. first, there is the learning curve of software that was created from traditional coding practices, which is why people lean towards hardware.

i personally believe that unless one is trying to achieve the raw, analog sound of a Juno synthesizer or a 909, there is no other reason for hardware equipment. i also believe that software is still too bloated.

the thesis

the thesis became FREExTYLE, where the controls are literally only on the page if you need them.

how i built it

FREExTYLE uses React and Next on the frontend because it is the most productive way to develop new UX concepts that will shape the future of web-based applications.

see it in action

a few lines about you go here.

elsewhere

mynameis@jakedesantis.com

* for repo access, email me at mynameis@jakedesantis.com