Stress Grinder

In this world full of competitiveness, stress is common. Through this project a user can have a key of his/her happiness in your hands. Just sign up and you can get some exotic comic snippets.

Comment

Inspiration

The greatest weapon against stress is our ability to choose one thought over another. After going through this quote of William James I thought of making a tool/website through which a user can get some minutes of giggle & happiness so that the cycle of anxiety can be break down. This project which enable the user to have his/her own digital key to moments of happiness 🤩

What it does

This is a website through which a user can opt in for a newsletter which will contain a comic snippet. The workflow for this project is as follows:

1️⃣ User has to visit the URL: https://wheels4water.me/stress_grinder and this is the landing page for the website. The landing page has 04 sections: About, Services, Contact & Login/Signup

2️⃣ Then user has to reach the login page using the link present in the navbar. A new user first sign up, it requires a number of fields to be filled.

3️⃣ After successful signup a the user will receive a greeting message on the registered email-ID. The message will also include user's login credentials, so that incase he/she forgets it, can easily refer to that email.

4️⃣ This then takes the user to the subscription page. A subscribe button is present over there, click on that and you are good to go. After post-subscribing the UI will change and timing for the last received email will be visible at the bottom.

5️⃣ A surprise awaits for you in your inbox. After every 05 minutes, a new email containing comic snippets will be delivered to you.

6️⃣ Unsubscribe action can also be done. Either through the website you can do so by clicking the unsubscribe button or you can do the same through the website.

How I built it

The user interface is primarily made using Html and bootstrap. The back-end functioning is done by php. I have used the random xkcd API: https://c.xkcd.com/random/comic/ . This web request returns another web address which basically contains the comin number for eg: https://xkcd.com/1090/.

At the first go I tried to use Javascript's fetch function to capture the response of the api, but in that case there was a problem of Cross-Origin so I shifted the methodology to curl calls in php. Curls helped me to extract the comic number from the initial web address' response and thus I gathered the points which I was interested in.

Also at the time of *signing in * and getting the email newsletter (after every 5 minutes interval) the email templates changes accordingly and the user gets a smooth and good-looking email template.

Challenges I ran into

1️⃣ The JS's fetch function was not giving me correct response as there was a problem in CORS Cross Origin Resource Sharing property of the API. So, that's why I shifted my focus to curl in php.

2️⃣ I wanted to give the user a freedom so that the user can delete his/her account at his/her will. For achieving the same I uploaded a CRON job which will be running after every 2 minutes to check if the user has subscribed/unsubscribed from the newsletter or not?. As a matter of double check, I have added JS to the deleting action such that user will have to click twice on the delete button to do the same.

3️⃣ Generally nowadays, every now and then we see that many companies are sending emails in a templated manner and the old text style has been eliminated. But all of those companies does use 3rd party services and just use them with a click. But in my project, neither I only designed the best-looking email template but also did that manually after writing many lines of code.

Accomplishments that I'm proud of

I created a website which is a need of the hour. No one requires a website which will navigate them through the streets, no one wants a website/software which will tell them which exercise they have to do but the need of the hour is to Stop a minute in this hustle and realize that smiles can bring immense pleasure in our lives. This is not only one of the best website as far as UI or user aesthetics are concerned but also the simple but yet complex functionality take it to another level. Either you are using it on a mac or on an android phone it will adapt to the screen size and will ensure that the user gets the best of the visual experience and on the other hand mysql, php (the backend in general) ensures smooth functioning of the website.

What I learned

From configuring CRON jobs to handling web requests' response I learnt a lot while making this project. Also I am sure that my understanding of UI/UX has improved a lot and it will only get better in future.

What's next for Stress Grinder

Apart from the email templates the user can choose other sort of ways through which the email template will be composed of. At present, rest is smooth and functioning in the way I wanted it to.

Share this project:

Updates