The Color of Care: First Full-Stack Application with Express.js, MongoDB, and Mongoose - in Review
Live URL: https://thecolorofcare.netlify.app/
Three weeks ago, I started learning backend development, which was an entirely foreign concept to me. We learned Node.js, Express.js, MongoDB, Mongoose, REST API development, CRUD, Heroku, and Mongo Atlas. The task at the end of 2 weeks was to build a full-stack application on our own.
I decided to make an application called The Color of Care, an application used to report racial bias and discrimination from healthcare professionals. Front-end development documentation can be found here. Backend development documentation can be found here.
Two key things I learned from this project were:
- Take time to learn the new frameworks.
Just like the first project, I decided not to learn Bootstrap because I thought it would take too long and I wouldn't be able to do that and build an entire website in a week. This time around, I decided to take no more than two hours to work through the Bootstrap module on Code Academy and I was already able to grasp the fundamentals. Everything after that was reading documentation. I was able to create a hamburger menu and style it in less than 30 minutes while it took me 6 hours last time to make one from scratch. This would have saved me a lot of time and hopeless debugging.
My instructors and project lead even hinted in the direction to learn Vue, a front-end JavaScript library, to make our lives easier. This was the first time I was building a full-stack application on my own and I had little preparation from previous assignments on how to connect the front-end and backend with jQuery. Since jQuery felt like semi-familiar territory, I decided to stick with that. And again, I struggled very hard. I was constantly looking back at in-class examples and desperately watching Youtube videos to make my code work. Towards the end of the project week, one of the instructors even held an "Intro to Vue" workshop (which I did not attend because I was busy stressing out about problems, which ironically, could have been solved if I had just used Vue in the first place). I watched the session later and I realized I could have made my life so much easier.
This time around, I'm determined to practice Vue and Bootstrap every day so I can have another skill under my belt to tackle the next project. I am starting to understand the notion that coding is 30% writing code and 70% thinking about writing code. I have to practice writing thoughtful code rather than more code.
2. Do not give up.
I honestly thought that this was the project that was going to get me. Halfway through my project, I thought, "I'm not smart enough to be an engineer."
These are things I told myself during my first year of college when I was 18 years old. I was studying Chemical and Biomolecular Engineering. I remember I was moving onto Linear Algebra, Differential Equations, and MATLAB. When things got tough I said, "This isn't me." But I've always had a passion for engineering that was undeniable. I simply liked solving problems.
At that point, I decided to switch to pre-med. I could tell the culture and the environment wasn't for me, but I still forced myself to keep going because I wanted it to be my "thing". But I knew that it wasn't.
But this time, I didn't give up. I kept persevering because engineering is for me.
However, what really inspired my application was my passion for healthcare and providing equitable care to all people, especially People of Color. I am happy to say I am feeling as though I am coding with purpose and passion.
Awesome post!
Senior Software Engineer | Focused on Python, React, Javascript, PHP
4yPerfect!
Software Engineer
4yGreat read! Really looking forward to seeing your app being used in the industry!
Let’s go Narissa!