Happy Vibes

Spreading positivity with some feel-good affirmations!

Comment

Inspiration

Many images circulate around the web showing positive affirmations, we wanted to create an interactive and easy way to make our own!

What it does

Positive affirmation image generator using a MongoDB database to retrieve responses from APIs to get stored images and text. We also provide input boxes for users to share their own pictures / captions, which upon generation perform a POST request to be stored for future use.

How we built it

  • HTML/CSS & JavaScript for our frontend
  • Node.js, Express.js, Mongoose, MongoDB for our backend, deployed on Heroku
  • Used GitHub for version control - created pull requests, decorated our README, and deployed application on GitHub Pages
  • Picrew to create Affi (https://picrew.me/image_maker/338622)

Challenges we ran into

Web development is still a bit tricky for us, so our frontend was reliant on the basic HTML/CSS knowledge that we have. We also ran into some security troubles when deploying our application, which took some time! More specifically, we wanted the functionality to be able to save the generated image, but there was a CORS security issue with converting the provided image link to a PNG because the operation is not so secure. This is our first time attempting to register a domain name, so also getting to know the process for that.

Accomplishments that we're proud of

Finishing and deploying our project with a frontend and backend - in working condition! In the past, when we've done hackathon projects together, we mostly pair programmed. However, this time we distributed tasks more and took ownership of different aspects.

What we learned

HTML Canvas, Webpage deployment with custom domain name - we learned we should get this registered as soon as possible because it takes some time (to figure out and get verified).

What's next for Happy Vibes

We want to further expand the content within our database with more great images and captions that can help spread positivity. Looking into different ways to display images to better suit different sizes and resolutions, and how to handle even longer captions for affirmations. Lastly, finding a good way to export the images to share on social media or with friends!

Share this project:

Updates