Web Impact Builder

We created a website builder tailor-made for charities and non-profits. The Web Impact Builder aims to enable these organizations to quickly launch robust websites on limited budgets.

Comment

Inspiration

Over the past five years, we (Jian & Jenny) have both participated in and led several volunteering and charity organizations. However, we have consistently faced challenges with website construction resources available for non-profits. While platforms such as Wix and Wordpress offer users the ability to create comprehensive websites with no-code interfaces, they often restrict critical features behind expensive subscription tiers. Non-profits require premium features like accepting donations and unrestricted surveys, which are necessary for their operations. Additionally, many features offered by these platforms are irrelevant to the needs of non-profits. As a result, we recognized the need for a customized website builder that caters specifically to non-profit organizations at an affordable price.

What it does

The Web Impact Builder provides users with an intuitive no-code interface to create websites effortlessly. Users can begin by creating an account and logging in using a comprehensive authentication system. On the dashboard, users can quickly create a new website and enter the website creator environment. Here, they will find a drag-and-drop interface that allows them to add, remove, and reorder website building blocks on a canvas. Users can edit the content of each block, such as text, images, videos, surveys, and donation acceptors, by clicking on the corresponding block. Once the website is complete, users can preview it on their browser or export the code. With the exported code, users can deploy their website on web hosting services without having to rely on expensive website builders like Wix.

How we built it

Our project is based on a stack involving MongoDB, Angular, Express, and Node.js. To create the frontend, we used the Angular framework and incorporated HTML and CSS for design and styling. On the other hand, the backend was constructed using Node.js and Express. Their primary role is to facilitate communication between the frontend and our database. Our database is hosted on a MongoDB Atlas cluster.

Challenges we ran into

The biggest challenge we ran into was the integration of a drag-and-drop library into Angular in order to facilitate the website-building interface. Many available libraries were not compatible with the newer versions of Angular, so many of the ones we tried ended up creating problems with other areas of our code. It took a few iterations and downgrades to find a working solution.

Accomplishments that we're proud of

We are very proud of the HTML generator, which transforms the visual interface into directly usable code. This process was challenging to create, as it needed to incorporate a very high degree of customizability on the part of the user. It also enabled us to apply some of the object-oriented programming principles we learned in our computer science classes.

What we learned

During this project, we learned a lot about Angular and Node as we had simply gotten more time to get accustomed to these languages. Additionally, we got to learn about password hashing through our implementation of the auth system, and we learned about how to use cookies to store user data during a given session.

What's next for Web Impact Builder

We hope to continue working on this project as we are excited about this idea and there are many ways to expand on the current proof-of-concept iteration. We were in the process of integrating our software with the Github OAuth API to facilitate automatic and low-cost deployment on websites via Github Pages. We also hope to expand the number of components and customization options available to allow WIB to become a more robust website builder. In the future, we may consider making this project open-source to encourage collaboration with the wider development community.

Share this project:

Updates