Introducing Mega Nap!

For the love of apps!

Yes this is a post about an amazing web application I helped create but first…

I finished coding school!

I graduated on June 26 with a Certificate of Training in FullStack JavaScript from Alchemy Code Lab in beautiful downtown Portland, Oregon. The program kicked my ass and there were a few moments when I wasn’t sure I was going to make it, but I worked really hard and came out of the program confident, capable, and full of great ideas and the programming chops to make them a reality. A huge thank you to Ryan for being a great instructor, Paige, Ryan, Easton, and Mack for being great TAs, Shannon for teaching us how to prepare for our job searches, and Marty and Megan for running such a great program.

What a fine looking group of alums!

Okay, on to the fun stuff!

I’m thrilled to present Mega Nap, the easiest way to make a full stack application without having to write a lick of backend code.

Mega Nap was my final project at Alchemy and was created by myself and four other students: Emily Baier (@hellotaco), Chris Piccaro (@picassospaint), Marty Martinez (@TDDandDragons), and Tommy Tran (@TranTTommy). We built it in just six days using an agile development process involving user stories, story point estimation, mini-sprints, and daily retrospectives. It was an incredibly balanced team and we worked really well together.

What Is Mega Nap?

Mega Nap is a web application that allows frontend developers to create a database, design database models, populate their new database, and receive RESTful API endpoints they can ping to access their data. All of this is done via a few simple web forms, so they can quickly and easily create and use API endpoints without having to write any backend code.

The inspiration for this project came from working almost exclusively with the Pokemon API while learning to fetch from third party data sources in React/Redux applications. Now don’t get me wrong, that API is legit. However, using the same data over in over our apps was getting boring, so we decided to create a tool frontend developers or those new to programming could use to make their own APIs. We brainstormed features, divvied up the work, and Mega Nap was born!


The Client

The Mega Nap client is build with React/Redux and deployed to Netlify. We used Auth0 for user account creation and authentication and styled components in lieu of plain CSS for most of the styling. We ran unit and snapshot tests in Jest and used Redux promise middleware for handling promises in our API fetch services.

One particularly tricky part of the front end was the data entry form the user fills out after creating their database models. We needed a form with fields that were dynamically generated based on the name and type the user had just set as the key/value pairs in their database model. To accomplish this we had to create an array of fields by running Object.entries on the parsed model schema JSON object we got from our server after the model was created. We then passed this to our form component, which mapped through that array and created a list of fields by running each array item value through a switch and returning the correct JSX form label and input based on the field type. We then rendered the list of returned labels/inputs, allowing the user to immediately enter their data!


An example of a dynamically-generated data upload form based on a “Dog” model.

The Server

The Mega Nap server is built with Node.js and Express, is deployed to Heroku, and uses MongoDB for data storage. We used the jwks-rsa auth0 npm package to create middleware that ensures authentication and only needed to create two database models: the Database, which is used to create a new database for each of the user’s models, and the Model, which has a schema value that holds all the user’s inputted model values. We used Cloudinary for uploading and storing images, so our users can upload images and receive image URIs back in their API calls and we don’t have to waste precious database space on storing their images.

We create each new model schema by using the reviver function, which takes the key/value pairs entered by our user as field names and input types, and then runs them through a switch and is passed as the second argument in creating a new Schema using Mongoose. We intentionally restricted the data types the user could use in their models to strings, numbers, and booleans, in order to keep our database super flat and not have to worry about models referencing or being dependent on other models. This allowed us to maintain a very flat, two-level database structure, with each user model being it’s own collection and all data being added as single documents in their appropriate model collections.

Each user’s model gets their own collection in our MongoDB database.
The data uploaded for each model is stored as an individual document in its appropriate collection.

The Look and Feel

We knew from the beginning that we wanted the user experience to be as painless and fun as possible. To achieve this we chose a modern, earthy-yet-energetic color scheme, using the Color Marketing Group’s prediction for 2020 Color of the Year, Neo Mint, as our primary color and combining it with cooler neutrals and one pop of vibrant pink for contrast.

I designed the homepage based on wirefames we worked on together and using modified iconography found on FlatIcon.com, trying to create an aesthetic that spoke to the fun, simple experience we wanted the user to have on our site. Emily and I styled the site together, with me handling most of the static or global components and her working on form styling and transitions. This was the first time either of us had really used styled components, so we not only had to figure out our styling in just a few days, we also had to learn a new styling language to do it.

An earlier version of the logo and word mark. We liked it, but it was too difficult to incorporate into a web design.

Next Steps

We’re all really proud of this project and are planning on making improvements to it as our individual schedules allow. My contribution to the future of the site is to make a mobile version of it using React Native. I’ve played around a bit with React Native and am excited to dive deeper into the documentation and begin building our mobile version soon.


Thanks so much for reading about our humble little web app! I’m really proud of what we were able to accomplish in under a single work week and hope you have fun creating API endpoints using it.


Until next time friends, here codes nothing!

Week 1: Sleep? What’s That?

I can’t believe I’ve been in this course for 18 million years already.

In the words of the incomparable Jon Lovett, what a week.

When our instructors told us during prep-week that it was going to be super intense and we would be diving in head-first right off the bat I thought, “Oh cute, I love hyperbole! How hard could the first week really be, right?”

They were absolutely not joking. I haven’t spent so much time learning, working, struggling, reading, writing, problem-solving, and muttering to myself in years. And comparing where I am now to where I was 10 days ago, it seems unbelievable that I’m producing the work I am now. That’s how far we’ve gone in such short a time.

Let’s go over what we learned just last week:

  • Basic HTML and CSS
  • Accessing and manipulating DOM elements via JavaScript
  • Storing info in variables and changing it later
  • Creating forms and using the form input data
  • Adding and removing tags and classes to the HTML using JS
  • Creating class listeners and performing actions on DOM nodes when those listeners trigger an event
  • Writing functions, writing functions within functions, calling those functions, and importing/exporting functions to/from other files
  • Creating and updating objects, then accessing the properties inside those cute lil objects
  • Looping!
  • Adding logic to apps with conditional statements

As you can see, we’ve covered a lot. Each day comprises about an hour of lecture in the morning, then group code cooking for an hour or two, then a group build, then a solo build, then finishing our solo builds at home if we didn’t finish in class, then about 50–100 pages of reading. Then sleep. Then repeat.

Code In Action

Yes, it’s been intense, but like I mentioned earlier, we’re already producing some pretty cool projects. Here are two of my favorites from the week:H

Hungry Caterpillar
GitHub Repo Here

chompchompchomp, dancedancedance
  • What it is: A web app featuring a caterpillar that you feed by clicking different buttons. Each time you feed her, she grows longer. Buttons below her make different segments of her body move up and down, or ‘dance’.
  • What it demonstrates: DOM traversal and manipulation, control flow, lists, element styling and positioning.
  • Hardest part: Figuring out how to change the position of the body parts when the buttons are clicked.
  • Easiest part: Finding and accessing the DOM elements.

Paint Alyssa Edwards!
GitHub Repo Here

  • What it is: A web app featuring America’s favorite drag queen, Alyssa Edwards! Users can help Alyssa get ready for her big Valentine’s Day date by choosing hair, eye shadow, and lipstick colors.
  • What it demonstrates: DOM traversal and manipulation, dynamically changing CSS styles, absolute positioning, conditional statements.
  • Hardest part: Correctly sizing and placing the image elements to not make her face looked FUBARed..
  • Easiest part: Finding amazing reference pictures of Alyssa Edwards.

Where I Struggled

There were a lot of things I struggled with this week, such as:

  • Getting less sleep each night
  • Intensely using my brain 12+ hours a day: Our instructor repeatedly refers to our brain as a muscle and us as mental athletes, and it’s very obvious that I haven’t exercised it like this in years
  • Working in groups: I struggle with patience and usually want to move ahead even if people in my group don’t fully understand the concept yet, so it’s taken some effort to slow down and be in the moment with the rest of my teammates.
  • Keeping up with the readings: Trying to absorb new coding concepts at the end of a long day of coding is haaaaard. The reading load apparently gets lighter as the course progresses, which is nice, but for now it’s a tedious way to end the day.
  • Flexbox: This is an approach to CSS I’ve never seen before and it’s been surprisingly tricky to wrap my brain around.
  • The Nightmares! I’ve had coding dreams almost every night since the course started and they are mostly weird, anxiety-ridden nightmares. Some of them are funny in retrospect (my sister yelling at me to cut the pickles both thin and lengthwise was particularly amusing), but most of them are just unpleasant and stressful.

Where I Succeeded

It hasn’t all been challenges this week. I’ve also done pretty damn well over the past few days:

  • I’ve fully completed and, most importantly, understood each project and it’s core concepts.
  • As the projects got more complex the styling became more fun. The Alyssa Edwards and hungry caterpillar projects are good examples of what spending a little extra time to style something can mean to the quality of the end result.
  • My general knowledge retention has surprised me. I honestly can’t believe we’re only one week in. I feel like i know a thousand times more than I did when i started, and I’m proud of myself for being able to keep up and not give up on challenging concepts.
  • I’ve been tweeting regularly, which seems like a silly thing to brag about but it actually helps me keep track of my insights, feelings, and others observations in the moment when I would otherwise lose them.
  • I surpassed 50 Twitter followers!
  • I went to my first Out In Tech event and have a coffee meeting scheduled with an Out In Tech PDX leader for next week.
  • Finally, I got two compliments on my blog. 🙂

Closing Thoughts

It’s been a tough week, yes, but I’m so excited to be on this path and couldn’t have asked for better instructors or classmates. Everyone is whip smart and fun to be around, which makes me even more motivated to get up and go to class every day. I already feel incredibly accomplished and it’s only been one week, which makes me really confident about where we’re headed and the skills I’ll gain over the next five months.

I’ll leave you with another picture of my dog Joe, who recently got a new stuffed bear and refuses to part with it, even when going outside in the snow to pee.

Until next week, here codes nothing!

Feature Photo by Cris Saur on Unsplash