Flashcards - create your decks and add flashcards.
Live demo: flashcards.alexprojects.pl
git clone https://github.com/aleksandertabor/flashcards YOURPROJECTNAME
cd YOURPROJECTNAME
Install dependencies:
composer install
npm install
cp .env.example .env
php artisan key:generate
Set your .env
with credentials to your database server (DB_*
settings) and your domain config (APP_URL
, SANCTUM_STATEFUL_DOMAINS
, SESSION_DOMAIN
). Remember about 3rd party APIs for which keys are required.
php artisan webpush:vapid
php artisan migrate --seed
LanguagesTableSeeder::class
UsersTableSeeder::class
DecksTableSeeder::class
php artisan storage:link
then cd public || mv storage img
Why? Custom URL in Laravel Storage - Tutorial
All storage links now have /img/ prefix e.g.:
http://localhost:8000/img/example-image.jpg
chmod -R 777 pdf
then mv pdf storage/app/public
Build frontend with npm run production
for production.
โ ๏ธ Caution: Remember about giving proper permissions to the project directory e.g.:
sudo chgrp -R www-data /var/www/YOURPROJECTNAME
sudo chmod -R 775 /var/www/YOURPROJECTNAME/storage
npm build-pwa
for precaching files from workbox.config.js
originally: workbox injectManifest workbox.config.js
Main file: resources/js/app.js
Configuration files (routes, service-worker, store, vuetify): resources/js/config
HTTP clients: resources/js/httpClients
Vuex modules: resources/js/store/modules.js
GraphQL queries: resources/js/queries
You can manage PWA and Notifications with plugins: resources/js/plugins/
Shared components, mixins and utils: resources/js/shared
Components: resources/js/views
All schemas: routes/graphql/*.graphql
Endpoint: api/graphql
Playground (Live API): api/graphql-playground
To fill your flashcards you can add your content or third party resources. The app is configured to use:
Google Translation API for translations (need key in JSON) - GOOGLE_API_CREDENTIALS
Twinword API for example sentences (need key) - TWINWORD_API_ENDPOINT
, TWINWORD_API_KEY
Wikipedia API for images (free) - WIKIPEDIA_API_ENDPOINT
โ ๏ธ Caution: if none of APIs has keys, don't worry the app still working
APIs clients are binded with Singleton in: app/Providers/AppServiceProvider.php
You can use Facades to easily getting data from APIs everywhere you want:
TranslationFacade::translate(string $toTranslate, array $languages)
: string
TranslationFacade::langauges()
: array
ExampleFacade::example(string $wordToFind, string $sourceLanguage, string $targetLanguage)
: array
ImageFacade::random(string $imageToFind, string $sourceLanguage = null)
: string
You can log everything you want by using special 'app'
channel that logs into storage/logs/app.log
. Either local or production.
E.g.: Log::channel('app')->info("{$currentUser->username} logged in.");
Currently logging:
User logged in.
User registered.
New deck added.
New card added.
Calling to Google Translation API.
If your browser supports Notification API you will receive Welcome Notification (PushRegistered):
When added a new public deck or updated the current deck to visibility as 'public'
, you will receive notification (DeckPublished):
PushRegistered app/Notifications/PushRegistered.php
DeckPublished app/Notifications/DeckPublished.php
/resources/js/config/service-worker.js
/resources/js/plugins/NotificationSystem.js
Login with username or e-mail
Installable app - Add To Home Screen (A2HS)
Offline mode (data is limited to your memory size for cache)
Deck visibilities:
Each deck is limited to 50 cards
Multi tabs logout - if you logout at one tab, you will be out of all currently running tabs in your browser
Add images from file or URL
Change avatar with your camera
Infinite scroll in searching decks
Find decks by filters (latest, oldest, random, cards count) and phrase
Two modes for creating flashcards with API (auto mode) or manually
Share your deck
Print your decks with "Print Deck" button
โ ๏ธ Caution: not supported all languages
Use Background Sync API for creating decks offline
Show users which decks are currently cached
Live preview for deck and card editor
Auto mode for each input seperately in card editor
Gamification with quizzing
More social engagement with "liking" decks and filtering them by popularity
Easier installation with Docker