DEV Community

loading...
Cover image for DigitalOcean App Platform Hackathon Submission

DigitalOcean App Platform Hackathon Submission

israelysm
I'm a full-stack web developer and entrepreneur.
・3 min read

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
No: 2
Setup 2

No 3:
Setup 3

No 4:
Setup 4


DashBoard

Login

No: 5
Login

Campaing list

No: 6
DashBoard-Campaign

New Campaign

No: 7
New Campaing


User screen after integrate done

How we donate

No: 8
Donation

Payment section

Payment

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Permissive License

Apache License 2.0

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

Thats All Folks

Discussion (1)

Collapse
jerrymani33 profile image
Arul

Nice work with proper documentation

Forem Open with the Forem app