How Middle Schoolers Became App Developers: Code Haven Project Fair 2018

Caitlin Westerfield
Code Haven
Published in
14 min readMay 20, 2018

--

By The Code Haven Board

On April 27, 2018, Code Haven held our first Computer Science Project Fair. At the fair, over 120 middle schoolers that we teach computer programming to each week converged at the Bishop Woods School’s gymnasium to present the apps they had been building in MIT App Inventor over the past few months. Represented were six classrooms of students from four New Haven schools: Bishop Woods School, Fair Haven School, Worthington Hooker School, and St. Martin de Porres Academy. Here is our story of why we did it, how it went, and our thoughts on how to improve the event in the future.

Code Haven mentor Sara Lewis helps Fair Haven students build their final projects.

Code Haven’s Background

In 2016, 6th grade teacher Dave Weinreb came into contact with Yale student Annie Chen and Dennis Duan because he was interested in teaching computer science to his ESL students at Fair Haven Middle School. He wanted his students to also have access to computer science courses that are often only available to a certain economically advantaged subset of students within the New Haven community. Dave contacted Nathaniel Granor who is a program manager for Microsoft TEALS — an organization that helps put computer science curriculum in high schools. While TEALS could not help Dave since his classroom was too young for the program, Nathaniel reached out to Annie and Dennis. They gathered a group of other Yale students together and started teaching in Dave’s classroom in Fall 2016.

One of the original mentors Jessica Ambrosio, founder Annie Chen, and Code Haven’s first teacher Dave Weinreb smiling at the project fair.

Now, two years later, Code Haven is an organization with 40 Yale student mentors who teach in six classrooms across four middle schools in New Haven. The now year-long curriculum was taught this year in MIT App Inventor — a software that allows students to use block-based programming to create their own Android apps. This provided students with the opportunity not only to learn programming fundamentals but also develop technically complicated projects in order to see the tangible effects of the concepts they were learning.

The first semester focused on a variety of computer science concepts such as the specifics of App Inventor, conditionals, loops, and cartesian coordinates, among others. The second semester zeroed in on project development. Each student developed a Quiz App about a topic of their own choosing. With the use of lists, randomization, and screen changing, these apps were not only conceptually advanced but also allowed for a wide variety of personalization by each student. The curriculum culminated in the project fair on April 27, when all students had the opportunity to present their apps to other Code Haven students and see just how much they had learned over the course of the year.

Why we did it

After the first year of Code Haven and watching the students grow both in their computer science abilities and love of programming, it was clear to Code Haven mentors that what was missing from the curriculum was an end goal for the middle schoolers to focus on. Students wanted a sense of finality, or the feeling that all of these weeks of programming lessons were building up to something. We also realized that these students were having trouble seeing how abstract computer science concepts on Code.org (which is the primary software we used during our first year of Code Haven) were applicable to the coding they heard about in the “real world” — like building apps and video games. Several weeks into our curriculum, we would still have students ask us whether we could teach them how to “hack the government.” We decided that if we wanted students to see themselves as coders by the end of our curriculum, we would need to prove to them that the concepts they were learning were the same as those used in professional computer science careers.

Students showing their apps to attendees, Code Haven mentors, and students from other classes.

This inspired the original curriculum directors Omid Rooholfada and Claire Gorman to switch from Code.org to MIT App Inventor in September, 2017, in the hopes of creating a curriculum for the 2017–2018 school year that was more project based than in the past. This would also allow students immediate gratification after learning a new concept. Rather than a course completion badge, now students could use Code Haven’s collection of android phones to immediately load their designs onto a phone and interact with what they had created. The first app students made was “Hello Purr,” which included a picture of a cat and a button that, when pressed, made a cat purring sound. Our students were so excited that for the last 10 minutes of our first class, the room echoed with a symphony of cat noises.

The idea for the project fair structure came from the annual CS50 fair. Started at Harvard and eventually expanding to Yale in Fall of 2015, CS50 is a project-based intro to computer programming course that ends with a final project fair. The one at Yale has more than 150 students enrolled, each of whom present in a science fair-esque setup the coding projects they have designed based on what they learned from the CS50 curriculum. Attendees also include many sponsor booths and individuals from both Yale and the broader community.

Students prepare to present their projects.

We decided to host a similar project fair for our middle schoolers using the apps they designed in App Inventor. Our goals were to:

  1. Show them that the concepts they were learning could be used to design real world projects and apps
  2. Prove to our students that they are part of a movement much bigger than just their one classroom by introducing them to the 120 other students in the Code Haven program
  3. Inspire them to continue learning about the potentials of computer science through engagement with interesting computer science applications on display at the Yale student groups and sponsor booths

Day Of

The day began at Bishop Woods Gymnasium at 8:30 as the Code Haven board and mentors arrived to begin setting up the tables and decorations. We had decided to split the gym into two sides: the student project side and the booths side. On the project side, we had 8 fold up tables that could each fit up to six student presenters on each side of the table. On the booths side of the gym, we had presentations from a variety of Yale student organizations including Intelligent Vehicles, Float (Yale’s Women in Computer Science Society), Yale Social Robotics Lab, YDriving, and Color Scout. We also had a booth from our sponsor Makeblock. The biggest hit by far, however, was the photo booth with crazy sunglasses and balloons for students to take pictures with.

A map of the set up of the gym

Classes began arriving at 10:15 and gathered on the booth side of the gym. We started the day with a kickoff presentation from the event directors Taylor Harris, Darwin Leuba, and Caitlin Westerfield, then divided up the students based on school. Each classroom was given a different colored name tag in order to facilitate movement throughout the day.

The day was split into two sessions. During Session 1, students from the two Bishop Woods School classrooms and students from the Fair Haven classroom presented their apps. After a break for a pizza lunch funded by TSAI City, Session 2 began with presenters from the two Worthington Hooker classrooms and from St. Martin de Porres. Within each session, we also split the groups not presenting in half so that at any given time there was a set of students looking at the Yale and sponsor booths while the other set was looking at the projects designed by their peers. In the end, each student had:

  • 50 minutes to present their app
  • 25 minutes to look at other student apps
  • 25 minutes to look at Yale and sponsor booths.
L: Students check out the YDriving booth led by Omid Rooholfada. R: Students experiment with MBots at the Makeblock booth.

One worry we had prior to the event was that students would not be interested in looking at each other’s apps. Although parents and community members were invited, since the event was planned during the workday we were not expecting a large number of non-student attendees. For this reason, we worried that if there was no incentive for students to visit other students’ apps, presenters would end up standing at their tables for 50 minutes with nothing to do.

We combatted this by using a prizes system. Each student looking at the booths was given a sticker book with pages that included information about important computer scientists and spots to place stickers. Meanwhile each presenter was given a packet of stickers. For each quiz app presentation that a student visited and interacted with, the presenter would put a sticker onto the sticker book. Based on the number of stickers, students earned specific levels of prizes such as Facebook stickers, notebooks, or pens, or Google water bottles. If students filled out all five pages, they got to pick from a surprise swag bag as well.

One page from the sticker book handed out to students as a method for collecting prizes
L: Code Haven mentors Kenny Lam and Nathan Lin hand out prizes to students. R: Students collect stickers by visiting projects.

We finished off the day with a closing ceremony. We raffled off Code Haven shirts and Google water bottles to students using a random number generator code written by Annie. Then, to the excitement of the middle school teachers, we raffled off items from sponsors to each classroom including a Piper Kit, two Ozobot kits, a Makey Makey kit, three MBots by Makeblock, and a Littlebits kit.

Teacher Cheryl Canino from Bishop Woods School wins three MBots for her classroom in the raffle.

The day ended with closing remarks from our current presidents Sanya Nijhawan and Omid Rooholfada who reminded the students that “you can indeed code.” As students filed out after their teachers carrying Code Haven tote bags filled with swag, cardboard robots they had gotten from the Makeblock booth, and faces covered in smiley face stickers, we watched knowing that Code Haven, and all of the work that had gone into this organization, had truly made an impact in the lives of these amazing kids.

The 2017–2018 Code Haven students

Improvements for Next Year

In many ways this event was a huge success since, according to feedback from their teachers, the students had fun and were excited about computer science at the end of the day. However, since this was the first year of the event, there are several aspects of the event that we now realize need to be improved for the future 2018–2019 school year project fair.

Planning

While the events committee started out with many ideas for what we wanted the fair to look like, one aspect we struggled with was our specific goal. We knew we wanted to get our students excited about computer science by giving them a fun day to present their creations and see what other people had made, however how exactly to structure the day around that very general goal took months to flesh out. For this reason, we had trouble deciding on an official schedule or determining which sponsors to reach out to until much later in the planning process than we should have. Next year, we hope our experience at this year’s fair and seeing what parts of the day the students did or did not enjoy will help us narrow our mission earlier so that our planning process will be more streamlined and will better tailor itself towards achieving this goal.

Combined Booths

One worry we had while planning was that if students were given the choice between looking at a sponsor booth or a student app, they would always choose the sponsor booth. To prevent the possibility of students not looking at each other’s apps and only looking at the sponsor booths, we decided to split the gym in half and require students to spend half their time on each side. However, to our happy surprise, the students loved spending time looking at other apps. We had trouble in the second session getting students to go over to the sponsor booth side at all. Not to mention, the sponsor booth side felt empty most of the time since the majority of the students were on the other side looking at student apps and the organizers spent a lot of time trying to corral students to get them to switch sides. Thus, for next year we plan to not have two sides to the fair. Instead, we will allow students to visit sponsor booths and student booths simultaneously by making the event just one giant fair.

This will also allow us to shorten the project fair. By the end of the day, students were beginning to lose interest and thus it became more difficult to keep them exhibiting good behavior. If we did not have to siphon off time for students to visit both sides of the fair, we could make the sessions shorter and keep the students focused for the entire day.

Project Variety

While less of a focus of the project fair and more of a focus of Code Haven’s curriculum team, one piece of the project fair we want to change for next year is the amount of variety among the projects that students create and present at the fair. This year, all students made quiz apps. While they were able to make them on whatever topic they chose and were able to customize them in particular ways (such as multiple-choice versus write-in answers or text versus picture questions) there was still essentially only one type of project represented at the fair.

Next year, we hope to allow for a bit more creativity for the student projects. While this is an endeavor that will inevitably take a great deal of thought considering the time constraints we have for both teaching the students and building projects, we hope that the added room for creativity will be exciting for the students and will make the student app side of the project fair even more fun for the student attendees.

Code Haven students pose at the photo booth.

Events 2017–2018: A Personal Reflection

By Caitlin Westerfield

The 2017–2018 Code Haven mentors

Last December, Code Haven hosted its first big event called TeachTech — a conference aimed at K-8 teachers who were interested in incorporating computer science concepts into their curriculum. Sanya and I had the privilege to not only be able to plan this event, but also to begin the process of shaping the purpose of Code Haven Events. Along with the help of the Fall 2017 Code Haven Board, through this event we were able to start expanding Code Haven’s influence beyond individual classrooms and give our organization a larger meaning both for students and for teachers in the community.

As the Fall 2017 semester came to a close, the two of us sat down to reflect on how a semester of event planning went. Since neither of us had ever put on a conference before, we had truly jumped in heads first with very little plan for what we were doing or what to expect. We had no idea whether any teacher would want to come to a conference led by a group of college students, and everything from our sponsors to our schedule was in flux until the final week before the event. At our post-event meeting, we collectively breathed a sigh of relief that the event had gone smoothly and received positive feedback. Even after a semester full of sleepless nights consisting of making spreadsheets and sending emails, it took until after the event was over for us to realize the potential for impact that Code Haven and Code Haven’s events had on the New Haven community and the future of computer science education. While I cannot speak for Sanya, I know that I now consider the planning of the first TeachTech to be one of my proudest accomplishments.

But we also sat at that meeting all the way back in December looking at our pages and pages of post-event analysis notes feeling overwhelmed by the task ahead of planning the Code Haven Project Fair. With more than triple the number of attendees — most of whom were going to be your typical rowdy middle school students — the fair was destined to be more work than we could possibly wrap our heads around. Yet we also sat there ready to take on the task ahead, still buzzing from the excitement of our first event and knowing that we had the potential to create something truly amazing.

L: Juniors and Founders Annie Chen, Dennis Duan, and Ellis Burgoon Miskell. C: Events Directors Darwin Leuba, Taylor Harris, and Caitlin Westerfield. R: Presidents Sanya Nijhawan and Omid Rooholfada

At the beginning of 2018, Sanya and Omid took on the roles of Code Haven Presidents and I was joined on the Events Committee by two of the most extraordinary people I have ever worked with. Taylor and Darwin entered Code Haven Board and immediately jumped into planning mode. While Darwin tackled finances, purchases, and set up, Taylor took over all communications with Bishop Woods School and kept us on top of our work recruiting sponsors. Although our meetings always went over time, Slack messages would buzz until the early hours of the morning, and our folder of logistical documents grew exponentially, these two people worked tirelessly to create a day that was truly magical for our students. I am so lucky to have been able to work with them and bring our shared vision into realization together.

As the year comes to a close and I move full-time to the curriculum team with Daniel Urke, I am beyond excited to see what is to come as Taylor takes over mentor management and Darwin is joined by Stephanie Bang to lead events into the next year. If this year has taught me anything else, it is that Code Haven truly has the potential to make lasting changes in the lives of students and teachers in the New Haven community. With people as inspiring as the ones on Code Haven Board, there is no doubt in my mind that this work will continue not only into next year, but for many years after.

The Spring 2018 Code Haven Board

The Code Haven Project Fair was run by Code Haven’s Spring 2018 board, which included Ellis Burgoon Miskell, Annie Chen, Dennis Duan, Taylor Harris, Amanda Lee, Darwin Leuba, Sanya Nijhawan, Omid Rooholfada, Daniel Urke, and Caitlin Westerfield. It was directed by Taylor Harris, Darwin Leuba, and Caitlin Westerfield.

We’d especially like to thank:

  • YDriving, Float Yale, Intelligent Vehicles, Aditi Ramachandran representing the Yale Social Robotics Lab, Color Scout, and Makeblock for running booths during the fair.
  • Cheryl Canino, James Colon, Caitlin Healey, Timothy Shortt, and Dave Weinreb for allowing us to teach in their classrooms throughout this year.
  • Cara Campo, Jamie Sirico, and Bishop Woods School for agreeing to host the Project Fair and assisting with planning.
  • The incredible Code Haven mentors for their endless enthusiasm about computer science and teaching, as well as their hard work during the fair.
  • Dave Weinreb, Nathaniel Granor, Claudia Merson, Maria Parente, Dana Angluin, and Emmanuel Schanzer for their wisdom and advice.

The Code Haven Project Fair was sponsored and supported by Makeblock, Ozobot, Piper, littleBits, Makey Makey, Facebook, Google, TSAI City, and Yale School of Engineering and Applied Science.

Code Haven is a Yale student organization that teaches New Haven middle school students introductory computer science and coding. Every week, Code Haven mentors teach computing lessons at several schools in the New Haven district, engaging the students with online lessons, group activities, and class-wide demonstrations. This year, we are using MIT App Inventor to teach in 6 classrooms across 4 schools, reaching over 120 students.

Contact us at codehavenyale@gmail.com

--

--