Live Website | Live API | Privacy Policy | Terms of Service
- Frontend: Netlify
- API: Render
- Database: Aiven (PostgreSQL)
Redis:Upstash (Sidekiq job queue)— removed, replaced with DB-backed job persistence
Care
Care is a full-stack health tracking platform built with React and Rails. Users can log medications with recurring schedules and push notification reminders, track moods, symptoms, and food intake over time, and share insights with the community. Features include email verification, scheduled medication notifications with DB-backed job persistence, web and mobile push notifications, content moderation, and a React Native mobile app.
- Care will feature full-crud functionality for: moods, affirmations and insights, which will be managed by a user. ✔️
- Allow for user sign up, authentication, login, and verification. ✔️
- Care will feature mobile-first design, that follows some of the material-design principles. ✔️
- Restrict the app only for logged in users (unlogged in users will be redirected to register/login). ✔️
- Insights page: user will be able to delete+edit his own insights, but not other users insights. ✔️
- Mobile-friendly design ✔️
- Care will be user-friendly. ✔️
- thinking about a transition from mobile to desktop mode (Media query) that makes sense, since this is a heavily mobile focused app ✔️
| Library | Description |
|---|---|
| React | Front-end client server |
| React Router | Front-end navigation between pages |
| Axios | NPM Package to help make API requests |
| Styled-Components | Front-end styling package |
| Material-UI | Front-end styling package |
| Ruby on Rails | Back-end server |
| React-Moment | React component for the moment date library. |
| Rack-CORS | back-end support for Cross-Origin Resource Sharing (CORS) for Rack compatible web applications. |
| JWT | back-end authentication dependency |
| PostgreSQL | object-relational database system |
:async adapter + ScheduledJob |
|
ScheduledJob |
for the rest of the wireframes please visit this link:
Care logo made by Freepik from www.flaticon.com
src
|__ assets/
|__ fonts
|__ graphics
|__ images
|__ mockups
|__ components
|__Context
|__ CurrentUserContext.jsx
|__ ThemeStateContext.jsx
|__MoodComponents
|__ Moods.jsx
|__ MoodCard.jsx
|__ AffirmationComponents/
|__ Affirmations.jsx
|__ AffirmationLetter.jsx
|__ InsightComponents/
|__ Insights.jsx
|__ InsightCard.jsx
|__ layouts/
|__Layout/
|__ Layout.jsx
|__ Header.jsx
|__ Footer.jsx
|__ services/
|__ apiConfig.js
|__ moods.js
|__ auth.js
|__ affirmations.js
|__ insights.js
|_ containers/
|__ MoodsContainer.jsx
|__ AffirmationsContainer.jsx
|__ InsightsContainer.jsx
|_ screens/
|__Main/
|__ Home.jsx
|__ Community.jsx
|__ More.jsx
|__ Login.jsx
|__ Register.jsx
|__ Error/
|__ NotFound.jsx
|__ AffirmationDialogs/
|__ AffirmationDetail.jsx
|__ AffirmationEdit.jsx
|__ AffirmationCreate.jsx
|__ MoodDialogs/
|__ MoodEdit.jsx
|__ MoodCreate.jsx
|__ InsightScreens/
|__ InsightEdit.jsx
|__ InsightCreate.jsx
|__ InsightDetail.jsx
|__ Modals/
|__ DeleteInsight.jsx
|__ utils/
|__ checkValidity.js
|__ goBack.js
|__ foodUtils.js
|__ emojiLogic.js
|__ getRating.js
| Task | Priority | Estimated Time | Time Invested | Actual Time |
|---|---|---|---|---|
| Create Insight, Affirmations, Moods, CRUD Actions in BE | H | 4 hrs | 30min | 30min |
| Create Symptoms BE CRUD | L | 1hr | 20min | 20min |
| Create Authentication in BE | H | 2hrs | 10min | 10min |
| Create Layout | M | 3hrs | 30min | 30min |
| Create FE Authentication | H | 3hrs | 1hr | 1hr |
| Create Insight FE-CRUD | H | 3hrs | 2hrs | 2hrs |
| Create Mood FE-CRUD | H | 3hrs | 4hrs | 4hrs |
| Create Affirmation FE-CRUD | M | 3hrs | 2hrs | 2hrs |
| Create Symptom FE-CRUD | L | 2hrs | 2hrs | 2hrs |
| Create Home Page | H | 2hrs | 30min | 30min |
| Create Register Page | H | 2hrs | 30min | 30min |
| Styling | M | 15 hrs | 15hrs | 15hrs |
| Create Sign-in Page | H | 2hrs | 2.5hrs | 2.5hrs |
| Create Insights Page | H | 2hr | 30min | 30min |
| Create Settings Page | L | 1hr | 2hrs | 2hrs |
| Create, refactor and debug Dark Mode | L | 1hr | 6hrs | 6hrs |
| Create Food BE-CRUD | L | 1hr | 1hr | 1hr |
| Create Food FE-CRUD | L | 2hr | 2hrs | 64hrs |
| Create FoodRegex | L | 4hrs | 4hrs | 6hrs |
| Fetch Medications from a 3rd Party API and handle full crud on my BE AND FE | L | 7hrs | 7hrs | 7hrs |
| ETC (styling, error handling, perfecting | L | 6hrs | 6hrs | 6hrs |
| Create likes for insights | L | 5hrs | 10hrs | 10hrs |
| TOTAL | 49hrs | 74.5hrs | 74.5hrs |
Why is this necessary? Time frames are key to the development cycle. You have limited time to code your app, and your estimates can then be used to evaluate possibilities of your MVP and post-MVP based on time needed. It's best you assume an additional hour for each component, as well as a few hours added to the total time, to play it safe.
- dark mode, the user will be able to switch between light mode and dark mode. ✔️
- symptoms, the user will be able to get, add, edit and delete symtpoms. ✔️
- foods, the user will be able to get, add, edit, and delete foods. ✔️
- medicine, Fetch Medications from my 2nd project's 3rd Party air-table API and handle full crud on my BE AND FE. ✔️
- password confirm on register: you will need to confirm your password to create your account. ✔️
- likes, be able to like an insight. ✔️
- whitelist, if a user enters a link that is not in a whitelist, bring him to a "404 Not found" page ✔️
Use this section to include a brief code snippet of functionality that you are proud of and a brief description.
This file is responsible for getting the correct icon for the food based on the typing when you create/edit your food, it uses regex and allows case insensitivity, and all symbols and spaces
The reason I call it food utils is because as you see, I'm exporting each thing, so I might want to import only one thing in that page for future use, that's why I call it foodUtils.
import RestaurantIcon from "@material-ui/icons/Restaurant";
export const foodRegex = /avocado|chicken|hamburger|burger(^cheese$)|pizza|cheeseburger|steak|meat|milk|bacon|rice|pork|soup|taco|apple|pasta|spaghetti|falafel/;
export const foodMap = {
avocado: "🥑",
chicken: "🍗",
hamburger: "🍔",
cheeseburger: "🍔",
cheese: "🧀",
pizza: "🍕",
steak: "🥩",
meat: "🍖",
milk: "🥛",
bacon: "🥓",
rice: "🍚",
pork: "🐖",
soup: "🍲",
taco: "🌮",
apple: "🍎",
pasta: "🍝",
spaghetti: "🍝",
falafel: "🧆",
};
export const foodNameJSX = (food) => {
const result = food.name.toLowerCase().trim().match(foodRegex);
if (result) {
return (
<>
<span role="img" aria-label={food.name}>
{foodMap[result[0]]}
</span>
 {food.name}
</>
);
} else {
return (
<>
<RestaurantIcon />
{food.name}
</>
);
}
};
It takes the result that the user entered, forces it to lowerCase, trims the empty spaces, and uses match on the foodRegex
if we have a result, meaning if the input that the user has entered matches one of the names on the foodRegex, we return the first result of the foodMap, which is the icon, we surround it with a span tag and a role of "img" for accessability, then we use #8199; to add a space, simillar to nbsp but a little bigger of space, and attach it next to the food name, if the user's input DOESN"T match one of the names in the foodRegex, it will return an icon with a fork and a knife instead, which is material UI's , a user still deserves an icon for his food even if it doesnt match :), I'm planning on adding foods every day, so this foodMap and regex list will get bigger and will have more icons to match user's input over time.
- What is RXGuide?
RXGuide is my second ever project, it's a front-end react-app that uses an airtable back end to do full crud, I use my airtable API from RXGuide on this project to Create, read, update, and delete a medication and associate it to a user.
- What inspired you?
Making a "utility belt/self tracking" app was my dream ever since I started programming, I personally have IBD, so I want to track my mood, symptoms, medicine, etc all the time. This app allows me to do that and also share posts with the community at the same time. Before Care I used an app called "Gali Health" to track my symptoms, however Gali didn't allow me to track food, and also it was specific to IBD, whereas this app allows you to track all kinds of symptoms and share all kinds of posts.
- Whats the next step?
The next step would be to make a React Native version of this app, because this app's design is heavily "mobile" friendly, allowing the app to be downloadable on the app store would make sense, so that's the next step for sure.
- logged in user unauthorized/unverified when refreshing
resolution: the useEffect happens before the api get request, which means the logged in user is not verified because the api request didn't happen yet, to fix this, put the currentUser (logged-In-User) in the dependency array of the fetchData useEffect that is responsible for fetching the data that is associated with the logged-in-user.
Dec 9th, 2020:
- added the option to edit an authorized user on the settings page(you can't edit other people's users, only yours)
- registration and login email no longer forced to lower case as it is handeled differently.
- added more logic to taking the meds, so when the user takes the medicine it doesn't delete it, it just tells him he took and and then he can make the decision if he wanted to delete it.
Dec 15th, 2020:
- added password confirm.
- currentUser is now also handeled with useReducer.
Dec 19th, 2020:
- users can now like and unlike an insight on the insights page.
- fixed an issue where unnecessary vertical scrolling was happening.
- fixed a zoom bug in the register and login page where white overflow was showing in dark mode.
Dec 22nd, 2020:
- You can now add an image when creating or editing an account, it's not required, so if an image isn't added, you get the default account circle icon.
Dec 25th, 2020:
- You can now add an image with actual file upload instead of pasting a link.
Jan 1st, 2021:
-
You can now write a reason for how you felt when creating/editing a mood.
-
fixed a bug where sometimes in Mood Creation or Edit it would return "Invalid Date" instead of the selected date.
-
A User can now delete his account if wanting to in the settings page, he will be asked by a confirmation modal to confirm that he indeed wants to delete it.
Jan 6th, 2021:
- Fixed an exploit where users could keep 2 tabs open and like posts twice.
- Improved loading times for fetching posts in insights page
- When you select a time necessary to take a medicine, it will now rerender live instead of needing to manually cause a rerender or reload.
Feb 20th, 2021:
- Replaced pure white background color with eggshell white for light mode for eye comfort and style.
- Users can now comment, edit comments, and delete comments on insights.
- You can also now see a user's liked insights inside his profile page
Feb 21st, 2021:
- Fixed a bug where sometimes a taken medicine wouldn't get saved to the database.
March 4th, 2021:
- Created PrivateRoute.jsx, Created AllUsersContext and AllUsersReducer.js
June 20th, 2021:
- Updated the community page with likes and comments feed.
May 15th, 2024
- Fix error messsages not showing on login fail.
- Add error messages to register page
Feb 21st, 2026
- upgrade to rails 7
- rx guide meds fetched from rails server rather than client
- fixed security gaps, backend validations, rate limiting.
- performance improvements of N+1 queries
- added a date carousel picker and now data in home page is filtered based on date (with a toggle switch for "All")
- added a new 3d logo based off of the 2d logo
- added email verification and forgot password flow
- added rspec backend tests
- added cypress front-end tests
- added mobile app version
- added web browser push notifications (docs)
- added Privacy Policy and Terms of Service pages
Feb 22nd, 2026
- added reports feature, can now report insights (docs)
- added admin users, admins can look at reported insights and verify
- added blocking, users can now block other users
- added backend blocking for insight content that might be inappropriate, uses OpenAI to review the content.
- updated browser version UI to have a slightly more modern look but still in-large keep as is.
- create/edit insights using markdown editor and markdown reader for detail page
- added med scheduling (docs)
Feb 23rd, 2026
switched background jobs from(reverted Feb 24th):asyncto Sidekiq backed by Redis- added recurring medication notifications via daily cron job at 4 AM UTC
Redis hosted on Upstash (free tier)(removed Feb 24th)added Sidekiq Web UI at(removed Feb 24th)/sidekiqwith admin-only HTTP Basic Auth
Feb 24th, 2026
- replaced Sidekiq + Redis with DB-backed job persistence (
ScheduledJobmodel +:asyncadapter) - Upstash Redis free tier hit 500K request limit — Sidekiq polls Redis ~100K+/day just idling
- jobs now persist to PostgreSQL
scheduled_jobstable and re-enqueue on server boot DailyMedicationSchedulerJobself-reschedules for next day after each run- removed Sidekiq Web UI, Foreman no longer needed (single Puma process)
- disabled RX Guide Airtable API call (free tier limit hit),
rx_guidereturns[]