DEV Community

loading...
Cover image for Capstone Project

Capstone Project

jba11er32
Software Engineer in the making
・2 min read

For the final project of my coding bootcamp, we were instructed to make a full stack application that included something that we did not learn before. This was a challenging project for us as we all had to learn from scratch without really any directions from our instructors into our app. The one thing that I took from this was that learning a new language or incorporating a new library from a language is something that is very challenging and mind-stimulating once you see it in action.

I decided to create this application that would help keep track of daily habits. The idea came from a point in my life where I wanted to start building better habits in my everyday life, whether it be exercise or the amount of water I drank every day. Health has been such an important aspect in my life and to my family the past few years so this was something that I thought would help me to maintain a healthier lifestyle.

The application mainly uses the MERN stack(React.js, Express.js, Node.js and Mongodb). React was something that I worked with before on another project but did not get as much practice on it on the third project of our cohort. I mainly worked on developing the back-end with another classmate. Therefore, I had a lot of trouble with the basic understanding of how Routes and Links worked. Another problem that I had when building the app was getting Authentication to work. There were many console logs that I had to do with an instructor, and it took us approximately an hour before we were actually able to get it working.

Overall, the app is working but lacks any styling on the front-end. It includes the use of react-calendar and also react-redux. I learned how to use both of these things from Annie Liao's blog post and repository for her app. (Link: https://dev.to/liaowow/adding-calendar-to-your-react-app-1i0o). Through this I was able to incorporate the use of redux as well as the calendar library in React. I will continue to work on this project to fix functionality of the app as well as the styling to improve user experience. The pictures seen above are what I want it to look like. Hope to write another update with the completely finished product soon.

Deployed Link:
https://devhealthyhabits.herokuapp.com/

Discussion (0)