Dream Space Screencast

Dream Space Screencast

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

• PHP 8.0
• Composer
• NodeJS
• Yarn

Notes

Installation and Usage

Clone the repository on my GitHub

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

cd into project directory

cd dream-space-screencasts

Install dependencies

# composer
composer install
 
# yarn
yarn install

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

cp .env.example .env

Generate a new application key

php artisan key:generate

Configure the .env file

# 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.

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

php artisan storage:link

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

php artisan migrate

Run the database seeder IMPORTANT

php artisan db:seed

Run the development server

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

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

Start queue worker IMPORTANT FOR SENDING EMAIL

php artisan queue:work

Credentials

# 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.

ngrok http 8000

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

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

Screenshots

Sign In

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