Git Product home page Git Product logo

laqul / laqul Goto Github PK

View Code? Open in Web Editor NEW
134.0 11.0 36.0 1.35 MB

A complete starter kit that allows you create amazing apps that look native thanks to the Quasar Framework. Powered by an API developed in Laravel Framework using the easy GraphQL queries language. And ready to use the Google Firebase features.

Home Page: https://laqul.github.io/

License: MIT License

PHP 57.87% Vue 18.23% HTML 1.88% JavaScript 21.46% CSS 0.56%
laravel quasar-framework api api-client php graphql javascript oauth2 firebase firebase-auth

laqul's Introduction

Laqu-l logo

Laqu-l

Made with Quasar Powered by GraphQL uses Laravel Ready for Firebase

A complete starter kit that allows you create amazing apps that look native thanks to the Quasar Framework. Powered by an API developed in Laravel Framework using the easy GraphQL query language. And ready to use the Google Firebase features.

Login Screen

Laqu-l Login Screen

Admin Screen

Laqu-l Admin Screen

Features

  • Multilanguage capability
  • XSRF protection in client and client-backend comunication.
  • Use as SPA, PWA, DESKTOP APP, MOBILE APP, thanks to Quasar Framework
  • Area for Terms and Conditions and Privacy Policy
  • Social login (Google and Facebook by default)
  • OAUTH 2 Authentication
  • Password login
  • User registration with password and email verification
  • Reset password with email verification
  • User avatar
  • Update password
  • Update user name
  • Logout
  • Firebase Authentication with custom generated token that allows using all Firebase features
  • Firebase Cloud Messaging for app notifications
  • User timezone detection for process related to user's time
  • User roles

Components

API

OAUTH 2 Laravel API Powered with GraphQl

Client

Dashboard with a basic features developed with Quasar Framework

Client-Backend

PHP script that allows securely storing the API client-id and client-secret and managing the OAUTH2 authentication and refresh tokens process

Requirements

  • LAMP Server
  • Terminal
  • node
  • npm
  • quasar-cli
  • composer
  • git

Installation

Video Tutorial

Video Tutorial Instalation And Setup

API Setup

Prepare the Laravel API for the initial setup

  • In your terminal type:
git clone https://github.com/laqul/laqul.git
cd laqul/api
composer install
cp .env.example .env
php artisan key:generate
php artisan passport:keys
mysql -u root -e "create database testdb"; 

If you have an existing mysql password, add -p above. You will be prompted for your password.

  • Put your data connection in laqul/api/.env file:
DB_DATABASE=YOUR_DATABASE
DB_USERNAME=YOUR_DATABASE_USER
DB_PASSWORD=YOUR_DATABASE_PASSWORD
  • Migrate data base
php artisan migrate --seed
  • Configure the SMTP server for emails in laqul/api/.env file:
[email protected]
MAIL_FROM_NAME='Laqul'
MAIL_DRIVER=smtp
MAIL_HOST=SMTP_HOST
MAIL_PORT=SMTP_PORT
MAIL_USERNAME=SMTP_USERNAME
MAIL_PASSWORD=SMTP_PASSWORD
MAIL_ENCRYPTION=tls
  • Create a Firebase project
  • Go to project settings and get a service account then paste it in laqul/api/.env file
FIREBASE_SERVICE_ACCOUNT=YOUR_FIREBASE_SERVICE_ACCOUNT
  • Into the Firebase project settings in service account option generate a private key, one file was downloaded, rename the key file to firebase-private.key and move it to laqul/api/storage folder

  • Get the Firebase AUD and paste it in laqul/api/.env file More Info

FIREBASE_AUD=YOUR_FIREBASE_TOKEN_AUD
  • Into the Firebase project settings in Cloud Messaging option get the server key and the sender id and paste it in laqul/api/.env file
FCM_SERVER_KEY=YOUR_FCM_SERVER_KEY
FCM_SENDER_ID=YOUR_FCM_SENDER_ID
  • Get your Google Oauth 2.0 Client ID and Client Secret from Developers Console and paste it in laqul/api/.env file
SOCIAL_GOOGLE_CLIENTID=YOUR_GOOGLE_CLIENT_ID
SOCIAL_GOOGLE_CLIENTSECRET=YOUR_GOOGLE_CLIENT_SECRET
  • Get your Facebook Oauth 2.0 Client ID and Client Secret from Facebook Developers and paste it in laqul/api/.env file
SOCIAL_FACEBOOK_CLIENTID=YOUR_FACEBOOK_CLIENT_ID
SOCIAL_FACEBOOK_CLIENTSECRET=YOUR_FACEBOOK_CLIENT_SECRET
  • Back in your terminal make a sym-link to storage folder in your API folder
php artisan storage:link
  • Run the API
php artisan serve

Run The Client Backend

  • Open a new terminal in laqul/client-backend folder and run:
php -S localhost:8001

This creates a server listening in port 8001, this is the intermediary between client and api for the Oauth 2.0 authentication

Setup Client

  • Open a new terminal in laqul/client folder and run:
npm install
  • Go to laqul/client/src/config/index.js file and setup your firebase project data:
apiKey: 'YOUR_FIREBASE_API_KEY',
authDomain: 'YOUR_FIREBASE_AUTH_DOMAIN',
databaseURL: 'YOUR_FIREBASE_DATABASE_URL',
projectId: 'YOUR_FIREBASE_PROJECT_ID',
storageBucket: 'YOUR_FIREBASE_STORAGE_BUCKET',
messagingSenderId: 'YOUR_FIREBASE_SENDER_ID'
  • Back to your terminal and run:
quasar dev

You are done! make something awesome!

Spelling and grammar correction are welcome πŸ‘

Frameworks Used

GraphQL

Contributing

It would be great if you could contribute by adding new features, fixing bugs or showing us the steps to reproduce bugs.

License

Copyright (c) 2018-present Fabian VR

MIT License

laqul's People

Contributors

georgiadata avatar laqul avatar nothingismagick avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

laqul's Issues

npm install error

Hola genio, me da error al hacer npm install en el client-backend
Tenes alguna version actualizada de esto?

running client error

` App [SPA with MAT theme] at http://localhost:8080/

Error: Error: Exited with code 3

- index.js:84 ChildProcess.cp.once.code
  [client]/[opn]/index.js:84:13

- child_process.js:925 maybeClose
  internal/child_process.js:925:16

- child_process.js:346 Socket.stream.socket.on
  internal/child_process.js:346:11

`

Firebase Login

I have got everything working except for the firebase connection.

After logging in I am not being redirected to the dashboard automatically and need to refresh.

I am getting an issue with the token call verifyCustomToken?key=FIREBASE_API_KEY

{
"error": {
"errors": [
{
"domain": "global",
"reason": "invalid",
"message": "INVALID_CUSTOM_TOKEN : AUDIENCE_MISMATCH"
}
],
"code": 400,
"message": "INVALID_CUSTOM_TOKEN : AUDIENCE_MISMATCH"
}
}

Any suggestions to why?

Upgradin v0.16 to v0.17

After upgrading to 0.17 I have this error :
Error: babel-plugin-transform-imports: import of entire module quasar not allowed due to preventFullImport setting.
I wante to change value for preventFullImport in the file babelrc.js but it’s extended and crashed by quasar-cli in the file /home/devlamine/sites/pr/client/node_modules/quasar-cli/lib/webpack/create-chain.js /:

line 113

    .use ( 'Babel-loader')
      .loader ( 'Babel-loader')
        .Options ({
          extends: appPaths.resolve.app ('babelrc'),
          plugins: cfg.framework.all! == true? [
            [
              'transform-imports', {
                quasar: {
                  transform: `quasar-framework / dist / babel-transforms / imports. $ {cfg.ctx.themeName} .js`,
                  preventFullImport: true
                }
              }
            ]
          ]: []

When I change prevent Full Import: true by false it works !!
I can do framework.all: true in file quasar.conf.js ? there will be no impact in the other functionality ?

docker-file

Hi,
have you been thinking about generating a docker-file?
Greetings
joejoe2016

A demo link would be great

Thanks you for this would love to contribute after get familiar with , a more detail how to use this would be super

Alternative DB-provider

Hi,
I've got a question. Is it possible to use instead of firebase an alternative provider like cloudboost, dreamfactory or firebase?
Or would it even be possible to include it into the project?
Thanks
joejoe2016

MySQL integration

I downloaded laqul on Mac, mySQL. I am able to install the whole package without any error. Even tables are being created with seed data into the mysql db. But when I run the server I get laravel's default welcome blade template instead of laqul. Hope you will have a look. thank you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.