AJAX and API REST PROJECTS

SUMMARY

I have two projects on this respository, both using AJAX() to query and show data on screen.

Ajax - TrailerFlix (a kind of video and series streaming platform)
coderbook (a kind of social network search engine.)

TRAILERFLIX

This project was born as an Ajax Project, emulating a video streaming platform. As seen in the common video streaming platforms, but limited to trailer's watching ;).

All the trailers available are dinamically linked from Youtube (most of them are coming from the official YT channels).

You can access by here to know the last Video of TRAILERFLIX working on the web, tablet and smartphone screens

TRAILERFLIX 2021 (update)

This version includes an improvement into the JSON file. A field 'busqueda' was added to get a better and unique searching field. I also added an associated searching function(). It works fine, since the first shoot! <3

FRAMEWORKS

I am using two simple frameworks:

CSS

Materialize CSS is integrated for solving the UI. I use it locally.

JS

I also added JQuery 3.5.1 for basic animations on the HTML documents and AJAX() to get and show on screen the movies and series information.

DB for MOVIES & SERIES

I am taking the information of movies and series from a local JSON file. The cover images were taken from the Internet. The image sizing was normalized by me, and every block of text information on the JSON file was written for me. Some things are invented. Other things are real and maybe, a couple of them, were taken from Wikipedia, IMDB or a similar website.

Update 2021-05-05 (cathegories button)

I added to the top-main-screen the possibility to view the content as a General View or through Cathegories. For this last option, I made into the code a list with the most important cathegories for movies and series, saved into an array. By pressing the Cathegories button, the code iterate over every element on this list, apply a filter() with the list element and show the result on screen building the HTML Card element in every iteration.

Update 2021-04-20 (searching bar)

In the added searching bar and its code logic, I'm giving to the user the possibility to search any movie or series typing any parameter. The topics included at the 'busqueda' field are:

Title
Actors
Category

In addition to this parameters, in some cases we have the possibility to search using another key parameters, such as title in another language or any other reference to the movie or series (I.E.: Avangers, Black Panther and Black Widow, gives you the possibility to do this searchi directly using 'Marvel').

The main idea for the searching function was create this topic bar with multiple parameters fields to search, but I tried to avoid a nested searching applying a first searching function over the title, with the results apply another searching function over the synophis... (and over and over and over in the rest of fields).

You have some screenshots to the end of the section.

Next updates

[X] I'm thinking to apply a loading structure sliced the content into some cathegories or maybe I'll create a navigation bar with predefined cathegories to filter. I don't know, I don't have a date or any urgency for that. We'll see. [ ] The next steps is to apply a menu or similar feature listing the Cathegories for enabling to the User th pick the list to see the content. [ ] I also should improve a little bit more every Poster Picture to get a similar size between all of them. This way prevent the Card show with a lack of blank space between differents content.

SCREENSHOTS

These are some screenshots of this Web App, showing the different screens and the correct behavior for the mobile-first paradigm.

Searching Bar in action

CODERBOOK

This project is using the randomuser.me API to get a list of users, emulating the typical Social Networks user search engine. I use $.AJAX() to get the data and JQuery animations.