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
by Buddha
Thanks again to Digital Ocean.
What I built
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...
Category Submission:
Program for the People
App Link
Screenshots
Setup
No: 1
No: 2
No 3:
No 4:
DashBoard
Login
No: 5
Campaing list
No: 6
New Campaign
No: 7
User screen after integrate done
How we donate
No: 8
Payment section
Description
As I mentioned in Part1 FundRaiser plugin gives NGOs or whoever using the campaign to collect money from donors.
Setup
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
Create Campaign
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).
Integrate Plugin
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.
Step 1:
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>
Step 2:
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>
Step 3:
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>
The User End
After integration done users can see and donate their funds using the preferred payment method.(ref screenshot No 8)
Link to Source Code
Permissive License
Background
As I mentioned in Part1 I'm in a part of NGO we help children to get an education.
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.
How I built it
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.
The Future
- Blogs
- Events
- Members
- Recurrence Member fund.
- Email Digest for campaign
- Mobile app integration
- Finance
Thats All Folks
Top comments (1)
Nice work with proper documentation