Essay Partners and my first internship experience at Panopath

demo.gif

I started learning Angular for about two weeks on my own, and it got me an opportunity right away at Panopath to work with another engineer and gain hands-on experience maintaining code and developing a hybrid app with the Ionic Framework.

DATE

Late July 2017

TIME SPENT

~3 weeks

WHAT IT DOES

It pairs you up with another high school student who is also working on college applications. Until both of you finish your application essays, you two will be “essay partners” and helping each other build plans on this app.

Each partner has their own plan which both partners can view and edit. To make it more user-friendly, we used local cache to store form data so the user’s name is displayed after registration.

HOW IT’S BUILT

Angular and the Ionic Framework provided the foundation and structure. The app itself looked and felt like a native mobile app and can use native functionalities because of Ionic.

CHALLENGES

Some of the biggest ones:

  • Improving code quality and readability, designing and planning the project before hammering away on keyboard coding.
  • Making sure that other engineers on the team can read my code, grasp the project structure and get their hands on the project as soon as possible.
  • Writing efficient documentation that has good usage examples for the above purposes.
  • Working at a student-run startup without an established management structure, many situations require everybody to take charge at least once at some point. Fortunately, my inputs were almost always valued by my colleagues. It’s hard to communicate technical details and requirements to management and/or design people who usually think the bigger pictures. But I will also say that putting myself in their shoes and thinking about what the project means for our organization helped a lot in build understanding and trust between us.

WHAT I LEARNED

There have been so many day-to-day eye-openers, mostly coming from being exposed the first time to the real world of software development and how developers really do their jobs. Comparing to doing personal side projects that weren’t really rigorous, working with others in a relatively fast-paced manner while learning new concepts and technical terms was big to me. As a result, the area I had the most growth in is writing quality and maintainable code by using a consistent coding style throughout the project.

BUILT WITH

  • Angular
  • Ionic
  • Sass
  • Gulp.js (task automation)
  • Laravel
  • XAMPP
Advertisements

Spoiling Fridge is here!

1504780336(1).png

Just dump all your ingredients there and you would be fed almost immediately with hundreds of recipes tailored to your needs.

One of my worst habits I’ve always wanted to get rid of is not planning for what to cook and getting a shopping list before the fridge gets empty and it’s time for groceries again. Sometimes I can just play it by ear, grab random ingredients and exotic spices and get lucky in the kitchen. But in reality, playing it by ear doesn’t work all the time. And when it doesn’t, disasters happen in the fridge. Foods that I’ve only used once begin to spoil horribly and all I could do is throwing them away. Since the fridge is empty now, I have to get groceries again. And because I never plan my meals, this just becomes a vicious cycle of getting random foods->using them only once->throwing them away->getting random foods again->using them once->throwing them away…

 

I decide to put an end to my endless wasteful actions. CodeBreak with StudentRND gave me the opportunity to think about this project and that’s when I decided to make Spoiling Fridge a personal cooking assistant.

DATE

June – July 2017

TIME SPENT

~30 hours

WHAT IT DOES

It’s a cooler-looking reimplementation of Edamam, a web app that takes in one or more ingredient names and returns a list of recipes that contain these ingredients. AngularJS is involved.

Thanks to the health and dietary labels you can apply filters to those recipes according to their dietary properties (i.e. low-fat, gluten-free, etc.).

HOW IT’S BUILT

The project was built with AngularJS. Design supported by Google Fonts, Animate.css and Font Awesome.

Every time you press enter after typing in ingredient names, a GET request is made to the Edamam API with the ingredient names as parameters in the API call.

CHALLENGES

Trying to get what REST really means and how HTTP works for the first time gave me headaches. All I was trying to code turned out to be just a simple GET request, but I spent about 40% of my time on learning these important topics in web dev.

The returned JSON object was also HUGE with a lot of extra information that I didn’t need. I familiarized myself with the structure of JSON objects and how to access them. All of it seems like nothing now, but once felt like climbing up Mt.Everest with my bare feet.

WHAT I LEARNED

I spent most of my 30 hours of time on learning and familiarizing myself with Angular. ng-repeat was a super life/time-saver. At least I took the time to learn concepts and syntax of a powerful framework like Angular, though it would take me about the same time to just type out every single line of code for the boxes for each result, but will definitely save much more time in the long run.

Feel free to contribute to it on GitHub! 🙂

BUILT WITH

TRY IT OUT

View this project on GitHub: https://github.com/jluo9612/spoiling-fridge

(This post is created from Devpost’s project story template)