Skip to content
BranchesTags

Repository files navigation

Pain Catcher Documentation

Revision Updated
1.0.0 14/03/2022

Table of Contents

  • Framework
  • Structure
    • Front-end
      • App.js
      • Index.js
      • home/index.js
      • diary/index.js
      • diary/diaryId/recordId.js
    • Back-end
      • Database model
      • API
        • /api/auth/signUp
        • /api/auth
        • /api/email
        • /api/email/check
        • /api/email/reset
        • /api/diary
        • /api/diary/add
        • /api/diary/modify
        • /api/diary/delete
        • /api/record
        • /api/record/single
        • /api/record/add
        • /api/record/edit
        • /api/record/editTime
        • /api/record/delete
  • Installation
  • Dependencies Information

Framework

Pain Catcher application is built using Next.js framework which is based on React. Next.js is an end-to-end framework, therefore instead of having two separate instances running (front-end and back-end) and the need to deploy them independently, Next.js handles both in a single framework.

Although the frontend and backend are merged in one, they are going to be described separately in the following document for better structure.

Structure

The application uses the following stack:

  • Next.js as the end-to-end framework
  • MUI for building the front-end
  • Node.js as the back-end framework
  • MongoDB Atlas as the online cloud database

Front-End

Front end for the application is built using MUI (formerly Material UI). MUI is a library of HTML/CSS components similar to well-known Bootstrap.

Pain Catcher has the following front-end component structure:

App.js

flowchart TD
A[app.js] --> B[index.js]
A --> C[home/index.js]
A --> D[diary/index.js]
A --> E[diary/diaryId/recordId.js]
Loading

Index.js

flowchart TD
A[index.js] --> L[Login]
L --> I[Input]
A --> F[Footer]
Loading

home/index.js

flowchart TD
A[home/index/js] --> H[Header]
A --> D[Dashboard]
D --> C[ColorPicker]
D --> C1[CustomDialog]
Loading

diary/index.js

flowchart TD
A[diary/index.js] --> H[Header]
A --> D[DiaryView]
D --> C[CustomDialog]
D --> R[RecordPreview]
Loading

diary/diaryId/recordId.js

flowchart TD
A[diary/diaryId/recordId.js] --> H[Header]
A --> R[RecordView]
R --> B1[FrontBody]
R --> B2[BackBody]
R --> H1[HormoneDialog]
Loading

Back-End

Database Model

classDiagram
direction LR
users --|> diet
users --|> medication
users --|> symptoms
users --|> triggers
users --|> diary
direction TD
diary --|> record
users --|> resetTokens
class users{
+String id
+String firstName
+String lastName
+String email
+String password
}
class diary{
+String id
+String userId
+String name
+String description
+String color
+Date createdDate
+Number numberOfRecords
+Date lastRecord
}
class diet{
+String id
+String userId
+String productName
}
class medication{
+String id
+String userId
+String medicationName
}
class symptoms{
+String id
+String userId
+String symptomName
}
class triggers{
+String id
+String userId
+String triggerName
}
class record{
+String id
+String diaryId
+String title
+String painLevel
+Array areas
+Array triggers
+Number activityLevel
+Array medications
+Array symptoms
+Number mood
+Object sleep
+Array diet
+Object hormoneDetails
+String description
+String frontBodyImage
+String backBodyImage
+Date recordStartDate
+Date recordEndDate
+Boolean allDay
}
class resetTokens{
+String id
+String tokenHash
+Date expirationDate
}
Loading

API

/api/auth/signUp

Method Body Success Error
POST {
firstName,
lastName,
email,
password
}		 201: {
code:201,
type:'success',
message:'Successfully registered'
}		 422: {
code,
type,
message
}

/api/auth

Method Body Success Error
POST {
email,
password
}		 200: {
jwt,
session
}		 401: {
message
}

/api/email

Method Body Success Error
POST {
email
}		 200: {
code:200,
type:'success',
message:'Email sent successfully'
}		 404,500: {
code,
type,
message
}

/api/email/check

Method Body Success Error
POST {
email,
token
}		 200: {
error:false,
message:'Provide new password',
id:userId
}		 404,401: {
error,
message
}

/api/email/reset

Method Body Success Error
POST {
id,
password
}		 200: {
type:'success',
message:'Password was reset'
}		 500: {
type:'error',
message:'Error while resetting the password'
}

/api/diary

Method Body Success Error
GET None 200: {
data,
type,
message
}		 500: {
data,
type,
message
}

/api/diary/add

Method Body Success Error
POST {
diary,
userId
}		 200: {
data,
type,
message
}		 500: {
data,
type,
message
}

/api/diary/modify

Method Body Success Error
PATCH {
userId,
diaryId,
diary
}		 200: {
data,
type,
message
}		 500: {
data,
type,
message
}

/api/diary/delete

Method Body Success Error
DELETE {
userId,
diaryId
}		 200: {
data,
type,
message
}		 500: {
data,
type,
message
}

/api/record

Method Body Success Error
POST {
diaryId,
userId,
analysis
}		 200: {
data,
type,
message
}		 401,500 : {
data,
type,
message
}

/api/record/single

Method Body Success Error
POST {
userId,
diaryId,
recordId
}		 200: {
data,
type,
message
}		 401,500: {
data,
type,
message
}

/api/record/add

Method Body Success Error
POST {
userId,
diaryId,
bodyAreas,
frontImage,
backImage,
dates
}		 200: {
data,
type,
message
}		 401,500: {
data,
type,
message
}

/api/record/edit

Method Body Success Error
PATCH {
userId,
diaryId,
record,
bodyAreas,
frontImage,
backImage
}		 200: {
data,
type,
message
}		 401,500: {
data,
type,
message
}

/api/record/editTime

Method Body Success Error
PATCH {
userId,
recordId,
diaryId,
newStartDate,
newEndDate,
newAllDay
}		 200: {
data,
type,
message
}		 401,500: {
data,
type,
message
}

/api/record/delete

Method Body Success Error
DELETE {
recordId,
userId,
diaryId
}		 200: {
data,
type,
message
}		 401,500: {
data,
type,
message
}

Installation

  1. Clone the provided repository from Github
  2. Add the provided .env.local file into the root directory of the project
  3. Open the Terminal and type:
npm install

or

next dev

This will start installing the dependecies from the package.json and setting up the project. This could take some time.

  1. Once all the dependecies are installed, the project can be run using the following command in the Terminal:
npm run dev
  1. You can access the application from the browser using the address http://localhost:3000

Dependencies Information

  • @babel/preset-react - Javascript optimization for various new/old browsers
  • @emotion/react
  • @emotion/style

Used by MUI for styling

  • @fullcalendar/daygrid
  • @fullcalendar/interaction
  • @fullcalendar/luxon2
  • @fullcalendar/react
  • @fullcalendar/timegrid

Imports used for the calendar module

  • @mui/icons-material
  • @mui/lab
  • @mui/material

MUI dependencies

  • bcrypt - used for encryption and decryption of data throughout the application
  • luxon - date handling module for JavaScript
  • mongoose - MongoDB object modelling module for Node.js
  • next
  • next-auth
  • next-transpile-modules

Next.js dependencies

  • nodemailer - module for handling SMTP mailing service
  • randomcolor - module for generating random hex colors
  • react-colorful - color picker module for React
  • react-img-mapper - module used to map image areas to the specified values
  • recharts - module to produce a variety of plots and graphs
  • use-react-screenshot - module to take screenshot of the specified areas on the web page
  • react
  • react-dom

React dependencies

About

Pain Catcher Web Application

paincatcher.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages