We started Snap Code with the intention of creating a tool that can help speed up the web development process with the help of the Mphasis Autocode WireframeToCode model. The idea is to allow developers to capture hand-drawn wireframes and quickly send them over to their development environment.

What it does

Snap Code is a web development tool that consists of a mobile app and a VS Code extension. It helps web developers speed up their prototyping process by transforming their handwritten user interface designs from a picture to valid HTML and CSS code. What makes Snap Code even better is that it allows you to quickly send your transformed code from your phone and straight to your development environment within a few seconds. The mobile app can capture a wireframe image, and send it to the WireframeToCode model which returns HTML and CSS code that is saved to a Dynamo DB database with the help of an API Gateway and a Lambda function. Developers can use a VS Code extension to import the code to their development environment. The following architecture diagram Illustrates the process.


How We built it

The project is made up of 3 components the mobile app, the vs-code extension, and the backend. The mobile was built with React Native I used Sagemaker runtime to call the wireframeToCode endpoint in the app. The vs-code extension was built with javascript I used the Webviews to create the UI.

Challenges We ran into

Initially, we started building the android app with Java and Android studio but we had a lot of issues with integrating the Sagemaker runtime with Java and the Android SDK that we decided to go with React Native which we had no problems with.

Accomplishments that We are proud of

We managed to build an awesome tool that could be the future of web development

What We learned

We learned a lot about the AWS Marketplace and Sagemaker.

What's next for Fast Prototyping

Add text recognition so that that app should be able to detect and save text from wireframe models.

Share this project: