Skip to content
Monetisation and community management platform to keep quality journalism content open to everyone.
PHP HTML TypeScript CSS Hack JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
backend
dashboard-app
.gitignore
LICENSE
README.md

README.md

Crowdfunding ToolBox

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.

Requirements

  • PHP 7.1+
  • database - some of:
    • PostgreSQL*
    • MariaDB
    • MySQL

* in development was used PostgreSQL.

Set up - local usage

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.

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.

Set up - prod usage

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.

NOTE

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.

Structure an how it works

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.

Portal communication

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:

Sidebar widget placeholder
<div id="cr0wdfundingToolbox-sidebar"></div>
Leaderboard widget placeholder
<div id="cr0wdfundingToolbox-leaderboard"></div>
Fixed widget placeholder
<div id="cr0wdfundingToolbox-fixed"></div>
Popup widget placeholder
<div id="cr0wdfundingToolbox-popup"></div>
Landing page widget placeholder
<div id="cr0wdfundingToolbox-landing"></div>
Locked article widget placeholder
<div id="cr0wdfundingToolbox-locked"></div>
Article widget placeholder
<div id="cr0wdfundingToolbox-article"></div>
Custom HTML widget placeholder
<div id="cr0wdfundingToolbox-custom"></div>

Only active campaigns and widgets are showed in portal side.

PORTAL VIEWS

Login/register and my account view. These views are situated in laravel resources folder which use webpack and sass loader.

Security

Default Laravel security. Only authenticated users have access to Angular application.

There is used JWT auth.

License

MIT License

You can’t perform that action at this time.