I'm a mentor for Project AWESOME and through this clue, I help my protégés in coding and succeeding in the future by helping. They have never developed a website before so as a mentor/protégé activity, I thought we should all join the hackathon at HACK UCSC this year as a team and make our own website. As a group, we discussed what we wanted on the website and which category to be in (which we chose innovation category). For the entire month, I prepared my girls by going over basic HTML, CSS, and JavaScript code so they would understand these concepts better before tackling our project for the hackathon.

What it does

Our website connects students together by locating places on campus where he or she needs to go to on campus, showing weekly events on campus that the student could go to if interested, shows who is in the student's class in case they want to know who their classmates are in class, and sharing the students photos taken on campus for other people to see the beauty of our campus and possibly win best picture of the week by students liking their favorite pictures on our campus.

How we built it

We built our website by scratch with HTML, CSS, and JavaScript. Any code we didn't understand we would look up on W3 school website, stackoverflow, and other websites that would allow us to use their code as well as OpenSouce code. To make the map for our website, we used the Google Map API and made sure to register to use the map for our website.

We would preview our website by using the software called Brackets that offers a live preview of our website without publishing it for the public. This tool was quite useful in teaching my protégés how to understand HTML, CSS, and JavaScript. During the hackathon, it was extremely useful to use since my protégés have very little to no experience with GitHub and to make sure there were no merging conflicts would happen because even I still have trouble with GitHub and wouldn't be able to help them if they got technical problems, I would allow them to go to the repository online and change the code when they for sure got the code correct through their live preview on brackets.

Challenges we ran into

The biggest challenges for us were: getting the Google Map to get on our website, assign the markers on the map with info window on a particular site, understanding certain terminology of JavaScript, figuring out how to get multiple webpages for the same website on GitHub, pushing through git shell when it wouldn't be cooperative, not able to make our own database and server/client for our user's profiles and uploading pictures and had to make the choice of static users and pictures (people we made up and pictures we had ourselves or online to put on the website) to demonstrate the features of our website, and having to give up some of the concepts we wanted for our website in the beginning.

Accomplishments that we're proud of

For me, I am very proud of my protégés being able to build this website with me from scratch. They worked very hard in less than a month to understand the foundation and basic terminology of HTML, CSS, and JavaScript so they would be prepared for this hackathon. The result we produced together was more than they thought they could have done and it make me proud to see how proud and more confident they have become after this event.

For myself, I am very proud in working longer hours when needed like not sleeping the first night of the hackathon so I could work on the code the girls had trouble on during the day earlier and hopefully get more done so the girls would feel a little less stress for the next day. I am also proud how I was able to manage a team of young coders and still make it fun for the girls. Lastly, I am proud in talking to BeyondGeek and getting interviewed with my girls on our team and what it is to be a girl coder as well being apart of the club, Project AWESOME. I feel this last one is the most important accomplishment because I want people to see that women can code just as well as a man and we are here to stay in the coding world.

What we learned

The girls and I learned the importance of teamwork, communication, and the optimism to never give up, even when it looked almost impossible to accomplish a task, but in the end, we got it done. We also developed an even stronger connection together as mentor and protégé with this event by trusting each other more and learning how if we work together as a team instead of working alone, we can accomplish anything together.

What's next for MyGeoCruz

The next step for MyGeoCruz would be to add our own database and server/client to our website so we can start having real students sign up, load their pictures, and use our website. We also were thinking of adding messages so users would either message each other in private or leaving like a tweet on the locations and/or on their pictures they upload.

Share this project: