Skapi

Appearance

Skapi Complete Tutorial ​

Welcome to the complete tutorial project for Skapi.

The tutorial features a web application that provides:

  • Full authentication system
  • Realtime chat
  • Upload posts, and comment
  • Use an AI image generating service via 3rd party API service.

The tutorial is designed to help you understand how to build a full-fledged application using Skapi.

The emphasis is on functionality over aesthetics.

Demo ​

Check out the live demo of the project.

Downloading the Source Code ​

Visit the GitHub repository

Or clone the repository using the following command:

bash
git clone https://github.com/broadwayinc/skapi-tutorial.git

Pre Requisites ​

Create an account on Skapi and create a new service.

The service_id and the owner_id values are set in service.js file.

Currently, the values are set to:

  • Service ID: "ap220wfRHl9Cw2QqeFEc"
  • Owner ID: "f8e16604-69e4-451c-9d90-4410f801c006"

Replace the values with your own service ID and owner ID.

You can retrieve your own service ID and owner ID from your Skapi service dashboard.

Opening the Project ​

In the project directory, you will find the following files:

.
├─ authentication
│  ├─ change_password.html
│  ├─ create-account.html
│  ├─ email-verification.html
│  ├─ forgot-password.html
│  ├─ profile-pic.html
│  ├─ recover-account.html
│  ├─ remove-account.html
│  ├─ reset-password.html
│  └─ update-profile.html
├─ chatroom
│  └─ chatroom.html
├─ image-generator
│  └─ image-generator.html
├─ instaclone
│  └─ instaclone.html
├─ custom.css
├─ index.html
└─ service.js

This project does not require any build tools. Simply open the index.html file in your browser, and it will just work.

If you are on remote server, run the following command to host the project:

bash
npm run start 3000

The number 3000 is the port number. You can change it to any port number you want.

You will be able to access the project at http://[your remote server url]:3000.

Key Points of This Tutorial ​

Built with Pure Static HTML, CSS and JavaScript ​

While Skapi is compatible with various frameworks, this tutorial utilizes pure static HTML, CSS, and JavaScript. It showcases how even basic static HTML can be used with Skapi to create a complete web application.

The CSS stylings are intentionally minimalistic, yet the application remains fully responsive across different devices.

Building a Full-Scale Application ​

This tutorial encompasses all aspects of heavy lifting in production-level application, including:

  • Authentication

    • Account creation
    • Login/Logout functionalities
    • Account removal
    • Password reset and recovery options
    • Profile updates
    • Account recovery
    • Email verification
    • Profile picture uploads

  • Instaclone (Instagram Clone) Features

    • Post creation
    • Post private posts
    • Commenting on posts
    • Liking and unliking posts
    • Tagging and searching posts by tag
    • Indexing posts by likes, comments, users
    • Post deletion

  • Simple Chat Room Application

    • broadcast text message in chat room
    • Send/Receive private text message between users
    • List all users in chat room

  • AI Image Generator

    • Generate images using AI with given text
    • Making a request to 3rd party API with client secret key

Detailed Documentation ​

All the code in this tutorial is heavily commented, and the comments are written to help you understand the code and the logic behind it.

Read Order ​

For easier understanding, the tutorial is written in a way that you can read the code files in the following order:

Main Page, Login, Logout ​

  1. service.js
  2. index.html

Authentication and User Profile ​

  1. authentication/create-account.html
  2. authentication/forgot-password.html
  3. authentication/reset-password.html
  4. authentication/recover-account.html
  5. authentication/update-profile.html
  6. authentication/email-verification.html
  7. authentication/change-password.html
  8. authentication/remove-account.html
  9. authentication/profile-pic.html

Instaclone ​

  1. instaclone/instaclone.html

Chat Room ​

  1. chatroom/chatroom.html

AI Image Generator ​

  1. image-generator/image-generator.html