_       ____          __ ________       ______           
| |     / / /_  ____ _/ //_  __/ /_  ___/_  __/___ _____ _
| | /| / / __ \/ __ `/ __// / / __ \/ _ \/ / / __ `/ __ `/
| |/ |/ / / / / /_/ / /_ / / / / / /  __/ / / /_/ / /_/ / 
|__/|__/_/ /_/\__,_/\__//_/ /_/ /_/\___/_/  \__,_/\__, /  
                                                 /____/   

Hey all,

Here's my latest project that came out using Laravel. This is called WhatTheTag.

Why?

There are some reasons behind this project.

• Firstly, I needed this. I didn't like Picasa's web interface, Lost tags of ~600 photos thanks to Picasa, and I wanted to make a simple website that I could search my photos (actually my "internet meme folder") efficiently.
• I wanted to play with Laravel 5.x and to make a sample application that uses various features of Laravel 5.x.
• I also wanted to play with some asset management tools such as Gulp.

After deciding to make this app, it took maybe a week or so in my spare times to pull this application together.

##Features

• This application's main feature is to upload, tag, list and search photos, so you can access to your photos easier.
• There is multi account support, also there are two roles of users called user and admin.
• All assets are handled using gulp. You just need to add or edit the assets in resources folder. Afterwards, all of the assets are compiled, merged, minified and copied into their own folders in public directory. I specifically didn't use Laravel Elixir, because I think using this way it's more flexible.
• The app shows Random Photos in the main page
• You can list Recent Photos from the navigation menu called Recent Photos.
• You can make a search. This feature searches in Photo's title, Photo's uploader's name and in the tags that are attached to the photo. You may assume this is sort of a global search.
• There are also pages such as "user's uploaded photos", "all photos tagged with xx".
• You can preview the photos in a Bootstrap modal, and download directly.
• There is also a photo details page. In this page there are Disqus comments, and social buttons.
• In administration panel, while uploading / editing a photo, you may also fetch the EXIF data of a photo directly and add them into the tags. So let's say you've already tagged a photo before. If it's tagged normally, the system gets the tags and adds them into the tags list of the photo.
• You can also preview the photo before uploading.

Requirements

• Laravel 5.5's server requirements
• Composer to install 3rd party dependencies
• npm to install frontend dependencies
• gulp to compile assets
• A free account from Algolia to make the searches work properly.

Showcase

Main page

Listing pages, also the hover effect

Clicking to "zoom" on a list page

Photo detail page

Admin panel, user management

Admin panel, photo management

Admin panel, adding / Editing a photo

You can check all the images at this Imgur album.

Installation

• First, clone the repository into your server

git clone https://github.com/Ardakilic/WhatTheTag.git

• Secondly, install dependencies

composer install
npm install

Alternatively, you can also update dependencies with

composer update
npm update

• (optional) Thirdly, compile and install assets (Repository holds pre-compiled assets inside)

npm install -g gulp
gulp

• Now, (if not created already,) create an .env file and fill all of your credentials required for the service to run. You can copy it from .env.example file as a template.

cp .env.example .env

• Now, install the database schema from migration, and seed the users table for the administrator user:

php artisan migrate
php artisan db:seed

• Now, edit the app-specific configuration files found in .env file and config/whatthetag.php:

  • site_name defines the site's name (will be shown in the title etc.).
  • twitter_name will fill the "shared via" section on Twitter share button.
  • comments_enabled will enable or disable the comments section in the site. The value is boolean, so set it false to disable comments.
  • disqus_identifier is your unique identifier in your Disqus panel. You can create a new identifier for your website by following this link

• Make sure the /public/uploads/ folder is writable.

• Lastly, we need to set Algolia parameters, simply run php artisan tinker in the terminal, and paste the following:

  \App\Photo::setSettings();

This step will create the indice, and set the settings for Algolia.

• Now, simply run the application. You can create a new virtualhost either from Apache, or Nginx etc.

  Note: PHP's own web server (e.g. if you're running it with php artisan serve) will give 404 erros in administration panel, because Datatables's AJAX links are quite long, and it gives 404 errors on very long links unless you edit this setting.

• Now you can login into your application.

  Default username is [email protected] The default password is whatthetag

  Don't forget to change these after logging in!

• Now, simply navigate through your app and enjoy! 😄

Digging the Code?

Well, you should do this!

Why you may ask. Because one of the reasons of this app is to make a sample application using Laravel 5.

This application covers:

• Simple CRUD (Create, Read, Update, Delete) operations in Laravel 5.
• Eloquent Relationships. You can see live examples of BelongsTo, HasMany, BelongsToMany relationships in this app.
• All the contents are accessed using slugs. Managing slugs are handled with a 3rd party package.
• Listing content dynamically using Datatables in Administration Panel with a 3rd party package.
• Example usage of Masterpages for views.
• Downloading popular assets (jQuery, Bootstrap, FontAwesome etc.) from npm repositories, compile and merge them with application's own assets.
• Handling file uploads and processing them.
• Has an authentication system, and role-based access middlewares.
• Uses a 3rd party service for search on client side, and sets the records on the server side.

Donations

Any donations would be highly appreciated. You can buy me a cup of coffee by donating some bitcoins to this addres:

1QFHeSrhWWVhmneDBkArKvpmPohRjpf7p6

Thanks in advance!

TODOs

• Dynamic searching (Search as you type)
• Caching
• Better file uploads, such as Dropify
• Every front-end photo pages should be served using Algolia
• ~~Algoliasearch-laravel should be changed with Laravel Scout.~

Changelog~

0.5.0

• Script upgraded to Laravl 5.5
• Algolia Back-end Client changed to a more up-to-date engine, called Laravel Scout
• One of the modal views fixed to show images properly.

0.4.0

• Algolia implementation!
• AWS S3 implementation!
• All dependencies are updated
• Rollback to gulp for asset automation

0.3.1

• Assets now have relative path so that the script runs smoothly both with http and https protocols
• Croppa configuration has been updated for upscales for the cases when the image is too small
• Admin panel photo search is fixed.

0.3.0

• Got Gulp Switched with sey, made by Eser Özvataf. This way, assets building will be easier.
• All dependencies' versions updated.
• Minor code optimisations.
• All configuration values are now fetched from environment vars. Check .env.example file and find all variables prefixed with WTT_.
• A new trait added for random methods, so it will run out of the box also with Postgres etc.

0.2.2

• Dropify integrated to upload forms. You can now drag & drop the images!
• Custom 404 page added for the situations when debug is closed.
• Tabs are switched with four spaces in (hopefully every part of the) project.

0.2.1

• Got Sass switched with Less, because there is almost no need for Sass, and it brings additional installations of Ruby and Sass to the server. This way it's lighter. Thanks to @eserozvataf

0.2.0

• Application updated to Laravel 5.1
• Assets and Requirements updated

0.1.0

• First Release

Thanks

• Koding, all of baby steps of the project is written on the cloud using Koding's service on their VMs and my machine directly from my browser. You must definitely try the service, also it's free!
• Burak Can and Eser Özvataf for their ideas especially while handling assets.