Skip to content

Social platform for people with chronic diseases

Notifications You must be signed in to change notification settings

maciejb2k/chronlife

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ChronLife

Ruby on Rails CI

This repository contains my full-stack side project, which is a social platform for people with chronic diseases.

Technologies used in this project:

Ruby Rails Hotwire Postgres Redis Docker

homepage showing hero section of the platform

What is this project about?

The idea of this project, is to provide very simple and user friendly platform, where users can manage their chronic diseases, share their experiences with other people, find new friends and support each other.

Checkout the screenshots from the application with detailed explanations below for more details.

Getting started

  1. Install the following dependencies:
  • Ruby 3.2.0 (I'm using chruby)
  • NodeJS 18.16.1 (I recommend using nvm)
  • Yarn (npm i --global yarn)
  • Docker (Ubuntu setup)
  1. Create .env file in the root directory and fill it with the necessary data. You can use .env.example as a template. To setup ActiveRecord encryption, you can use the following command:
bin/rails db:encryption:init
  1. Setup docker containers for local development:
docker-compose up -d
  1. Finally, execute the following commands:
# Install dependencies
bundle install

# Setup the Rails application:
./bin/setup

# Run the application:
./bin/dev
  1. Sign in to the app:

Depending on the locale, the seed data will be different. For each locale (:en is default one), there is a predefined user with the following credentials (the Atopic Dematitis disease in the panel has some predefined data):

:en locale:

  • Email: john.doe@gmail.com
  • Password: password

:pl locale:

  • Email: tomasz.nowak@gmail.com
  • Password: password

Design

I've came up with the design of this application by myself. I am not using any tools like Figma to create UI. I'm just creating the design on the fly. While working by myself, I really like this approach.

95% of SCSS code is also written by myself. I am not using any predefined templates, themes, blocks, utilities or component libraries, besides a few Stimulus Components or Quill Editor.

Maybe I'm weird, but I enjoy getting my hands dirty with CSS.

Hotwire (Turbo + Stimulus)

This application is my first take on Turbo (I've used Stimulus before, so it's not that big deal).

I haven't used the Turbo features in the whole project, but only in a few places, where the application required eager-loaded frames or some interactivity, like the comments section and reactions for disease statuses, friend requests, some of the forms and flash messages.

RSpec & Rubocop

Right now, there are only model specs (406 examples, 0 failures), but I'm planning to add system specs in the future.

If the GitHub CI passes, it means that there all specs are passing and there are no Rubocop offenses in the codebase.

Note: The test database requires seeding. Also, if you are switching between locales, you need to seed the test database again:

RAILS_ENV=test bin/rails db:reset

I18n

This application is I18n-ready, offering full translation support for both Polish and English languages.

If you want to change the locale of the application, you can do it by changing the I18n.locale value in the config/initializers/locale.rb file.

# config/initializers/locale.rb

I18n.default_locale = :en

Remember to reset and seed the database again after changing the locale, if you want to see the data in the new language.

Application overview

Below is a list of features that I've already implemented or I'm planning to implement in the future.

Auth

  • Users authentication using Devise
  • Confirming account, resetting password
  • Omniauth authentication with Google
  • 2FA authentication
  • Sing in using backup codes

sign up screen sign in screen reset password two factor authentication screen two factor authentication screen

Dashboard

  • Showing feed from friends
  • Showing common statistics

dash_home

Diseases

  • Users can add disease from the list of predefined diseases

diseases add_disease

Disease Panel

  • Users have access to the disease panel, where they can manage their disease statuses, symptoms, risk factors, therapies and photos

disease edit_disease

Disease Statuses

  • Users can share short updates about their disease and related well-being

disease_statuses edit_disease_status

Disease Statuses - Comments and Likes

  • Friends and group members can comment and like disease statuses
  • Comments and likes features are implemented using Hotwire

disease_status

Disease Symptoms

  • Users can add disease symptoms with updates of their severity in time
  • Users can add predefined symptoms
  • Users can add their own symptoms

disease_symptoms disease_symptom new_disease_symptom

Disease Risk Factors

  • Users can add disease risk factors, with the intensity of their influence on the disease

disease_risk_factors disease_risk_factor

Disease Treatments

  • Users can add disease treatments
  • Multiple diseases can be assigned to the same treatment
  • Users can post updates about the effectiveness of the treatment with simple statuses

treatments treatment edit_treatment

Disease Photos

  • Users can add photos related to their diseases

disease_photos disease_photo

Groups

  • Users can only join groups related to their diseases
  • When users join a group, they can see all of the disease statuses, symptoms, risk factors, therapies and photos from all of the users with the same disease. This way, users can compare their disease statuses, symptoms, therapies, etc. with other people.

groups

Group Posts

  • Users can share posts in groups about anything related to their disease

group_posts

Group Disease Statuses

  • All of the disease statuses from all of the users with the same disease are aggregated in one place

group_disease_statuses

Group Disease Symptoms

  • All of the disease symptoms from all of the users with the same disease are aggregated in one place
  • There are simple statistics about predefined symptoms assigned to the disease by all of the users

group_disease_symptoms

Group Disease Risk Factors

  • All of the disease risk factors from all of the users with the same disease are aggregated in one place

group_risk_factors

Group Disease Treatments

  • All of the disease treatments from all of the users with the same disease are aggregated in one place

group_treatments

Group Disease Photos

  • All of the disease photos from all of the users with the same disease are aggregated in one place

group_disease_photos

Measurements

  • Users can easily add common measurements like blood pressure, blood sugar, weight, etc.
  • Users can track their measurements in time
  • Users can easily view all health measurements from a specific day using the calendar view.
  • Users can view their measurements in a chart
  • Users can generate a PDF report with all of their measurements from a specific day

measurements measurements_calendar measurements_charts measurements_by_day measurement measurement_raports

Notes

  • Users can add simple notes
  • Users can pin or unpin notes
  • Users can add tags to notes

notes note new_note

Account

  • Users can view their or others accounts

account

All users

  • Users can look for other users
  • Users can search for other users

accounts

Friends

  • Users can send friend requests to other users

friend_requests

Specialists

  • Users can submit a request for a specialist role, which will grant them a special status on the platform and enable them to write articles.
  • Specialist requests are verified by the administrators, which can accept or reject the request.

specialists specialist_profile specialists_requests

Articles

  • Specialists can write articles on the platform
  • Articles can be filtered by tags
  • Articles can be commented and liked by users

articles new_article article

Settings

  • Users can change their personal data
  • Users can upload their avatar
  • Users can enable two factor authentication
  • Users can change their password when signed in

settings settings_privacy settings_backup_codes

ERD Diagram

Below is the current ERD diagram of the application.

settings

TODO

Important

  • Add models specs
  • Fix all Rubocop errors
  • Fix most of the queries performance issues (n+1, etc.)
  • Complete the seeder
  • Add authorization using Pundit policies
  • Add background jobs
  • Add system specs
  • Add caching
  • Add mailers
  • Add notifications

Less important, but also important

  • Add controller translations
  • Add models translations
  • Refactor controllers
  • Add views translations
  • Refactor routes
  • Move from importmaps to jsbundling-rails
  • Add RWD

Final thoughts

Working on large side projects is incredibly time-consuming, and I didn't anticipate it to be to this extent. I'm pleased that I managed to complete the basic version of the project, as seen in the screenshots, in nearly 1.5 months. It's physically impossible to write such a substantial amount of code within a limited timeframe on my own.

One of the most time consuming parts of this project was the design and writing CSS. My goal was to create a simple and user friendly design from scratch without using any predefined templates, themes, blocks, utilities or component libraries.

Even though there are still a lot of things to do, I'm proud of what I've accomplished so far. I've learned a lot of new things, and I'm sure that I will learn even more while working on this project in the future.