Here we go the final submission for the DigitalOcean
hackathon before that thanks to DigitalOcean to give me the opportunity to face this event with enthusiastic peoples.
There is no wealth like knowledge and no poverty like ignorance
Thanks again to Digital Ocean.
Project Name: FundRaiser
What I build by the name its fundraising platform to help NGOs(non-governmental organization) to build their fundraising campaign on their site without knowing how to manage Members and tracking payments.
It is simply called by a term called
NO CODE APP DEVELOPMENT.
So I created a plugin that enables web developers to integrate fundraising platforms without touching code.
Let's dig in...
Program for the People
As I mentioned in Part1 FundRaiser plugin gives NGOs or whoever using the campaign to collect money from donors.
Anyone can set up without any hassle ;) with beautiful UI/UX.
First of all, Open the link in a browser it will lead you to the console for setting up the fundraiser.
Then follow screenshot no: 1, 2, 3, 4
After setup is done its leads to a Login page then enters the credential that created in the setup page. After login success, we can see the DashBoard where we can see active campaigns. (ref screenshot No 6)
By clicking the Create new campaign button we can create a new campaign with details (ref screenshot No 7).
If You're existing is developed using WIX, WordPress, Laravel, Python, or Simple HTML don’t worry fundraiser plugin serves equally So without any hassle by following the below steps we can configure FundRaising Campaign on any site.
Just Copy Paste Following Code inside Your page ** 'head' **
<link rel="stylesheet" href="./buefy/buefy.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.js" integrity="sha512-otOZr2EcknK9a5aa3BbMR9XOjYKtxxscwyRHN6zmdXuRfJ5uApkHB7cz1laWk2g8RKLzV9qv/fl3RPwfCuoxHQ==" crossorigin="anonymous"></script>
And again Copy and Paste the Following line before of Closing Body tag ** 'body' **
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- Full bundle --> <script src="./buefy/buefy.min.js"></script> <script src="./js/fundraiser.js"></script>
And The Final thing just the widget code to which section you want to display the Components.
<div v-if="campaignshow" class="columns is-flex-wrap-wrap"> <campaigncard v-for="(campaign,index) in campaignlist" v-bind="campaign" :index="index" v-on:donate="openPaymentModal($event)" :key="index"> </campaigncard> </div> <!-- campaign end --> <b-modal v-model="isComponentModalActive" has-modal-card :can-cancel="false"> <pay-form v-bind="payForm"></pay-form> </b-modal>
After integration done users can see and donate their funds using the preferred payment method.(ref screenshot No 8)
Facts on Education and effects of child labour in India
At least 35 million children aged 6 - 14 years do not attend school.
So via this plugin(No-Code) help the other NGOs to integrate the FundRaising campaign in their site to get fund from people to do good.
I’m using Laravel and VueJs and Buefy for this project. Because Laravel is a powerful platform and also has good developer documentation and is flexible for extensibility. And Vue Js Is to Improve the frond-end User Experience.
Use powerful app distribution DigitalOcean to setup and configure the FundRaiser.
- Recurrence Member fund.
- Email Digest for campaign
- Mobile app integration
Thats All Folks