Countivity

Home page of App
The Dashboard of the App

What it does

It is a simple web application which motivates users to do positive activities throughout the day, keeping their mind busy on something else instead of negative thoughts.

The application suggests 3 random activities out of a list of activities to complete. Upon completion of an activity, it is added to the database, and a score is derived through a formula including the Total Activities Completed and the Total Hours done. This score keeping formula will motivate users to get a high score to be on the worldwide leader board, making them do a number of positive activities throughout the day

The shades of blue and yellow create a sense of warmth, calmness and serenity.

How I built it

As majorly a front-end developer, I decided to focus more on the UI/UX of the application. I made the front-end of the app off of ReactJS and special front-end dependencies like Tilty for sleek animations. I used light gradients to make the design minimal and repeated the color palette on most of the pages.

In terms of backend, I created a server using NodeJS and Express which would receive and send data to Firebase. I used firebase as it is really easy to use, in terms of rapid prototyping / developing, and I've used it before too. I also ended up implementing a small API link to motivate the users with a inspiring / famous quote on the apps dashboard

Challenges I ran into

While creating the back-end and implementing it with the front-end, I could not send POST requests to the server. I tried to fix it, but I failed. After some more time of research, I decided to use GET requests with URL Parameters to send data to the server.

Another challenge was adding the Ranking system, which I haven't yet fixed due to the constraining time limit.

I haven't ever deployed a full stack yet, so I ran into issues while deploying to heroku. Instead, I decided to keep the Server on Heroku and the Client on Netlify.

Accomplishments that I'm proud of

I'm extremely proud of the UI/UX of this application. I worked majorly on making the whole experience smooth and fast. This has been a very enjoyable project and I deeply enjoyed working on the design and colors of this app.

What I learned

The main skills I've developed during this project was my back-end skills. Using NodeJS and Express for a second time was hard, but I learned a number of techniques which I hadn't known before, such as using URL Parameters to pass information. In terms of React, I got to use Axios for the first time and I deepened my understanding on useState / useEffect React Hooks.

I've also learned how to deploy a full stack application like this, using Heroku + Netlify. Connecting Netlify to GoDaddy with a custom domain was another thing I learned.

What's next for Countivity

For a greater target audience, I plan on making my design more responsive, in turn mobile friendly, as many people use their phones more than their laptops/PCs.

I also want to completely finish all the features, including the ranking system (which has left me puzzled for now).

I intend on adding a cool-down feature so that people honestly do positive activities instead of spamming and getting a high score.