Inspiration
Would like to retrace your steps after coding? What about recording your coding session and seeing it replayed exactly as you typed everything? Or creating a coding tutorial where viewers can feel more engaged because they can directly interact with your code? I thought of these questions and more. I also recalled some experiences I had with interactive media. Asciinema, for instance, lets you record terminal sessions.
What it does
Ace Recorder simply lets you record a coding session and play it back. You can upload the recording publicly as well. One major advantage, I feel, would be for those making coding tutorials. Github links can be provided, but a recorder like this could be used to create a tutorial that viewers would be highly engaged with. Viewers can modify and re-run the recorded code, and continue watching the session all in the same place.
How I built it
This was built using HTML, CSS, Javascript, Python and Flask. I also used Google Cloud libraries.
Challenges I ran into
I hadn't really worked on media with Javascript before, so this was a first. Transferring files, cross-origin and other security issues showed up as well. But at least the project is presentable at this stage.
Accomplishments that we're proud of
I'm happy with the current state of the project. In fact, I think it is really cool. I'm proud of the things I learned as well. This was a long problem-solving experience.
What I learned
i learned a lot of things about using Python/Flask with Javascript, from same-origin vs cross-origin, Flask/Jinja template rendering, Python scope and others.
What's next for Ace Recorder
Beautifying it -- it's not the prettiest site now, but it will be better. Also making some refinements to increase efficiency, adding user accounts and video explorer.
Log in or sign up for Devpost to join the conversation.