FACN4 / stars_of_the_north_w4

Autosuggest project
0 stars 0 forks source link

Stars Of The North - Matt, Yoosef, Noor & Suha

Our link: http://stars-of-the-north.herokuapp.com/


Our Aim

Our project allows users get a list of suggestions of star names. They are given a list of suggestions when typing a letter or a string about the star name they're looking for. This enables the user to quickly pick the name of their favourite star. The user is then able to click their star's result and search Google directly for further information about the selected star.

Our Journey

Day 1 AM: We brainstormed as a team and then decided the topic of our website. We first looked at Day 1 PM: We went through the user's stories, and agreed on the back-end and the front-end files structure. We broke into 2 teams, one team worked on back-end files, and the other on front-end files, by devising a simulated files for the server and the HTML at the beginning Day 2 AM: We met in the morning and the backend team continued working on the search functionality whilst the frontend team worked on CSS and writing the XHR request Day 3 PM: We connected the frontend and backend and appended the search results to a div on a front end. We also added functionality for the user to click the star name to go to Google.

Site Structure

The website contains a header, an userInput box to search for the stars' names, and displays the search results in a pre-populated list (an autocompleter to update list of suggestions as we type).


Statement process

  1. The user types a letter/string.
  2. A request is sent with the letter typed, to the server by the client(index.js).
  3. The server takes this request and searches through a large data file(data.json).
  4. The server responds with a list of possible words with the letter the user inserts, which will be displayed on the page.
  5. The user can easily and quickly pick up the name of the star he is looking for.

Architecture and Data Flow


Reference - User's stories:

We met the following user's stories with our website:


Stretch Goals: