JadenFurtado / Blossom

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Blossom

image

An application to help you out with stress

Table of contents:

About:

So, this started as me having fun and exploring AR and three JS. I found that some of the games that I added to this were rather effective in helping me deal with stress and so, I am open-sourcing the code.

architecture and design:

As mentioned before, because I have built this for fun and just to explore AR and three JS, following a good structure was not the highest on my list, and so, it is kinda (very) clunky!.
However, here is how I have structure the application:

*
|_css
|_ideas
|_img
|_js
|_journal
|_games

Design:

  • The home page

For the home page, I decided to try and put a three JS transition, to captivate the attention of a new user as well as retain old one. A little over the top? Maybe. Worth it? ABSOLUTELY!

image

  • The login page

All users have to login/signup with a Gmail account. Why Gmail? Because I plan to integrate this application with Google calendars, Google Photos, Maps, etc. We achieve user registration using Firebase. We have a simple and elegant login/signup page

image

  • The profile page

On successfully logging in, the user is taken to the profile page. The profile page consists of a robot that you can play around with and user options consisting of games, My tasks and logout.

image

  • Adding tasks to the To Do list:

You can add tasks to the to do list. These are currently stored locally only. In the future I might shift them to Firebase's realtime storage database so that they can be accessed from any device that the user might login from.

image

  • Robot animations

The different animations have been achieved using a raycaster, which detects a user tap and randomly plays an animation. Currently, I am not handling an exception case that occurs when a user taps the robot too frequently.

  • Games

There are different games that I have included. Sure, they are not competitive in nature and so, have no scores, but they were never meant to be competitive. These are just there for the user to relax. All work and no play makes Jack a dull boy!

image

These include, the cat and wool ball

image

Chill the lion

image

and Sneez the Dragon

image

Demonstration:

checkout the live site on https://jadenfurtado.github.io/Blossom

Technologies-used

  • The front end is written in HTML, CSS and JS. As mentioned, a lot of ThreeJS has been used in this app for various transition effects and the animations and 3D models.
  • The backend uses Firebase for authentication and Firebase Readltime database for future versions of the application that may require a DB.
  • Why firebase? Well, as I was building this for fun and with the aim of focusing on three JS and AR, I did not want to spend too much time coding a backend and so firebase was the obvious candidate. That and the fact that this use case kinda seemed reasonable for me to use it at that time. Although, if the number of users on this application grow, I might consider shifting to a backend built on Flask.
  • As it does not really have a backend, I have hosted it on GitHub pages for now

Local Setup and Contribution:

For setup:

  • Clone the repository locally
  • Change a few of the links in the site (They were hardcoded by me 😅) Feel free to open an issue or a PR and I'd love to see what ideas you have for this application!

Security:

I take the security and safety of my application and its users very seriously. Although I have taken every precaution that I could, I realize that there may be a few loopholes that I may have missed. Do please flag them to me should you find any so that they can be patched by me ASAP!

Future Scope:

As mentioned previously, I am planning to integrate this application with Google's suite to have better functionality. I am also planning on releasing a journal in this application for people to take down important notes or write their hearts out. And maybe drawing, pictures and other functionality as and when I get the time to work on them! I decided to release this in it's current form simply because I have achieved my primary objective, i.e. have fun and make something cool. Converting this into a product, that comes later.

License:

The app is under the Creative Commons Zero v1.0 Universal license

Authors:

This app was written by me, Jaden Furtado For certain components that I have used, the credits go to them. The list is here

About

License:Creative Commons Zero v1.0 Universal


Languages

Language:HTML 87.8%Language:JavaScript 8.6%Language:CSS 3.6%