ChronLife

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

Technologies used in this project:

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

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)

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

Setup docker containers for local development:

docker-compose up -d

Finally, execute the following commands:

# Install dependencies
bundle install

# Setup the Rails application:
./bin/setup

# Run the application:
./bin/dev

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

Dashboard

Showing feed from friends
Showing common statistics

Diseases

Users can add disease from the list of predefined diseases

Disease Panel

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

Disease Statuses

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

Disease Statuses - Comments and Likes

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

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 Risk Factors

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

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

Disease Photos

Users can add photos related to their diseases

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.

Group Posts

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

Group Disease Statuses

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

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 Risk Factors

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

Group Disease Treatments

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

Group Disease Photos

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

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

Notes

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

Account

Users can view their or others accounts

All users

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

Friends

Users can send friend requests to other users

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.

Articles

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

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

ERD Diagram

Below is the current ERD diagram of the application.

TODO

Important

Less important, but also important

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.

maciejb2k/chronlife