The day is not over, so I decided to keep planning on the web application.

I thought of a feature to add – Search Autocomplete. Yes I know, keep it simple. I promise, I would not add any other feature before the first publishing okay!.

Now let us talk about what we should see in the HTML page – <input> for searching, <p class=”autocomplete”> for autocomplete data, <div class=”content”> you guessed it, content area. It is going to be a single page application, which means a lot of async requests with JS. There are two ain functions JavaScript has in this application, 1) The guy that handles the view 2) The guy that sends and gets data to PHP/MYSQL (controller).

Let us speak on the storyline of the web app:

  • User loads lexpression.ajalacomfort.com
  • User types in expression
    • User sees autocomplete data -> expression suggestion list
  • User presses return or the send button
    • Or clicks one of the autocomplete suggestions
  • Loading image shows while the data is being requested
  • User gets list of match expressions and their corresponding translations
  • User likes a translation, presses upvote
  • User does not like a translation, presses downvote
  • User adds a translation
    • CAPTCHA
  • User adds an expression
  • User leaves the site

List of Events 

  1. <input> change : while typing
  2. <input type=”submit”>: send expression (either in search box, add expression or translation box)
  3. <p class=”autocomplete-data”><a href=”~”> click : selection of autocomplete data
  4. <spam class=”vote”> click: upvotes or downvotes

List of Views

  1. Input Box
    1. Search Box
    2. Add Translation Box
    3. Add Expression Box
  2. Button
    1. Submit Expression
    2. Submit Translation
    3. Search
    4. Upvote
    5. Downvote
  3. Content
    1. Expression
    2. List
      1. Languages
      2. Translations
  4. Pagination (optional)

List of Requests

  1. Get / Post Expression
  2. Get / Post Translation
  3. Post Upvote / Downvote

Development Process (roughly)

  1. HTML
  2. React js /Backbone View and Controller
  3. CSS/Sass Styling
  4. PHP and MYSQL Setup
    1. API
    2. Security
  5. Go Online

I may end up using React or Backbone for the View and Controller and Sass for CSS

Watch for my streaming on Youtube – Ajala Comfort

These might interest you:
%d bloggers like this: