This is a tracking and motivational application specifically designed to track the activities a user does that will improve their mental and physical health. It’s a tool that will actually raise awareness of the connection between how we show up every day and how well we look after ourselves. By tracking activities in 4 categories – food, exercise, mind, connection with others, the user will begin to see a trend which over time will encourage good choices for better health outcomes.
After setting up an account the user can CREATE an entry by completing a form daily. Data input by the user is fed into charts for easy visulation of the trends. Daily data can be READ in a Calendar format and from there the user can UPDATE and DELETE the data. The user is provided with suggestions for improvements based on their data and also inspirational quotes. Users get one point for every activity they do and can create a goal by setting the number of activities they would like to achieve each week.
This is a full stack applicaton following the MERN framework. MongoDB and Mongoose are used for data storage. GraphQL, Apollo, Express and Node.js are used on the server side for routing GraphQL queries and mutations. Authentication is done using JSON Web Token. Styling is done using Styled-Components.
The application is developed using the following technologies:
- Javascript
- CSS
- HTML
- React
- Node.js
- Express.js
- GraphQl
- Apollo
- MongoDB
- Mongoose
- Axios
- JSON Web Token
- Styled-Components
- ReCharts
- FullCalendar
- Font Awesome
- JS-Confetti
- Date-fns
- Bcrypt
- React-d3-Speedometer
One of the main challenges in developing this application was familiarisation with GraphQL.
Ensure node is installed. Test by running
node -v
To install this package run:
npm install
To run this application ensure you are in the main me-time directory.
To seed the database run :
npm run seed
To start the client and server run:
npm run develop
You should see the client/server startup message:
Once the server is running you can open your browser and enter:
http://localhost:3000/
You will be presented with the landing page with options for sign up/login:
To create an account, click the "Sign up" button. Enter your details and click "Submit". Once logged in you will see more options on the nav bar:
To complete an activity form click "Add Day" in the nav bar. Hovering over the activity cards will flip them so activities can be chosen. Once the card flips back the number of activites chosen is displayed. A Submit button is displayed. If an existing actvity form is opened from the Calendar screen the Delete option will also appear.
To view charts, suggestions and quotes click the "Dashboard" option from the navbar:
All daily activities can be viewed in a Calendar format by selecting "Daily Log" from the nav bar. Days are colour coded based on how the user rated the day.
To set a goal for number of activities per week, select "Profile" from the nav bar.
If you choose to "Show Progress Dial", it will be displayed in the dashboard.
When you are finished, click "Logout" to logout.
To try out the working application please click the link below: Slainte
This project is covered by the "The MIT License" license. For more details click on the link below: License
The application can be tested by following the instructions above under the Usage section.
I would like to thank the instructors at UWA Bootcamp.
This repository is not open for public contribution.