Web-Dev Bootcamp: Full Stack App Using MongoDB .

This past week our class was tasked with using our new knowledge of MongoDB to create a Full-Stack To-Do list application. This was a fun project to take on and it definitely took a few days of learning how to put things together on the front-end and back-end using user input. I also challenged myself and used Vue.js for some additional front-end support as well as using it to send data to the backend.
Since I tend to be a little more visual, I started with styling the front-end aspects of the app. This gave me a little more clarity for how I wanted to approach tackling the user input and back-end pieces of the project. When I entered a to-do item in the input field, I needed to send that information to the backend, place it in the database for this project (app.post) and then pull the information from the database (app.get) and send it back up the client in a styled format within the table. Once the data was displaying on the page, I needed to toggle back and forth between “Mark Finished” and “Mark Incomplete,” each with some differing styles to distinguish the two. Finally, I needed to be able to delete an item from not only the DOM, but also the database on the backend.
There was a lot of trial and error while learning to put everything together, and some time working with my instructors as well, who patiently guided me through some of the more difficult aspects of the project. There was one afternoon in particular after a two hour grind in which I had hammered out getting the data to display correctly and without bugs that I needed to step outside and decompress (which I am learning, happens a lot in coding). Once I returned to my code though, I felt like I was able to better grasp what I had just accomplished.
The most difficult piece of this project for me was definitely using Vue.js to accomplish the functionality needed to accomplish the task. If I had used just jQuery with Express, I might have a had a better time working through this project, however, I’m glad wrestled with Vue.js and began to learn some new tools that I can continue to get better at in future projects. I was able to use all three tools and more to put together a functional application that I could be proud of in my young development career.
As we move into a group hack-a-thon project this week, the tools and skills learned from this project will definitely help our team complete the task of creating a slightly larger full-stack application. (I will write about that project next week!).
With 5 weeks left in our CodeCraft bootcamp, things are starting to click for me which is really exciting. Mostly it’s in the realm of understanding how different aspects of front-end and back-end talk to each other. There is still a lot of work and learning to do when it comes to actually writing code that accomplishes that goal but it’s exciting to feel like I am making progress!
