DigitalOcean App Platform Hackathon Submission
Tags: dohackathon, laravel, vue
Published: 2021-01-09 13:19:51

--- 
series: DigitalOcean App Platform Hackathon
---
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
www.fundraiser.ml/public/

### Screenshots

#### Setup
No: 1
![Setup 1](https://dev-to-uploads.s3.amazonaws.com/i/tj958gb5n1v8fn37yruy.JPG)
No: 2
![Setup 2](https://dev-to-uploads.s3.amazonaws.com/i/vc0vcsk2fpzwqlqzaboz.JPG)

No 3:
![Setup 3](https://dev-to-uploads.s3.amazonaws.com/i/kdyqbhbwekee6xw9t6n3.JPG)

No 4:
![Setup 4](https://dev-to-uploads.s3.amazonaws.com/i/a5nfwob7dhn4cs8wgj8f.JPG)


-----

#### DashBoard
#### Login
No: 5
![Login](https://dev-to-uploads.s3.amazonaws.com/i/utpj699wcpkej4t3ucqh.JPG)

#### Campaing list
No: 6
![DashBoard-Campaign](https://dev-to-uploads.s3.amazonaws.com/i/j4dv2dt3oothi501445l.JPG)

#### New Campaign
No: 7
![New Campaing](https://dev-to-uploads.s3.amazonaws.com/i/wtn5dw5ie508tj16w5o7.JPG)

-----
### User screen after integrate done
#### How we donate
No: 8
![Donation](https://dev-to-uploads.s3.amazonaws.com/i/ww3s1rbpzfq3nz4csos0.JPG)
#### Payment section
![Payment](https://dev-to-uploads.s3.amazonaws.com/i/o8y8bqou4cl6085n3gqh.JPG)


### Description
As I mentioned in [Part1](https://dev.to/israelysm/let-s-get-started-2emp) 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
[GitHub](https://github.com/israelysm/fundraiser)

### Permissive License
[Apache License 2.0](https://github.com/israelysm/fundraiser/blob/main/LICENSE)

## Background
As I mentioned in [Part1] (https://dev.to/israelysm/let-s-get-started-2emp) I'm in a part of [NGO](http://meiezhuthu.org/) 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](https://laravel.com/) and [VueJs](https://vuejs.org/) and [Buefy](https://buefy.org/) 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_

![Thats All Folks](https://media.giphy.com/media/lTpme2Po0hkqI/giphy.gif)