Sitemap
Christine Jeon

Christine Jeon

Phase 5 Capstone Project

4 min readDec 4, 2021

CareGiver App

Finally blogging about my Phase 5 Capstone Project! It was a rough ride, but I’ve learned so much about so many different aspects of coding. It’s been a few months of learning a brand new language from scratch so I 100% felt like a newborn trying to run! Throughout this capstone project, a lot of those new concepts and terms started becoming clearer and clearer. So although it took a while, I’m glad I was able to get to this point of my coding journey!

So to start, I’ve always had a passion for early childhood development and wanted to develop a custom application for parents/guardians and caregivers/babysitters to access and post jobs and apply to.

Press enter or click to view image in full size
welcome page to my caregiver app with a cartoon mary poppins

Welcome to CareGiver! I created this app using React-Redux for frontend and Ruby on Rails for backend. This was my first time using Redux so it was definitely a whole process of learning this new concept that wasn’t taught directly in my time during Flatiron School other than just through some links meant to be self-taught. I know there is still a LOT more to Redux I probably didn’t fully grasp, but I was able to create an app with it so I’ve got to say I’m pretty proud of where I got with it! Definitely willing to learn more though.

So first things first, I’ve created Login/Signup components with an option to choose to sign up or log in as two different user types (1. parent/guardian && 2. caregiver).

log-in page
Press enter or click to view image in full size
caregiver & parent/guardian sign up page side-by-side

I only changed the registration pages slightly for caregiver & parent/guardian, which you can see above in my side-by-side screenshot.

It started out as an idea of a simple app where a user is able to sign in as a parent or caregiver and view/post babysitting jobs. As I started developing/coding, I realized I kept wanting more and kept adding more to it. I wanted to utilize OmniAuth in order to allow users to sign in via Facebook as well as ActionCable to have in-app messaging between users. However I didn’t quite get around to implementing these two because I had already put too much on my plate in regards to new concepts/libraries. I had already started with Redux (something I hadn’t learned in Flatiron) and I utilized JWT instead of Sessions as I have for my Phase 4 Project. But like I said, every phase that passed I kept challenging myself to use and learn a new/different concept. I still would like to add these features in the future preferably after learning more in depth and just becoming more comfortable with the concepts.

Get Christine Jeon’s stories in your inbox

Join Medium for free to get updates from this writer.

In terms of JWT, this was my ApplicationController for encoding and decoding tokens. I struggled a lot with the SECRET_KEY portion because I learned there were other ways to use this, but I ended up creating a .env file in my root directory of my backend and the adding “.env” in my .gitignore file.

screenshot of my ApplicationController
screenshot of my #create & #login methods in my CaregiversController
this is an example of where my encode_token would be used in my caregivers controller, but also in my parents controller for the login and creating caregivers/parents.

I also utilized another new concept MUI, which is a React library, that really was a challenge in the beginning as well. After a few weeks of it though, I really started to enjoy Material UI and can see myself using it a lot more in future projects.

So once a user is signed in, they will see their dashboard, which will list in Cards other caregivers/parents depending on which user type you sign in as. For example, if you are signed in as a Caregiver, you will be able to meet the parents/guardians with their short bios:

Press enter or click to view image in full size
caregiver dashboard screenshot

If you are signed in as a Parent/Guardian, your dashboard will have a list of caregivers where you can browse through their short bios:

Press enter or click to view image in full size
parent/guardian dashboard screenshot

Once logged in, for this case as a caregiver, you will be able to navigate through the menu (in Mui, I used a mash between Menu and App-Bar to get the 3 horizontal lines provided in AppBar to create the drop down in Menu)

The top half (above the black line) shows All Available Jobs and the bottom half (below the black line) shows this specific caregiver’s Requested Jobs along with the job request response by the parent/guardian.

In terms of functionality and presentation I am proud of being able to create an app like this for my capstone project. I do want to eventually implement more functionality to my app in the future, including but not limited to the in-app chatroom where users can message each other, and omni-auth to be able to utilize Facebook to log in.

Thank you!

--

--