From Basement Coder to Software Engineer in 480 Hours
How I became a new and improved software engineer.
Last April, I made a decision to enroll in General Assembly’s Software Engineering Immersive (GA).
Studying Computer Science in college gave me a solid foundation in the backend, but I realized was hungry to learn full-stack development. I wanted my work to captivate audiences. GA’s curriculum was fascinating, and it included new intimidating full-stack technologies, like React, MongoDB, Ruby on Rails, Express, Handlebars, jQuery, Sass, and PostgreSQL.
Not only did I study full-stack technologies at General Assembly, I pair programmed, facilitated code reviews, built production level apps, and pitched them to my peers and instructors. Each project was designed, developed, tested, and presented in four business days with updates made after they were presented.
Here are my four full stack projects, the tools I used, and a reflection on the immersive.
Frontend Tools
- HTML. Hypertext Markup Language; creates the content of a webpage.
- Bootstrap. A component library for getting responsive components up quick. Great for speed; not so great for unique designs since every component will have a predetermined look.
- CSS. Cascading Style Sheets; dictates the design of a webpage.
- Sass. Syntactically Awesome Style Sheets; a style sheet language with variables, functions, mixins, and more to streamline webpage styling.
- JavaScript. Used to define user-controlled events for a webpage.
- React. A JavaScript library that streamlines webpage building with reusable components. React also updates and renders components based on the state of the website’s data.
- jQuery. A JavaScript library to help simplify HTML DOM manipulation and traversal. Using this can be costly as it comes in a relatively large size.
- AJAX. Asynchronous JavaScript and XML; used for sending HTTP requests to the server from a website.
- Axios. A promised based JavaScript library for making HTML requests.
- Handlebars. A JavaScript library for building reusable HTML templates and template logic. NOTE — Handlebars is not bootstrapped with state management, therefore Handlebars views will not update automatically when data is updated.
Backend Tools
- Ruby on Rails. A server side web application framework written in Ruby which includes methods for both database and backend creation.
- PostgreSQL. Used for modeling data and its relations through tables.
- Node.js. A JavaScript runtime environment for executing JavaScript code outside of the browser.
- Express. A server side web and mobile application framework for Node.js.
- MongoDB. A database which stores data in JavaScript object-like documents instead of traditional tables.
- Mongoose. A JavaScript library to help model web application data to store in MongoDB.
Project #1: Tic Tac Toe
Tools: Node, HTML, Sass, JavaScript, jQuery, Bootstrap, AJAX.
Links: Live site & codebase
I know what you’re thinking — I thought this too:
This should be a breeze with a CS degree.
That’s cute.
Yes, I built Tic-Tac-Toe during my first Computer Science class with C++, and then in Java my sophomore year. This time I built it in JavaScript, with a deployed frontend, and HTTP requests to a rails API, and DOM manipulation, and user authentication, and a stats retriever, and a password changer, and responsive design — all built and styled in four days. How cool is that?
The design was inspired by Google’s tic-tac-toe game, since it was the epitome of “less is more.” Since all of us were building Tic Tac Toe, starting with a simple design left room for Bootstrap practice, responsive design, and personality.
Problem solving strategies involved pre-planning, pseudocoding, then coding the solution. The issue queue for our project also helped me find optimal solutions quickly.
Future goals:
- Improve the responsive layout for mobile devices.
- Player stats need to be more meaningful by including a win rate or win/loss record.
- Implement an AI using the minimax algorithm for a single player game, followed by a multiplayer version using Socket.IO.
Project #2: Overwatcher.gg
Tools: Ruby on Rails, PostgreSQL, HTML, Sass, JavaScript, jQuery, AJAX, and Handlebars.
Links: Live site & codebase
I made an Overwatch mentoring platform for players to improve their gameplay. Players can create profiles showcasing their competitive Overwatch statistics, played heroes, and gameplay videos for mentor and mentee review.
The idea came to fruition after noticing a demand for stable mentoring programs complementing the rise of high school and collegiate e-sports. The benefits of e-sports include increased spatial awareness, heightened reaction time, improved cooperative behavior, and improved scholastic aptitude. It was imperative to foster a platform to elicit these benefits. As a former assistant coach and as a player ranked in the top .8% of the Overwatch player base, facilitating player growth personally and professionally became my passion.
I’m very proud of the initial design. During my usability tests, many users found it clean, intuitive, and accessible.
I’m also proud of my perseverance. I’ve conquered app-breaking challenges in my back-end by documenting issues, Google-fuing, and rubber ducking solutions with colleagues before arriving at optimal solutions.
Challenges to anticipate going forward include: adding additional features, adding mobile media queries, visualizing mentor and mentee pairing, and integrating the Overwatch API to display player stats.
These challenges made for a fun project experience! They took place in the pursuit of knowledge and growth. This remains one of my favorite projects because I got to code a platform for my favorite video game.
Future Goals:
- Improve responsive design for mobile
- Implement “sign in after sign up”
- Improve profile listings card design
- Add Battle.net and Discord authentication
- Add social media as a profile resource
- Build and display mentor/mentee relationships when established
- Display player’s statistics for played heroes pulled from the Overwatch API
Team Project: Rocket Surveys
Tools: Express, MongoDB, Mongoose, Node, HTML, Sass, JavaScript, jQuery, Bootstrap, AJAX.
Links: live site & codebase
My teammates and I were tasked with creating a survey application where users can take a survey, create a survey, and edit or delete their own surveys. We applied agile development methodologies by having daily stand ups 3 times a day.
Our teams were assigned during the beginning of our collaborative workflow and Express unit. I was excited with my team because we all had mutual respect for each other, and I looked up to each and every team member yearning to learn from their compelling experiences and personalities.
Our synergy was stellar during the third unit leading up to the project. We used Slack as our primary tool for communication while having several pair programming sessions. To prevent merge conflicts and rebase errors, we congregated for all of our feature merges. I introduced GitKraken into our workflow after researching project management tools. We used it to visualize our rebasing, and keep track of each other’s commits in case we had to backtrack. Our project tasks were managed using Notion and Github Projects.
Each team member had a role for this project. We had a scrum master, backend lead, frontend lead, and QA lead.
I was the frontend lead.
This meant I directed and facilitated the design, construction, and maintenance of the Rocket Survey’s website including the design, and the API and data processing logic. In addition, I organized pair programming sessions and established frontend coding conventions for our team.
It was a huge honor having my teammates select me as frontend lead for this project. It was a tangible indicator of how I’ve improved my front-end skills exponentially since the start of the program!
My goal as frontend lead was to be an example of a good front-end developer. I was an example of a developer who documents code, writes detailed commit messages, considers edge cases, mentors partners during pair programming sessions, asks questions, communicates bugs, and discusses design options. I demonstrated what I learned by passing on that knowledge to my teammates when questions arose.
After walking in the shoes of a front-end engineer lead, I can say that this was an invigorating challenge unlike anything I’ve ever experienced. I broke down multiple technologies and the complexities of front-end development for my teammates with no prior technical background. If they understood me, then I’m understanding this, and if they didn’t, then I had to hit the docs and try again.
An MVP breaking issue that happened during this project was the inability to tally the responses for a specific survey. This occurred during our last day of our project week. We realized we couldn’t update our survey responses properly with our current back-end. For several hours, we redesigned and reconstructed our whole API from scratch once we all understood and agreed on the new approach. Good thing we also had some tasty snacks and comfy chairs to help us power through this!
Another challenge we overcame was recording a response and sending it to the API. We tried to do this in a way that was no longer supported by jQuery. I needed to facilitate the problem solving for this since this was a front-end issue. First, we documented our issue in our cohort’s issue queue — I subscribed to all front-end related issues to stay in the loop. Thankfully during some light googling, one of the comments on our issue hinted at some jQuery documentation showing another approach to get an answer from a checked radio button. We came across this same documentation entry which prompted a working solution!
We all rose to the occasion during our final night, and we were able to complete our project on time! This was my favorite group project ever because together we’ve all realized we were mentally capable of more than we realized, and I learned something new about myself as a teammate and as a leader.
Future Goals:
- Visualize survey stats with Chart.js
- Update survey stats in real time using Socket.IO
Paid Capstone Project: Central African Lifestyle Magazine (CALM)
Tools: Node, Express, MongoDB, Mongoose, React, Sass, Axios.
Links: live site & codebase
For my capstone, I co-founded, and constructed the beta for a new digital publication titled the Central African Lifestyle Magazine (CALM). My client and I share a passion for health, wellness, African culture and inclusivity. I’m on a mission to provide culturally sensitive health, wellness, and lifestyle advice for young women of Central African descent through CALM. Thus, I kick-started this mission through my capstone project.
I developed this publication using React and Express. I pushed myself to manage my scope, maintain active communication with my client through daily stand ups, and document my code. My pitch tackled the demand of a digital publication affirming Central African culture through quality content, my personal aspirations with this website as a woman of Central African descent, and my goal to empower Central African women with stories that matter to them. Then I discussed future plans for this publication including third party authentication and a second pitch at Harvard University for my client’s colleagues.
This was an incredible project to work on. I used my dream tech stack: MongoDB, Express, React, and Node.
On top of that, I reached my peers and instructors through my pitch. More importantly I wrote code that will help thousands, even millions of women feel heard and understood.
Future Goals:
- Integrate third party authentication with Firebase or Passport
- Flesh out author profiles
- Add likes for blog posts and comments
- Introduce blog sharing features
- Style blog editor and blog entries
Reflections
1. Celebrate The Small Victories
A lot of time during project week was spent swatting bugs and fixing typos in my code and in other people’s code. Once I solved a bug that made me feel like I’m going to rot in my chair, I celebrated! I treated myself to a Beyonce dance party! I earned it! Then I’d move on to the next problem and repeat the process all over again
2. Trust The Process & Stay Humble
I was optimistically confident in my coding abilities at the start of the immersive. My confidence plummeted by the time we started Tic-Tac-Toe and my code was riddled with bugs. I realized I had so much more to learn about front-end. This was the Dunning-Kruger effect taking place.
The more I became aware of my incompetence, the more I trusted the learning process, and the more modest I became.
Being humble is the key to self improvement, regardless of how much you already know.
3. Code to Learn
Think about the first time you’ve tried something new. I’d think back to when I started learning piano and pictured myself to be Chopin when I was stuck learning Twinkle Twinkle Little Star. I came into this course thinking that I’d come out being the next Mark Zuckerburg when I really should remember to end my Ruby functions properly and, you know, spell words correctly.
Remember, most of us only see the final product — we don’t see our idols practicing in their bedrooms beforehand.
It’s normal to struggle when learning something new — to feel overwhelmed and defeated. How much you struggle now doesn’t say anything your abilities now or later. As developers we’ll always be in the early stages, and that’s where the all the fun happens. There’s more time to learn, practice, fail, improve, and gain a better understanding of our craft. There’s time to seek resources leading us to the right solution.
It’s better to take time to understand these concepts and tools instead of rushing from one to the next.
End
Bootcamp on top of college was enlightening. I’ve come a long way since I started my coding journey. I’m excited to build more cool things and ready for what this new path has to offer.
