My first full-stack app: Forget Me Not

Last week at Hack Reactor, we each had to build an MVP (Minimum Viable Product), from scratch, and have it ready to present the next day. Up until this point, we had been working on structured projects in pairs, so this was the first time that we were all on our own. 

The Idea

I approached this project with a mix of trepidation and morbid curiosity of just what, exactly, I could hack together in 2 days. I thought of an app idea while at the gym, came back and sketched out the user flow and features on a piece of paper, and then just went from there.

My app is a simple memory helper for teachers who have trouble remembering their students' names. You can read about it in this mock press release.


The Process

I (once again) was grateful that I'd taken Javascript Design Patterns, which taught me how to approach building the app structure from the very beginning. After I had my sketches done, I set up my file structure and read up on MEAN stacks, which I decided would be a good fit for this project and just cool to try out. 

MEAN stands for Mongo, Express, Angular and Node, which together comprise an end-to-end Javascript tech stack. 

After 12 hours of solid hacking, I had the views running, and one of my two features working. The app would accept a user's guess, and return the appropriate response. I also set up my server routes, and tested my POST, GET and PUT requests to ensure they all did what they should. Huzzah!  

On day 2, I tackled the task of saving and storing a user's hint. I also hooked up the app to Mongo. Up until this point, I'd been using hard-coded data. I wasn't able to refactor the app by mid-day, so decided that I would just use the hard-coded data for my presentation. I talked with a Hacker in Residence (analogous to a TA), and they said that would be perfectly acceptable, given the "minimum viable" nature of the project. 


The App

Here's how it turned out! You can check out the repo here, with the understanding that the code works, but is far from final. 

Home screen. Styling courtesy of the ubiquitous Twitter Bootstrap 

Home screen. Styling courtesy of the ubiquitous Twitter Bootstrap 

Student photo shown with a simple prompt

Student photo shown with a simple prompt

If the guess is incorrect, the user can write and save a hint about that student to connect their name with their face.

If the guess is incorrect, the user can write and save a hint about that student to connect their name with their face.

If the user gets the name right, a "correct" response is shown, and they are encouraged to keep playing.

If the user gets the name right, a "correct" response is shown, and they are encouraged to keep playing.


Lessons Learned

First, and most important, I learned that I'm capable of hacking something together in a constrained period of time that isn't a total disaster. And that I can learn the technologies I'm going to apply while I'm trying to apply them. That was pretty cool. The project also reinforced the value of just getting your hands dirty and building stuff as the best way to understand the technology you're using. 

More technically, I learned that how you manage your data is very, very important! Next time, I would spend a little more time on deciding how best to handle the data for my app, and plan that out first. I think it would have made all the other decisions I had to make more self-evident. 

I also saw firsthand the value of time-boxing, and being able to manage yourself competently. I have a lot of practice managing myself and others while building user-facing products, and that experience served me well for this sprint. Staying focused on the user persona I had created (a teacher who has trouble remembering students' names) was essential to keeping the project scope manageable, and ultimately ensured that I'd have a product with a clear story to deliver.