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

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

cd into project directory

1cd dream-space-screencasts
bash

Install dependencies

1# composer
2composer install
3
4# yarn
5yarn install
bash

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

1cp .env.example .env
bash

Generate a new application key

1php artisan key:generate
bash

Configure the .env file

1# SMTP with Mailtrap
2# Mailtrap is a fake SMTP server for development and testing purposes.
3MAIL_MAILER=smtp
4MAIL_HOST=smtp.mailtrap.io
5MAIL_PORT=
6MAIL_USERNAME=
7MAIL_PASSWORD=
8MAIL_ENCRYPTION=tls
9MAIL_FROM_ADDRESS=
10MAIL_FROM_NAME=
11
12# Google OAuth
13# You can use Google OAuth for login.
14GOOGLE_CLIENT_ID=
15GOOGLE_CLIENT_SECRET=
16GOOGLE_REDIRECT=
17
18# Filesystem
19FILESYSTEM_DRIVER=public
dotenv

Configure Midtrans payment gateway.

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

1MidtransConfig::create([
2    'status' => 'Disable',
3    'environment' => false,
4    'merchant_id' => 'Input your merchant id here',
5    'client_key' => 'Input your client key here',
6    'server_key' => 'Input your server key here',
7    'sanitized' => true,
8    'enable_3d_secure' => true,
9]);
php

Symlink storage folder

1php artisan storage:link
bash

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

1php artisan migrate
bash

Run the database seeder IMPORTANT

1php artisan db:seed
bash

Run the development server

1# PHP
2php artisan serve
3
4# Yarn for InertiaJS and ReactJS
5yarn watch
bash

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

Start queue worker IMPORTANT FOR SENDING EMAIL

1php artisan queue:work
bash

Credentials

1# administrator
2email    : admin@dreamspace.com
3password : 123123123
bash

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

1ngrok http 8000
bash

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

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

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