Skip to content

A full stack single-page habit-building app for mental health where users can add and track journals, personal goals, and daily moods.

Notifications You must be signed in to change notification settings

stella-kang/Koko

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Welcome to Koko!

Who is Koko?

Koko is your mental health accountability partner. Koko's goal is to facilitate healthier mental wellness by encouraging healthy habits such as mood tracking, goal setting, and journaling. Koko allows users to set personal goals for themselves, creating a safe space of accountability towards a brighter and healthier future.

Notable Technologies

Database:

  • MongoDB
  • Mongoose

Backend:

  • Express
  • Node.js

Frontend:

  • React
  • Redux
  • HTML5
  • CSS3
  • SCSS

Notable Features

User Authentication

Users can create new accounts which they can use to log in and out of Koko. On successful login, they will be routed to the main app. On unsuccessful login, errors will be displayed in red. A demo user is provided so that users can browse the site without having to create an account themselves.

Unsucessful login

Full CRUD cycles for "Reflections" and "Goals"

Users can create, read, update, and delete both goals and reflections. Any changes will be persisted upon refresh and login/logout.

// frontend/src/components/reflections/ReflectionShowForm.jsx

const [editMode, setEditMode] = useState(false);

const onSubmit = (data) => {
  const formReflection = {
    user: currentUser.id,
    entry: data.entry,
  };
  if (reflection) formReflection['id'] = reflection._id;

  const processForm = editMode ? updateReflection : createReflection;

  processForm(formReflection).then((action) => {
    if (!reflection) {
      updateExp(currentUser.id, 2);
    }
    setEditMode(false);
    openReflectionShow(action.reflection._id);
  });
};

const handleDelete = () => {
  openModal({
    type: 'deleteReflection',
    reflection: reflection,
    closeForm: closeForm,
  });
};

Monthly Log

The calendar was customized using CSS3 properties in order to achieve the exact aesthetics envisioned from the mockups. The calendar is fully functional and will retrieve the journal reflections, goals, and mood of the date selected.

Mood Garden

On the home screen, users have access to visual data representation of their moods since the creation of their account. Their moods will be represented with a gradient of colors to signify their recorded mood for each day.

Meet the Team

Stella Kang // Tech Lead LinkedIn

Mansoo Kim // Flex Developer LinkedIn

Emmay Alam // Backend Lead LinkedIn

Victor He // Frontend Lead LinkedIn

About

A full stack single-page habit-building app for mental health where users can add and track journals, personal goals, and daily moods.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •