nhucleus / serenity-app

Serenity App

This app utilizes Flask SQLAlchemy for its backend and React.js / Redux.js for its frontend.

Project Description

• Serenity is an app for users looking for some positivity in their lives! The positive quotes rendered on the Splash page are from zenquotes.io. When a user logs in, there’ll be tranquil music playing to set the mood. When a user successfully signs up and logs in, they’ll be able to journal, draw, and leave nice comments for other users to increase positivity within their lives.

MVP

• Hosted on Heroku, found here.
• Audio begins on a loop once the user is logged in
• User dashboards are displayed as a calendar with a list of tasks to complete every day
• Logged in users can write journals, draw images with a virtual canvas, and leave nice comments for other users

Database Schema and Diagram:

Users

Column Name	Data Type	Details
id	integer	not null, primary key
firstName	string	not null
lastName	string	not null
username	string	not null, indexed
email	string	not null, indexed
avatar	string	no constraints
hashedPassword	string	not null
createdAt	datetime	not null
updatedAt	datetime	not null

• unique index on username
• unique index on email
• avatar will be URL to picture using AWS
• Users have many journal entries and drawings

Journal_Entries

Column Name	Data Type	Details
id	integer	not null, primary key
userId	integer	not null, foreign key
title	string	no constraints
body	text	no constraints
photo	string	no constraints

• Unique index on userId
• photo will be URL to picture using AWS
• A journal entry belongs to a user

Drawings

Column Name	Data Type	Details
id	integer	not null, primary key
userId	integer	not null, foreign key
title	string	no constraints
image	string	not null

• Unique index on userId
• image will be an object containing gridpoints from react-canvas-draw npm component library
• A drawing belongs to a user

Comments

Column Name	Data Type	Details
id	integer	not null, primary key
userId	integer	not null, foreign key
message	text	not null
friendId	integer	not null, foreign key

• Unique index on userId and friendId

Friends (Join Table)

Column Name	Data Type	Details
userId	integer	not null
friendId	integer	not null

WIREFRAMES

PATH: "/"

PATH: "/signup"

PATH: "/login"

PATH: "/dashboard"

PATH: "/new/journal"

PATH: "/new/canvas"

PATH: "/new/comment"

PATH: "/dashboard"

PATH: "/inbox"

PATH: "/journal/:id"

PATH: "/journal/all"

PATH: "/canvas/:id"

PATH: "/canvas/all"

API Routes

• auth_routes: "/auth"

  • GET
    • Authenticate a user: ""
    • Logout a user: "/logout"
    • Unauthorized route: "/unauthorized"
  • POST
    • Login a user: "/login"
    • Signup a user: "/signup"

• journal_routes: "/journal"

  • GET
    • All journal entries: "/entries"
    • A journal entry: "/<int:id>"
  • POST
    • Create journal entry: "/new"
  • DELETE
    • Remove journal entry: "/<int:id>/delete"

• canvas_routes: "/canvas"

  • GET
    • All canvas drawings: "/drawings"
    • A canvas drawing: "/<int:id>"
  • POST
    • Publish a drawing: "/new"
  • DELETE
    • Remove a drawing: "/<int:id>/delete"

• message_routes: "/inbox"

  • GET
    • All messages: "/inbox"
  • POST
    • Send a message: "/new"

Components List

• Splash Page
• Login Modal
• Signup Modal
• Calendar/Dashboard Page
• Journal Modal
• Canvas Modal
• Comment Modal
• Drawer Component
• Inbox Component
• Footer Component

Technologies

• React
• Redux
• Flask
• SQLAlchemy
• react-calendar npm
• react-canvas-draw npm