Skip to content

mobile application for tracking your mood over time. It allows users to select a mood from a predefined list and optionally add notes to each mood entry.

Notifications You must be signed in to change notification settings

ugrylmz/MoodTracker

Repository files navigation

Mood Tracker App

This is a simple mobile application for tracking your mood over time. It allows users to select a mood from a predefined list and optionally add notes to each mood entry.

All Features

  • using TypeScript with React Native
  • recap on core components and React Hooks
  • bottom navigation
  • JavaScript-only vs native libraries for React Native
  • using React Context to store global app state
  • persisting data across app launches
  • rendering images locally and via url
  • svg's in React Native
  • animations using LayoutAnimation
  • bespoke animations using Reanimated 3
  • adding app icons
  • adding a splash screen

Changes

  • Added add note optionally functionality for mood items in the MoodItemRow component.

TO DO:

  • add a feature to allow the user to edit a mood item
  • group the items in the history tab by day and render the days using a drawer layout
  • create a component to fade or scale in when an image loaded via url has finished loading
  • animated header for a scrollable page
  • use react-native-haptic-feedback to add a vibration effect when the user selects a mood
  • react-native-sound to play a soundtrack in your app that the user can turn on and off
  • react-native-push-notification to send a notification to the user at a specific time
  • react-native-share to allow the user to share their mood data with others
  • auth flow with react-navigation
  • react-native-firebase for push notifications
  • react-native-firebase for analytics
  • react-native-firebase for crashlytics
  • react-native-firebase for remote config

Screens

Home Screen

The Home screen displays a background image and allows users to select their current mood from a predefined list.

History Screen

The History screen shows a list of mood entries, with the most recent entries displayed first. Users can swipe left on a mood item to delete it.

Analytics Screen

The Analytics screen provides insights and visualizations based on the user's mood data over time.

Setup and Installation

  1. Clone the Repository

    git clone https://github.com/ugrylmz/MoodTracker.git
    
  2. Install Dependencies

    npm install
    

    or

    yarn install
    

    This installs the necessary packages, including React Navigation (@react-navigation/bottom-tabs, @react-navigation/native) and UI enhancement packages (react-native-safe-area-context, react-native-screens).

  3. Run the App

    npx react-native run-android
    

    |

    yarn android
    

    or

    npx react-native run-ios
    

    |

    yarn ios
    

    depending on your target platform.

Additional Information

  • Prettier and VSCode Settings: The project is configured with Prettier for code formatting and includes custom VSCode settings for enhanced development experience.

  • MainActivity.java: Customization in the MainActivity.java for optimal React Native setup.

Contributing

Feel free to contribute to this project. Please ensure that you follow the existing coding standards and commit message formats.

Author

About

mobile application for tracking your mood over time. It allows users to select a mood from a predefined list and optionally add notes to each mood entry.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published