background with someone typing

Full Stack Senior Project

"ProgramShowcase"

2017-2018

overview

The programs that someone might code as a programming beginner can have interesting visual outputs. Python is a popular language that is used to teach programming. It's libraries be used to create fun programs with colorful or dynamic visuals. However, Python requires some knowledge of a terminal/console to execute a program which is not a common skill. Unless you code often, it's a skill that not everyone has.

Dr. Filip Jagodzinski, a computer science faculty member, teaches a summer coding camp. He challenged my team to find a way to allow his students to share their first programs with their family/friends who have little to no coding experience.

laptop with project on screen
TECHNOLOGIES USED
node.js logonode.js logomongodb logonginx logo

Proposed solution

We decided that a possible solution to this problem was to create a public site where programmers could execute their programs through the site directly. We would develop a space where they can upload directly onto the site without access to the program's source code once uploaded. To provide users with this feature we knew incorporating an emulator would be necessary.


My Role

The "Program Showcase" team comprised of 3 members. A member focused on the back end, another focused on designing and connecting the database and someone focused on the front end. I took on responsiblity for the front end functionality such as:

UI Design and Responsiveness (HTML/CSS/Bootstrap) User forms and error handling (JavaScript) Understanting back end functionality to correctly manage data on front end. Organize tasks using Trello Collaborating remotely with team using Git (branches).

I also wrote and organized project documentation such as project scope, requirements, and a user manual for future teams to take over and continue to implement new features.

person coding in front of three screens

Challenges

The biggest challenge overall was learning new technologies. Our courses had been heavily focused on backend development, therefore, adapting to front-end tools such as Node.js and JavaScript was difficult for all team members. This learning curve also made it difficult for us to decide on a stack. However, after researching tools and assigning roles, we each focused on one area of the project sand set up Trello to organize our tasks, and created individual branches to better manage our source code.

As the front-end developer for my team, I was involved in all stages of the project, from creating our site’s UI design and integrating ideas from my team members to understanding how back-end development worked to efficiently develop front-end features. It was a challenge to code in a new language such as Javascript but was able to implement the required front-end features along with HTML/CSS, and Bootstrap. It was also challenging to document how my features were implemented for my team members to quickly understand for their implementation but I adapted to technical writing and making sure all documentation was clear and concise.


Outcome

After a year of working as a team, we successfully turned in the first version of this project. We were able to implement the main features which included: creating an account, uploading a Python program, executing a program on the emulator, searching for a user's project by title, and signing in/out. I also incorporated other features like logging out/tracking user sessions that felt necessary for the first version of this project.

Finally, we presented our project to the computer science department of WWU. We gave a demo and explained its overall purpose. We also received positive feedback that we were able to document for the team creating future versions.