Inspiration
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.
Log in or sign up for Devpost to join the conversation.