Dream Space Screencast

Dream Space is robust platform for developer. Push your development skills to the next level, through this screencast learning platform.

Dream Space is a robust platform for developers. Push your development skills to the next level, through this screencast learning platform.

The screencast is a video recording of a computer screen, typically with audio narration. The screencast is a great way to learn new skills, and Dream Space is a platform that provides screencast learning for developers.

Dream Space provides a variety of screencast courses, from beginner to advanced levels. The courses are categorized into several topics, such as Laravel, InertiaJS, ReactJS, and more.

There are also several courses that give you free to-watch the courses, and also paid courses. The paid courses are permanently accessible, and you can watch them anytime.

Built with Laravel, InertiaJS, ReactJS, and integrated with Midtrans payment gateway Core API integration method.

Core API is a simple integration method that allows you to build your own payment page. Core API is suitable for developers who want to develop a custom payment page.

Live demo : Not available yet.

Source code : GitHub

Features

Some features of this application:

Series
Videos
RBAC (administrator, instructor, student)
Payment Gateway
Like and Comment
Profile Activity
OAuth
more details just clone my repository totally free. 😁✌

Tech Stack

Laravel
InertiaJS
ReactJS
Midtrans
Laravel Fortify
Laravel Role Permission
Socialite
Markdown
more details check my composer.json and package.json

Prerequisites

Notes

Some features are not available yet.

Midtrans only available for Indonesia. Supported payment channel : BRI, BCA, Mandiri, Permata, Gopay, Alfamart, and Indomaret.

Manual payment is not available yet.

SMTP Currently available for Reset Password, Email Verification, and Resend Email Verification. You can use Mailtrap for testing, and should run php artisan queue:work for sending email.

Installation and Usage

Clone the repository on my GitHub

Terminal

git clone https://github.com/raprmdn/dream-space-screencasts.git

cd into project directory

Terminal

cd dream-space-screencasts

Install dependencies

Terminal

# composer
composer install
 
# yarn
yarn install

Copy the example env file and make the required configuration changes in the .env file

Terminal

cp .env.example .env

Generate a new application key

Terminal

php artisan key:generate

Configure the .env file

.env

# SMTP with Mailtrap
# Mailtrap is a fake SMTP server for development and testing purposes.
MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=
MAIL_FROM_NAME=
 
# Google OAuth
# You can use Google OAuth for login.
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT=
 
# Filesystem
FILESYSTEM_DRIVER=public

Configure Midtrans payment gateway.

Open database/seeders/MidtransConfigSeeder.php and change following code.

MidransConfigSeeder.php

MidtransConfig::create([
    'status' => 'Disable',
    'environment' => false,
    'merchant_id' => 'Input your merchant id here',
    'client_key' => 'Input your client key here',
    'server_key' => 'Input your server key here',
    'sanitized' => true,
    'enable_3d_secure' => true,
]);

Symlink storage folder

Terminal

php artisan storage:link

Run the database migrations (Set the database connection in .env before migrating)

Terminal

php artisan migrate

Run the database seeder IMPORTANT

Terminal

php artisan db:seed

Run the development server

Terminal

# PHP
php artisan serve
 
# Yarn for InertiaJS and ReactJS
yarn watch

You can now access the server at http://localhost:8000

Using Laragon? Access the server at http://dream-space-screencasts.test

Google OAuth only available for localhost, which http://localhost:8000. Not support for http://dream-space-screencasts.test

Start queue worker IMPORTANT FOR SENDING EMAIL

Terminal

php artisan queue:work

Credentials

Terminal

# administrator
email    : admin@dreamspace.com
password : 123123123

For receiving Payment Notification Callback, you have to expose your local server to the internet. For testing purpose, you can use ngrok.

Terminal

ngrok http 8000

Copy the https url and paste it to Midtrans Dashboard > Settings > Configuration > Payment Notification URL, with /api/notification-handler endpoint.

Terminal

https://xxxxxxxxxxxx.ngrok.io/api/notification-handler

Screenshots

Home

Series

Watching a series video

Comment section

Topics

Payment Gateway with Midtrans

Profile Activity

List series dashboard

Create series

List videos dashboard

List topics dashboard

Role and Permissions

List orders

Midtrans payment configuration

List payment type

List payment channel

Create payment channel