...
Technology: Laravel
65
Keywords: alpinejs laravel laravel-9 laravel-netflix-clone laravel-project livewire netflix-clone tailwind tailwindcss tall-stack

Velflix | Open Source Collection

About

Velflix is a Laravel Netflix clone project using TALL stack (Tailwindcss, Alpinejs, Laravel, Livewire ).

Note Work in Progress

Table of Contents

Requirements

Package Version
Node V14.19.1+
Npm V6.14.16+
Composer V2.2.6+
Php V8.0.17+
Mysql V 8.0.27+

Installation

Warning Make sure to follow the requirements first.

Here is how you can run the project locally:

  1. Clone this repo

    git clone https://github.com/josuapsianturi/velflix.git
    
  2. Go into the project root directory

    cd velflix
    
  3. Copy .env.example file to .env file

    cp .env.example .env
    
  4. Create database velflix (you can change database name)

  5. Create an account and get an API key themoviedb here. Make sure to copy API Read Access Token (v4 auth).

  6. Go to .env file

    • set database credentials (DB_DATABASE=velflix, DB_USERNAME=root, DB_PASSWORD=)
    • paste TMDB_TOKEN=(your API key)

    Make sure to follow your database username and password

  7. Install PHP dependencies

    composer install
    
  8. Generate key

    php artisan key:generate
    
  9. install front-end dependencies

    npm install && npm run build
    
  10. Run migration

    php artisan migrate
    
  11. Run seeder

    php artisan db:seed
    

    this command will create 2 users (admin and normal user):

    email: [email protected] , password: password

    email: [email protected] , password: password

  12. Run server

    for valet users visit velflix.test in your favorite browser

    php artisan serve
    
  13. Visit localhost:8000 in your favorite browser.

    Make sure to follow your Laravel local Development Environment.

  14. Newsletter feature configuration (optional)

  • Go to mailchimp
  • Register your account, get the API key, and paste it into .env file. If you need help, you can follow these steps:
    • Click Sign Up Free
    • Enter your data, check your email, and verify
    • select Free, Next
    • Do you have a list of contacts? (NO)
    • Do you sell products or services online? (Neither, Products)
    • continue
  • Go to Profile > Extras > API keys
  • Create a key and copy the API key
  • open the velflix project, go to .env file and paste it into MAILCHIMP_KEY=paste API key here
  • Go to web.php and paste this code at the bottom or you can follow the documentation here
   Route::get('ping', function() {
   $mailchimp = new MailchimpMarketing\ApiClient();
   $mailchimp->setConfig([
       'apiKey' => config('services.mailchimp.key'),
       'server' => 'us5',
   ]);

   $response = $mailchimp->lists->getAllLists();
   ddd($response);
   });

make sure you fill in the server correctly, check the link at the top of your admin Mailchimp, for me its https://us5.admin.mailchimp.com/account/api/ so i give the value of server is us5. if you get us6, change the server value to be us6.

  • visit localhost:8000/ping or velflix.test/ping and copy the value of the id in the "lists" > 0 > "id"
  • open project, in .env file, paste the id into MAILCHIMP_LIST_SUBSCRIBERS=paste id here and we ready to go
  • visit localhost:8000 or velflix.test test email for subscribing, and refresh your admin MailChimp it should be Your audience has increased 1 contact.
  1. Setup Laravel Socialite login with Google account (optional)
  • Go to the Google Developers Console and get "GOOGLE_CLIENT_ID" and "GOOGLE_CLIENT_SECRET". paste it into .env file. if you need help, you can follow these steps:
  • Click the Credentials menu, click "select a project" at the navbar > ALL > No organization > new project.
  • project name 'velflix', location should be no organization > Create.
  • Go to the OAuth consent screen menu > Select External and Create
  • App Information > app name 'velflix' choose user support email, fill email in developer contact information, save and continue
  • Go to the Credentials menu > click +Create Credentials at the top > select "OAuth Client ID" > select Application type "Web Application" > Name 'velflix'
  • At the Authorized redirect URIs > +ADD URI > paste this into it http://127.0.0.1:8000/login/google/callback > Create.

NOTE: you can change the port to be 8080 or others, but make sure when you run php artisan serve, your project run in the same port.

  • Copy Your Client ID and Your Client Secret
  • Open velflix project, go to .env file and paste it in GOOGLE_CLIENT_ID=paste_here and GOOGLE_CLIENT_SECRET=paste_here and we ready to go
    php artisan serve
    
  • let's test, visit the project in your browser > Login > Login Google > choose account > and if successful, it should be redirected to the movies page.

Let me know if you get in trouble.

Testing

Pest

Warning Every time you run testing, you should run php artisan db:seed first

    ./vendor/bin/pest

Cypress

  1. To run E2E testing
        npx cypress run
    

Laravel Pint

  1. To run coding style checks
        ./vendor/bin/pint
    

Laravel Psalm

  1. To run the static analysis with Psalm
        ./vendor/bin/psalm
    

Larastan

  1. To run static analysis with PHPStan
    ./vendor/bin/phpstan analyse
    

Contributing

Pull requests are welcome.

License

Velflix is an open-sourced software licensed under the MIT license

Profile Picture

Hi, I'm Habib. I'm the founder of OpenSourceCollection. I help build web applications, grow businesses, big and small. If that is what you want, contact me.

I'm currently available for freelance work.

Visit my Protfolio. Let's connect on Linkedin or GitHub

Contact Me

About OpenSourceCollection.com
Discover, explore, and find open-source web apps from various categories and technologies, while accessing live demos, screenshots, and GitHub source code links.