eCards Postcard Builder

Just make it, we'll send it!

Comment 1

Inspiration

We were inspired by the issues that the United States Postal Service were facing which was the loss of money that threatened their business. From a system that maintains the communication with our society, our team thought it would only be right to find a way to give back to them. Without a society that is interconnected, there would be even larger gaps between people. The way we decided to provide assistance and support is through a website that would serve to allow people to create virtual postcards to uplift others. In a further developed state, this website would allow users to also pay to have these custom-made postcards created to physical ones. The money would go towards purchasing stamps that would send these postcards. Buying stamps is one of the main ways that the post offices make money.

What it does

Currently, our website allows users to create their own virtual postcards with a some customization options. First, there is an area we the user can input the message that they would like on the card. They can change both the color, font, and size of the message. Users can also change the background of the card by selecting a solid color or uploading an image of their own. Lastly, when the postcard is finished, it can be downloaded and saved to be sent to the recipient.

How we built it

We built the project using HTML and CSS on the front-end and JavaScript in the background. We uploaded all of our code to GitHub for version control and subsequently made the project live with GitHub Pages.

Challenges we ran into

The most significant challenge we encountered in the development process was uploading and displaying the background images. At this point, we had implemented the solid color backgrounds. For nearly an hour this problem halted our progress, but we really wanted to add compatibility for images too, so we kept researching the problem. Luckily, we were ultimately able to resolve the issue after learning about the .createObjectURL() method in an article on Stack Overflow (https://stackoverflow.com/questions/10906734/how-to-upload-image-into-html5-canvas).

Accomplishments that we're proud of

Besides getting the image uploading feature to work, we're also very proud of the postcard downloading feature and the variety of fonts at our users' disposal. As an honorable mention, we're also proud of the date display, which although seems like a simple feature, was more complex to implement than you might think!

What we learned

During the development process, we learned about of lot of niche JavaScript methods, including .createObjectURL(), .toLocaleDateString(), and .measureText(). This project was also an opportunity for us to practice using GitHub for version control and GitHub Pages for hosting websites!

What's next for eCards Postcard Builder

For further development for eCards Postcard Builder, we have a vision for a website that fully allows for the aspect of truly helping the post office. This will include adding an option for selecting whether they want it to be transformed into a physical post card to be sent. They will be able to add the recipient's address which will aid in calculating the cost for the stamps. Our program could expand beyond just helping the post office and could help other organizations/businesses that need help as well.

Built With

Share this project:

Updates