Open Source monetisation and community management platform to keep quality journalism content open to everyone.
Web application platform built on:
- Laravel 5.8 - backend logic and REST API endpoints
- Angular 7.3 - dashboard frontend logic
- pure JavaScript - script for communication betweeen journalism portal and Crowdfunding application.
- PHP 7.1+
- database - some of:
- PostgreSQL*
- MariaDB
- MySQL
* in development was used PostgreSQL.
git clone https://github.com/cft-postoj/crowdfundingtoolbox.git
Please, clone your project to local apache public folder (for example in xampp - htdocs folder). This recommendation is for local uploaded images.
If you have cloned project, please follow these steps:
- install Laravel dependencies by running command:
composer install
- install Angular dependencies by running command - in folder dashboard-app:
npm install
If you don't have composer or node install yet, please download and install both of them at first.
Create database and update .env file in root directory with your DB information.
Default is set for PostgreSQL database. If you want to use some different database, please change it in .env file as default.
After you have set database, you can run db migrations by command:
php artisan migrate
After successfully run migration, you should have database with 24 tables and run DB seeder with command:
php artisan db:seed
Run Laravel server:
php artisan serve
APP documentation is here: https://crowdfundingtoolbox.news
API documentation is here: http://127.0.0.1:8000/api/documentation (URL is generated by running Laravel server)
For API documentation was used Swagger. You can test routing with Postman or some similar tool. Not every routes are describe via Swagger.
Before you run Angular app, you need to create keys.ts file in src folder (dashboard-app/src). keys.ts file need to have this structure:
export const keys = {
googleApiKey: 'your_google_api_key', // for google fonts
hostUrl: 'http://127.0.0.1:8001' // backend url
};
You can find in src folder file keys.example.ts which you can copy to new file keys.ts.
Next you can run Angular local app with command (run in dashboard-app folder):
ng serve
You will see Angular dashboard app which is communicating wit Laravel via REST API.
For login, you can use default user details or you can create new one via Postman.
Default user details (manager role):
username: demo, password: demo123
Please, start your local server (for example XAMPP) to correctly show uploaded images.
If you want to see working lists in dashboard-app, you need to insert some testing portal users and donations/payments to tables.
If you want to migrate application to prod server, you need to build Angular app with command:
ng build --prod
You have to migrate all files of projects except Angular source and modules. From Angular app you need to migrate only files from dist folder to /public/app folder.
Laravel app has set view route to working with Angular routing.
In PROD mode, you need to change URLs to your application (in file environment.prod.ts).
Create and change API Key for Google Fonts.
Copy assets folder from Angular dist app to root of project.
Copy .htaccess file from public folder and paste it to root folder. Change "server.php" to "index.php" in root of project.
This project is built in Laravel 5.7 where is implemented Angular application in dashboard-app folder.
After you set up your project, you can run Angular app. You can sign in to app via default user details.
In dashboard currently you can choose only Campaigns where you can create new one.
Every campaign currently consists of three types of widgets:
- Sidebar widget - is vertical oriented widget which is showed in sidebar of websites (default set to max width 350px),
- Leaderboard widget - is horizontal oriented widget which is showed in 100% of parent container,
- Fixed widget - is horizontal oriented widget which can be showed on top or on bottom of window on full width.
Every time when you want you can update your campaign and widgets. Campaign have also widget settings.
If you changed some specific widget settings in widget edit window, you cannot override this settings by change global widget settings in campaign.
Every widget has live preview, which help to customize widget content. Preview is scaled to 55% from original.
In project you can find several schedule jobs for storing user data, checking payments etc. You can find and edit it in Laravel project --> app/console/Kernel.php
If you can show created widgets on your portal, you have to paste external script to portal footer. Communication script is in public folder of Laravel app - /public/js/crowdFundingToolbox.js
Script in footer should looks like this:
<script src="http://127.0.0.1:8000/public/js/app.js"></script>
You also have to insert placeholders (html parts of code) to your HTML views:
<div id="cr0wdfundingToolbox-sidebar"></div>
<div id="cr0wdfundingToolbox-leaderboard"></div>
<div id="cr0wdfundingToolbox-fixed"></div>
<div id="cr0wdfundingToolbox-popup"></div>
<div id="cr0wdfundingToolbox-landing"></div>
<div id="cr0wdfundingToolbox-locked"></div>
<div id="cr0wdfundingToolbox-article"></div>
<div id="cr0wdfundingToolbox-custom"></div>
Only active campaigns and widgets are showed in portal side.
Login/register and my account view. These views are situated in laravel resources folder which use webpack and sass loader.
Default Laravel security. Only authenticated users have access to Angular application.
There is used JWT auth.
MIT License
If you have any problem with application setup, please create github issue or contact us on crowdfundingtoolbox.news.