Capstone Project

jba11er32 — Sun, 11 Jul 2021 06:35:47 +0000

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/

I made my first app using React.

jba11er32 — Wed, 26 May 2021 08:20:18 +0000

The mindset I had when creating this app was whether or not I was able to use it. I constantly have a problem when it comes to my fridge: too many ingredients not being used. Since quarantine has introduced many new activities to the average person, I thought it would also be something others could use as well.

The app, Clear Your Fridge, allows one to enter an ingredient into the search bar and it will return 10 recipes using that ingredient. When an ingredient is entered, each result will show an image of the recipe, other ingredients needed for the recipe as well as a link to the full recipe online.

The most challenging problem I had when creating this app was not creating a infinite fetch request from the API. This would have limited me from fetching from the API and I would not be able to test my app. I learned how that could become a problem and also was able to understand the error for future apps I create. I would say that I am pretty proud of the code that I wrote. Clean code was the goal of this app.

The app uses a third party API: Edamam. Unfortunately, this API is limited to only searching for recipes one ingredient at a time. I struggle with some CSS styling and want to improve on that aspect of my app. I want to include a video for each recipe or even search for recipes using multiple ingredients. I hope that I can get that working in the future.

As far as using React, there are a lot of aspects and concepts that I want to familiarize myself with. This was a good introduction to test how my knowledge. I plan to improve on this app and am welcome to critiques, comments, and advice. May this app be of use to anyone who comes by it.

Forem: jba11er32

Capstone Project

I made my first app using React.