On Show

Scott Carey

I am a hard working 22-year-old individual with a great passion for Web, API and Software Development. From a very young age I have always striven to understand how things work. I approach any challenge presented to me with a positive attitude and keen eye for thinking outside the box to figure out the best and most elegant solution. I work well as an individual or as part of a team and I'm a friendly and outgoing individual and commit to high productivity and quality in everything that I do.

This video demonstrates the functionality of this application. It also contains a brief discussion of the technologies used throughout the development of the application and details the steps to submitting an image for object detection.

The application's design adopted a ‘clean and simple’ approach, which was kept as the common theme throughout the front end by leaving little opportunity for mis-clicking and included clearly labelled buttons to ensure a simple UI.

A user can create projects through the front end. A project can hold an array of components. Once a project or component creation is completed, the form data is stored. During the component creation process, a user uploads an image blob to Azure Storage. An image must be uploaded to storage for prediction to be able to occur.

The application's back-end uses an object detection model to detect hand-drawn HTML compatible elements. A prediction is made based on the sketch uploaded, which is then interpreted by the positioning algorithm in order for the frontend to display the code, taking advantage of a 12 column CSS grid system. The code is then created by the code generation algorithm which creates and uploads a HTML file of reflecting the inputted wireframe sketch.

The front-end of this application handles and fully automates the uploading and downloading of blobs from the Azure storage account and the creation and modification of projects and components. An in-browser IDE is incorporated to allow the user to edit their code as soon as it is generated.

Project Description

Very few people see themselves programming but this application allows anyone to start coding. Inputs from rough-drawn paper or soft copy images are converted to a working website in seconds. However, by also including an IDE (Integrated Development Environment), the application provides the raw programming code that an experienced developer can use as a baseline for further development e.g. a more advanced website or integration into an existing application or project.

Implementation + Technologies

This project required a number of different areas of expertise and provided a rich learning opportunity to acquire skills relevant to today’s digital and multimedia world. The main focus has been on learning and using Microsoft Azure Cognitive Services, Storage Blob system, and new CosmosDB database. It incorporates all of these new technologies into integrated JavaScript back and front-ends.
All the technologies used were learned outside of current course scope. By including these technologies and also increasing understanding on use of React.js, Express.js and NodeJS, bringing the conceptual design to life has been a very rewarding learning experience on software research, design, and implementation.
It has also given me great insight into working Agile project management methodology. I feel that I have extended my software development competencies right across this project.

2021 2022 2023 2024

All coursesClose

Top