I was relaxing with my friends. One of my friends was so angry that he couldn't find a good solution to invite people to wedding events. I felt for hime. I actually thought this might be the best idea to help me learn and upskill myself. Since then i worked on the idea part time.

What it does

  • Create and Share Event cards
  • View upcoming and past events
  • View and archived(past events)
  • A simple tutorial show how to develop cards maker web app.

How I built it

The development tools I used: React JS, Node JS, Netlify, Heroku, Google OpenId(For Google Oauth), MongoDB, mindmeister(ideas sketching).

I took about one month to design and develop the API using NodeJS and MongoDB. The main features included User authentication and Cards CRUD(create, Read, Update and Delete)

After that I took about three months to design and develop the frontend. Initially I was Figma to design but this was time consuming as I was working part time. I went ahead and developed using React JS library ensuring I achieve each and every goal.

I published the first release on 2nd July, 2020, and I was pretty excited. But I had not yet achieved the goal, so I paused a bit because I didn't have time. Lately I've been working on it to improve and hoping to release a stable version soon.

Am proud of this project so far and I would like others to understand how I created this. Therefore, I created a simple tutorial to show how I created Cards maker project.

Challenges I ran into

  • Time. I worked on it part time, sometimes I had no time at all.
  • Unavailable testers - I wanted to test the first and consequent release with users hosting events or my friends. But since there was pandemic and restriction of movement, it was difficult to find any events.
  • Slow Hosting services especially Heroku because I was using free plans. This cannot be used on production as the API is so slow, and this will lead to bad user experience.
  • Small devices with What you see is what you get technique is hard to achieve. Still looking for a relevant solution.

Accomplishments that I'm proud of

Creating card using What you see is what you get technique. This allows users to feel they haven't lost touch with paper format. Whatever the user will type is what all other users will see also. Users have the freedom to choose how cards will be displayed to the user.

What I learned

  • That planning is very important. I created a lot of initial versions without any plannings without any plannings and research, and this really consumed most of my time. mindmeister tool helped me with ideas layout and tasks priority.
  • Research and understanding tools you use is very important. I later realised there are awesome tools in react to make apps performant. Like React.memo, React.lazy load would have come handy on WYSIWYG technique.

What's next for Cards Maker

A lot of core features and enhancements are still pending in Cards Maker development. The following are the next plans:

  • Invite people to contribute(open-source) to make development faster(still in consideration though)
  • Research and start on marketing the third release. I would really like to see this product helping users around the world.
  • Finish on the development tools in mindmeister
  • Develop video tutorials on how I designed and developed Cards Maker

Built With

Share this project: