REST API with JWT, AJAX, JQuery

Systube

Purpose

1. Using JWT on the client.
2. ... AJAX.
3. ... JQuery.
4. ... Bootstrap.
5. ... Fontawesome.
6. ... Youtube Embed.
7. ... Responsive Design.

Technical Stack

• JWT
• AJAX
• JQuery
• Bootstrap
• Fontawesome
• Infinite scroll

Performance Issue.

It was too slow to load many YouTube videos.

Solution

1. In Youtube Option : https://www.youtube.com/embed/{code}?controls=2
2. In Logic : Paging and Infinite scroll
3. In Code : Use setTimeout() to take the task to the queue.

Result

6s -> 1.7s

JWT, AJAX, LocalStorage

Sign Up

Register your account.

$.ajax({
    type: "POST",
    url: Url.Signup,
    data: formData,
    processData: false,
    contentType: false,
    success: function (response) {
        // Sign Up Success
    },
    error: function (error) {
    }
});

Log In

Log In to your account.

$.ajax({
    type: "POST",
    url: Url.Login,
    data: formData,
    processData: false,
    contentType: false,
    success: function (response) {
        // Log In Success
        // Store LocalStorage JWT.
    },
    error: function (error) {
    }
});

Profile

Get your account.

$.ajax({
    type: "GET",
    url: Url.Profile,
    headers: { "token": localStorage.systube },
    success: function (response) {
        // JSON (your profile)
    },
    error: function (error) {      
    }
});

Card List

Parse JSON and Make Cards.

$.ajax({
    type: "GET",
    url: Url.Card,
    headers: { "token": localStorage.systube },
    processData: false,
    contentType: false,
    success: function (response) {
        // Cards Append
    },
    error: function (error) {}
});

Card Write

Like or DisLike Event

$.ajax({
    type: "POST",
    url: Url.Card
    headers: { "token": localStorage.systube },
    data: formData,
    processData: false,
    contentType: false,
    success: function (response) {
        // Success your request.
    }
    error: function (error) {      
    }
});

Like or DisLike

Like or DisLike Event

$.ajax({
    type: "POST",
    url: Url.Card + "/" + cardForm.value,
    headers: { "token": localStorage.systube },
    data: formData,
    processData: false,
    contentType: false,
    success: function (response) {
        // Success your request.
    }
    error: function (error) {      
    }
});

Photo

Mobile - List

Mobile - Log In

Mobile - Sign Up

Mobile - Modal For Youtube Link Before Seleted

Pad - List

PC - List Before Login

PC - Log In

PC - Sign Up

PC - Profile

PC - List After Login

PC - Modal For Youtube Link Before Seleted

PC - Modal For Youtube Link After Selected

PC - Write Card

Histories

2018.08.15. Design
2018.08.16. Top-Nav, Side-Nav, Youtube-Modal, File-Input-Snipper.
2018.08.17. AJAX(Log-In, Sign-Up, Profile) with JWT.
2018.08.18. AJAX(Write-Card, Get-Cards).
2018.08.19. AJAX(Like-Card, DisLike-Card).
2018.08.20. Problems during load. (Performance - Low Loading Speed).
2018.08.21. Solve Performance Issues. (Youtube-Embed-Options, Infinite scroll)