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!

Let’s Catch-Up!

Absence makes the blog grow fonder.

Well hello there stranger! It’s been a minute, hasn’t it? Apologies for not posting anything the past SIX WEEKS (eep!), but Bootcamp II was a rush, then I went to New York for spring break (pics below!), then we started Career Track. I know you’re eager to read all about my progress over the past month-and-a-half, so without any more fuss or delay, here’s…

What I learned the Past Six Weeks: A Brief Recap

  • Week 7: APIs and serverless data storage
    • This week involved learning how to fetch data from third-party APIs, sort, filter, and paginate the results, and use Firebase to authenticate and save users. The main project I made this week was a Candidate Tracker that allows users to up-vote their favorite Democratic 2020 primary candidates during debates. GitHub repo here, deployed site here.
  • Week 8: Final Project Week (see Code In Action, below)
    • My team’s final project for Bootcamp II was a gif-based translation and guessing game using the Giphy API. See below for a more detailed description and a link to the deployed site.
  • Week 9: Spring Break: I went to NYC!
    • This was my first time in New York and I had a blast. I went to the Met, saw Sleep No More, hung out in Central Park, sang karaoke at Stonewall, bookstore-hopped in Brooklyn, and got pizza at 3 AM. Scroll to the bottom for some highlight pics.
  • Week 10: Node Fundamentals: Backend Stuff, Binary, Buffers
    • The first few weeks of Career Track really kicked my ass. This is the first time I’ve worked on the backend and I found it very hard to pick up the concepts. This week we were introduced to Node.js, binary, buffers, bitmaps (the hardest fucking thing I’ve ever tried to learn), destructuring, arrow functions, callbacks and asynchronous code, creating a local database, using Jest to test in the terminal, and installing project dependencies. It was a lot to come back to after a week in New York.
  • Week 11: Server Fundamentals Using Node
    • The second week of Career Track was as hard as the first, if not more so. This week we got into creating our first Node servers, learned about promises, (attempted) to make a chat app, started pinging APIs from the backend, started working with Express, learned about middleware, learned about Big O, and had to write our own functions that performed the same actions as .pop() and .push() without using any existing array or string methods, only loops and indexes. Oy.
  • Week 12: Express and MongoDB
    • Last week was a little easier, mostly because we started using Express and Mongoose to help with server creation and middleware. We also were introduced to MongoDB and Postman and deployed our first apps to Heroku! It was a week of bringing vague backend concepts out of the shadows and seeing how they work together in a much more user-focused way.

Code In Action

My final project for Bootcamp II is my favorite thing I’ve made in the course to-date. I really enjoyed my team, we kept on pace for the entire week, we worked through issues calmly when we were starting to get irritated with the project and each other, and we finished in time to add in a couple nice-to-haves to the final product. Check it out:

Talk Giphy to Me
GitHub Repo here | Live Site Here

  • What it is: A web app that uses the Giphy API to allow users to translate a message into a series of gifs, play a hangman-style guessing game based on a random gif, and save their favorite gifs to a page for later viewing.
  • What it demonstrates: Fetching from a third-party API, promises and asynchronous programming, pagination, sorting and filtering of data.
  • My main takeaways: I learned a lot about asynchronous functions, array methods, the order and placement of event listeners, different ways to manipulate the Firebase database, and how not to go about styling a group project (pro-tip: don’t do it as a group!). I also got a lot more comfortable with Flexbox and learned about the CSS ‘Computed’ inspection tool in Chrome. 

Closing Thoughts

I know I mentioned this in the last post, but future posts will stray from the Week-In-Review format. I’ve got two alternate format posts in the cooker already: one on how to deal with burnout, and the other on how to hash a new user’s password using virtuals and hooks in Mongoose. You can barely stand the wait!

Also, earlier I promised some pics from my trip to New York, so here ya go.

Until next week friends, here codes nothing!

Feature Photo by Bewakoof.com Official on Unsplash

Pre-Week: Boot-Camp Prep

A crash course in programming fundamentals.

This past week was all about getting familiar with dev fundamentals: keyboard shortcuts, the terminal, git/github, VSCode, HTML, CSS, and JavaScript. It was fast-paced and not very thorough, but as our instructor Marty explained, the week was about getting us comfortable with using common developer tools and introducing us to concepts we’ll be diving into later in the course.  

Code in Action

Not a ton of amazing code came out of this week, tbh. My repos can be found here (bootcamp-prep-day-1 – 4). We mostly just messed around with page structure, styling, and some basic JavaScript functions. Below is a screenshot of my beautifully-designed page from Day 2 (HTML + CSS).

Look on my Works, ye Mighty, and despair!

I am particularly proud of my Lennon Parham reference on that page, and plan on creating a Womp It Up! lorem ipsum generator sometime soon. #turnaround

We did make a fun MadLibs-style web app on Day 4, our final day of coding for the week. That was an interesting day. We began getting into JavaScript on Wednesday, and I had a harder time with those intro projects than the more advanced MadLibs project we were asked to make at the end of class on Thursday. I guess it makes sense — on Wednesday I was re-acquainting myself with JavaScript concepts I had previously learned and trying out new ones, but by Thursday I was more comfortable and able to knock out a pretty fun MadLibs story.

Where I Struggled

Honestly, the hardest part of this week was my schedule. I got up at 6 AM to go to the gym, then go work a full day, grab some quick dinner, and be in class from 6 PM  – 9 PM. Maybe I’m just getting older, but by Wednesday that schedule had really caught up to me and I was ready to get into the full time 9 AM – 6 PM course.

I also struggled a bit with meeting new people. I’m pretty outgoing by nature, but often need an intermediary to make connections for me before I’m comfortable diving into a conversation with a stranger. Luckily my friend Megan is also taking the course, but I did have to step outside my comfort zone a few times to engage in conversation with the other students I didn’t know.

Thank god for you, @megswuzhere

Where I Succeeded

I was familiar with HTML/CSS/JavaScript before this and did all the assigned pre-work before the week started, so I’m confident in my understanding of the basics and the work I produced. I definitely feel ready for boot-camp classes to begin.

I think my biggest success for the week was the MadLibs project. I completed the project and pushed to GitHub before the end of class, we reviewed my app as a group, and I just so happened to get a round of applause from the class. I gotta say, that felt really great. I’ve worked very hard to get to where I am now, and I plan on working even harder throughout this course. Keep the applause comin’, folks 🙂

This week also encouraged me to dig through some of my old repos on Github, which was good for a chuckle. One project I’d forgotten about was Make It Rain for Kitty, a super-simple JavaScript web app using p5.js I built a few years ago. A user can click their mouse anywhere on the page and raindrops will fall, captivating the cat sitting and staring out the window. It’s pretty cute if you ask me, and something I plan on revisiting when I’m a little more skilled in JavaScript and Processing.

I could watch this cat watch that rain all day.

Closing Thoughts

All in all I thought this week went well! I’m excited to get started full-time at the end of the month, even if it means lugging my heavy books back and forth to class on my bike in the rain. That’s the life, I guess!

Thanks for stopping by, and until next week, here codes nothing!

🙂
 Feature photo by moren hsu on Unsplash