SuperSelf Plus

Have a look at the previous version here (https://github.com/lhmson/SuperSelf) - with another tech stack

Target for a mobile application 🎯 of Self development training 😎 by React Native

We are building a product for a community of positive lifestyle

Fill your life with good habits 👍 Put your little steps into the large world 👟 Let's be the glowing star 🌟

Note: this is my school project to learn Mobile Application Development. Hope it will get high remarks

---

📝 Table of Contents

• Introduction
• Getting Started
  • Prerequisites
  • Install
• Usage
• Features
  • Habit Tracker
  • Running Tracker
  • Statistics
  • Community
    • Events
    • Share-Connect
  • Others
• Project Structure
• Tech Stack
• References
  • Tools Libraries
  • Articles tutorials
• Team
• Contributing
• Development
  • Progress
  • Future Development
• License

Introduction

In the era of this fast-paced society, people need to constantly develop themselves in many aspects of life, especially with the support of technology. Many applications such as Fabulous, Habitify, ... help us manage these things. However, this is a new field that can be exploited and further developed, so my team choose to research and implement an app which helps build good habits and motivate personal development, named SuperSelf - Self Development App. The product inherits the strengths of its predecessors, and incorporates a number of interesting features towards the maximum personal development of the user.

Not only a normal scheduling application, where user can easily check as well as update their progress any time, SuperSelf offers users a new and exciting feeling when playing as a character joining in events and get highest rankings, collecting experience and score with lively and intuitive statistic graphs. In addition, the application also has a classification of lots of suggested habits based on scientific recommendation, which are related to personal development (human communication, relationships, motivation, health, finance management, goal planning, knowledge and skills, spiritual strength ...).

We offer a bunch of utilities to help you effectively take and measure your actions, one of which is the integrated running tracker. Anything better than get on our shoes and go for a run everyday? This is one of the best habits to train, which makes every aspect of your life better. You will know your number of steps in a day or activate the running mode for a period of time, then get the results and know yourself better.

One more interesting feature is to connect people, in virtual events and even in the real space: you can find others with simliar habits nearby your area. At the same time users can share short stories about themselves (when they set goals, achieve success, ...) - everything is presented in the style of social-network like Facebook. In short, our aim is to build a community of better selves. Let's join us to become the master of life.

Getting Started

Prerequisites

Click to read more

This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.

Install Expo and get used to it - a very helpful tool for building universal React app, as it mentions in the documentation.

$ npm install -g expo-cli

If you want to run the app directly before deploying in iOS or Android, download Expo Client on your phone.

Make sure you have downloaded the suitable version of Expo up to now. It should be Expo SDK >= 40.

Install for dev

Click to read more

1. First, clone this project

$ git clone https://github.com/lhmson/SuperSelfPlus.git

2. Change directory

$ cd SuperSelfPlus

3. You can see two folders client and server. Open in an editor (Visual Studio Code or so).

4. Install packages for both client and server.

$ npm install

5. Config suitable backend and database

• In constants/configs.js of folder clientSuperSelf, edit backend url of your own (i.e. http://192.168.1.8:5000, check ipconfig)
• In server, add file .env and add connection url and jwt key and cloudinary key

CONNECTION_URL = mongodb://localhost:27017/SuperSelf
JWT_ACCESS_KEY=test
CLOUDINARY_NAME=abc
CLOUDINARY_API_KEY=123
CLOUDINARY_API_SECRET=test12345

6. Run the app
   For server

$ npm run start:dev

For client

$ npm start

or

$ expo start

7. Scan displayed QR code with Expo client

8. Enjoy all features of the app by signing up

Usage

Click to read more

First you have to have an account. Click Sign up and enter. Just easy as that and you can explore the world of self development

Requirements of device:

• Android >= 8
• RAM: 2GB
• ROM: >= 54MB

Features

SuperSelf features diagram

Habit Tracker

Demo habit tracker

• Home: user can track all of their habits, pick specific days, easily check as well as update progress.
• Add habit: add new habits (Do, Do not), set reminder, theme, and set target. They can even hold event for that habit so the community can join with them
• SUggestion: display recommnened habits, based on trending and classified by topics

Running tracker

Demo running tracker

• Running: user can get overall of their running activity (steps, pace, calories, distance, time)
• Goal running: setup some running plan integrated with available habits, which can be auto updated based on the distance you run
• Map from Google, realtime path drawing and location update

Statistics

Demo statistics

• Habit Statistics: check progress of one specific habit, history and level of completion by streaks (the sequence of 21 days). Calendars, lively graphs
• Edit info of habit
• Edit user: update info like avatar and name, upgrade membership coming soon

Community

Events

Demo events

• Ranking: scoreboard of event joiners, including your position
• Event: display all events and status of them
• Detail event: more info of one event, progress of it

Share-connect

Demo share and connect

• Stories: share stories of yours like achievements and goals. Like as well as share posts.
• Post story: user can post story, with images from gallery or camera
• Nearby me: find by geolocation, see other;s profile to check if they have the same habits with you

Others

Demo others

• Loading
• Sign in
• Sign up
• Utils like countdown to measure time, with music for you to effectively take a habit

Project Structure

Architecture Design

App Screen Flow

Tech Stack

• Languages: JavaScript
• Frontend: React Native >= 0.63
• Backend: NodeJS >= 14, Express
• Database Service: MongoDB (Atlas)
• Text Editor: Visual Studio Code
• Tool: Expo >= SDK 40
• Version Control System: Git
• UI Prototype: Powerpoint, Figma
• Deploy: Heroku

References

Tools Libraries

Frontend

• Nativebase : UI library

• React Navigation : navigation handle

• Expo push notifications : push notifications

• Styled components : CSS for React

• React context : UI state management

• Redux : UI state management library

• Lucid chart : draw UML

• axios : HTTP client

• victory-native : graphs, charts

• react-native-maps : map, path

• expo-location : user location

• expo-sensor : pedometer mobile

• expo-notifications : local noti

• moment : datetime easy

• react-native-calendar : UI calendar

• React-native-countdown-component : timer

• socketio : realtime

Backend

• mongoose : ODM for Mongo
• socketio : real time
• JWT : authentication
• cloudinary : file upload

Resources

• expo vector icon
• Pinterest
• Unsplash

Articles tutorials:

• DesignIntoCode
• React Native Animation
• Combining Stack, Tab & Drawer Navigations in React Native With React Navigation 5, Ekunola Ezekiel (2020)
• App Push Notifications – The Complete Guide: James Ewen (2017)

Team

This project exists thanks to all the people who contribute.

My original team has 2 members, including:

• me, Le Hoang Minh Son (lhmson) : 18520350@gm.uit.edu.vn
• and Pham Lien Sanh (sanhlike) : 18520146@gm.uit.edu.vn
  Feel free to contact us for info We discuss, select a topic, and specify the software design process, then make a list of features to implement, which has changed many times before we have this product.

Made with contributors-img.

Contributing

Feel free to dive in! Open an issue or submit PRs.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project follows the Contributor Covenant Code of Conduct.

Development

Progress

We are publishing this app to Google Store. After that, we will continue to develop more features.

Future development

Some examples of functions to implement, these are plans of us

• Scale number of users while keeping the stability of the app

• Optimize memory and execution time of functions

• Message among users (like Messenger)

• Build web and sync among platform

• and many aspects to generate

• SCIENTIFIC RESEARCH:

  • Build a recommendation system based on user profile
  • Integrate AI for handling user interaction, calculate and generate remarks
  • Integrate data analysis to improve UX
  • Study algorithms for optimizing links in networks
  • Get data from application like Apple watch or Google Fit

License

MIT License
Copyright (c) 2021 Team SuperSelf

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
OR OTHER DEALINGS IN THE SOFTWARE.