Nature Tracker

My Notes

Startup Description

The Nature Tracker is a creative and innovative application that is used to encourage people to spend more time in nature. It allows users to log outdoor activities and keeps track of their streak for how many days in a row they spent outside.

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Proper use of Markdown
• A concise and compelling elevator pitch
• Description of key features
• Description of how you will use each technology
• One or more rough sketches of your application. Images must be embedded in this file using Markdown image references.

Elevator pitch

Have you ever felt the call of the wild? Have you ever felt like something was missing within yourself? We all have! Due to our fast paced and work oriented society, we often miss out on opportunities to stop and literally smell the roses. This application, the Nature Tracker, encourages users to spend more time outside and enjoy the wonderous world in which we live. Its simple design allows the user to track time spent outside and even compete with others to see who can spend the most consecutive days enjoying the beauties of mother nature. Spending more time outside can literally change your life, as mentioned in this article.

Design

The photo above demonstrates the three main pages (features) of the application.

Key features

• Secure login to keep track of user data
• Simple entry creation to track time spent
• Streak tracking
• Score algorithm that gives more points based off of a variety of factors
  • length of streak
  • weather at time of the recording of the entry
• Active Leaderboard ranking

Technologies

I am going to use the required technologies in the following ways.

• HTML - Three HTML pages, as shown in the description above.
  • Login page
  • Entry creation page
  • Leaderboard page
• CSS - Application styling that reflects the purpose of the application. This will include nature-like colors such as
  • Green
  • Sky Blue
  • Brown
  • Grey
• React - React will be used to display all of the UI logic like controlling login, displaying the entry input, displaying the point scoring, and displaying rankings
• Service - Backend functionality for logic and processing
  • API calls to weather (for calculating score)
  • User point calculation
  • User authentication
• DB/Login - Stores user information, such as
  • User login information
  • User entry streak
  • User scoring (points/ranking)
• WebSocket - As users input entries and the user scores are updated, the websocket will update the ranking of the leaderboard, as well as update the information that the other users can see of each other (streak sharing). When you are displaced from the podium, it will send notifications to let you know that your place has been taken.

🚀 AWS deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Server deployed and accessible with custom domain name - My server link.

🚀 HTML deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• HTML pages - I added three pages. The login and about page: index.html, The entry page: entry.html, and the leaderboard page: leaderboard.html.
• Proper HTML element usage - I used a variety of tags to create structure and represent functionality, including the following tags: <header>, <nav>, <main>, <section>, <footer>, <form>, <fieldset>, <table>, <ul>, <li>, <label>, <input>, and <button>.
• Links - I added a variety of links. There are links in the header to other pages. There is a link in the about section of index.html to a paper about nature, and then there is a link in the footer to my GitHub page.
• Text - I added a text description in the login page to describe the application. Then, there are various places in the document where notes/descriptions are added. For example, if you hover over the points, it adds additional description.
• 3rd party API placeholder - I put a box in entry.html to list a variety of weather facts (Temperature, humidity, etc). These facts will be pulled from a weather API based off of the location provided in the entry submission. The weather will be used to affect the points received from each entry. For example, the harsher the weather, the more points a user can score from an experience outside.
• Images - I added an image of nature to the front page to set the theme of the application. Then, I added an image in the weather data box to represent what the weather might look like.
• Login placeholder - I added a input tag for the password and email of the user, which will allow them to log into the webpage. There is also a placeholder on the entry.html page which shows the username when logged in.
• DB data placeholder - The entry.html pages shows the users streak and points, which will be stored in the database. Also, the leaderboard.html will show the streak and points from other users, which will be also drawn from the database.
• WebSocket placeholder - As soon as an entry is added that changes the points of a user and thus changes the ranking, the leaderboard (in the leaderboard.html page) will change on all users devices without needing to reload the page. This will provide real time updates to all users about their current status.

🚀 CSS deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Visually appealing colors and layout. No overflowing elements. - I added a constant theme (the bootstrap success color) with different variations of opacities. This, along with the nature image scroll wheel gives a very nature-like theme. Also, shadowing was added to add depth to the page.
• Use of a CSS framework - Most of the styling was done via bootstrap. This was to ensure that styling was consistent. Occasionally, I had to use the CSS style sheets to provide more custom styling, but most was able to be done with bootstrap.
• All visual elements styled using CSS - Everything was either styled with bootstrap or a CSS stylesheet.
• Responsive to window resizing using flexbox and/or grid display - Each page has something that implements the flexbox styling. This allows for the page to adjust when put in a different orientation, so that when changing between a computer screen and a phone it can adjust accordingly.
• Use of a imported font - I used an imported font to stylize the logo at the top left of the page. This flowing font fits well with the nature logo that is used on the site.
• Use of different types of selectors including element, class, ID, and pseudo selectors - All of the aforementioned selectors were used in the CSS style sheets. The elements are used in the entry.css to stylize the main flex container and it's children. The class selector was used to create the carousel slides in the entry.css and on all pages to allow reactive styling to the navigator bar. The ID selector and hover pseudo selector were used on the entry.css page to show reactivity when hovering over the points indicator. This is to indicate that something will happen, which will prompt the user to hover over it to see the additional information.

🚀 React part 1: Routing deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Bundled using Vite - Everything when smoothly with this part of the project. I ran the command to set up my project with vite and edited the script node in the package.json.
• Components - I have four components in this application. Three for the three pages (entry.jsx , login.jsx, and leaderboard.jsx). Finally there, there is an additional component to show when no pages is found.
• Router - The router is set up to allow for the pages to be accessed smoothly without error, and if a page that is requested is not found, it routes it to the NotFound component.

🚀 React part 2: Reactivity deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• All functionality implemented or mocked out - I used the browser local storage to save user information like streaks, points, and login info. In the entry.jsx a dictionary called weatherAPISimulator was used to simulate a weather service. This allows the user to put in a few locations to the entry form and receive simulated weather data. This weather data is then processed to calculate the points and show a different display on the entry page. Additionally, on the leaderboard.jsx page the leaderboard is auto-filled with simulated players, whose scores are periodically incremented to simulate the webhook. When the ranking changes, the leaderboard adjusts as well. Finally, an adaptive message board was added to the leaderboard page to show the alerts when someone changes their score.

• Hooks - useState calls were used to allow for adaptive UI and the useEffect was used to ensure the variables are initialized properly when reloaded. See UserContext.jsx.

🚀 Service deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Node.js/Express HTTP service - Installed Express with NPM. Default port on 4000.js
• Static middleware for frontend - I added middleware to verify the users cookies before allowing any get or put requests.
• Calls to third party endpoints - I added api calls to a service called Meteo, which pulls coordinate data from a city name and uses that to get the current weather at that place. The functions can be found in service.js and are called in the entry.jsx page.
• Backend service endpoints - I added endpoints that allowed for user login, logout, registration, data retrieval, and data updates (points and streak)
• Frontend calls service endpoints - Local Storage is no longer being used, and now has been replaced with service calls, many of which in are still in the service.js file.
• Supports registration, login, logout, and restricted endpoint - Verifies user authentication via cookies and compares passwords with those stored in the backend to successfully log in the user.

🚀 DB deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Stores data in MongoDB - I took the user class that I had been using earlier and then simply stored each user instance in the database, instead of in the server array.
• Stores credentials in MongoDB - I stored the cookie token when the person logs in along with the encrypted password. When the user logs out, it deletes the user cookie token.

🚀 WebSocket deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Backend listens for WebSocket connection - I connected the regular HTTP endpoints to the peer proxy, so it now listens to the WebSocket connections.
• Frontend makes WebSocket connection - When a user submits an entry, it now sends a WebSocket message to everyone to alert them that their score was changed.
• Data sent over WebSocket connection - User scores are now sent over the websocket connection
• WebSocket data displayed - On the leaderboard.jsx page, the messages are displayed when a user gains points.
• Application is fully functional - Test and fake functions were all deleted. There are no placeholder functions or functionality, everything works as intended.