Giter Club home page Giter Club logo

lap1_codechallenge's Introduction

Lap1 Code Challenge - GoogleClone

Exercise Description

Within your pair, work on developing a Google like application. In other words, create your own server, and front end - with Google's look - that communicate with one other so that:

  • when pressing the left side button, an API call should be executed and users should be shown a page with ten results
  • when pressing the right side button, user should be taken to the page of one of the results searched by the user

Extension: You may make use of a Google Search API. Also - if you use your own API - you can have limited selection of 'result' options that might be returned for a few search terms.

Implementation

Installation & Usage

  • Git clone/download the repository
  • Open repository using GitBash or GitDesktop
  • Open repository in Visual Studio Code

Server

  • Right click on the server folder and choose Open in Integrated Terminal
  • Run command npm start

Client

  • Navigate into the client folder
  • Open homepage.html via live server plugin
    Note: Another way to open the file is right click and selecting Copy Path, then paste it in the browser

Technologies

  • GitHub
  • GitBash (or GitDesktop, or any terminal)
  • Visual Studio Code
  • CSS
  • HTML
  • JavaScript
  • API
  • Node.js

Usage

Having opened the homepage, the user should see several options to access - as does Google. However, for the purpose of this project only the Google Search and I'm feeling lucky button functionalities will be addressed.

In case the user selected the Google Search button, then the user should be redirected to a new page. The new page will present several results in a Google list of results format from an API created by us. Thus, several of the items in the list can be accesed, and will redirect the user accordingly.

In case the user wishes to select the I'm Feeling Lucky button, the user must give an input to the text area with any of the following terms: facebook, reddit, amazon, sky, youtube, netflix, microsoft, github, steam, instagram. Then, the user should be redirected to a new page that will display the result as an item in a Google list of results format. However, if no input is given, then the user will be prompted with an informative message.

Note: Google list of results is created with the following template:

  • url
  • title
  • description
  • tags

Process

The overall process was a great collaboration!

To begin with, the project kick off with a short meeting to run through the tasks, and ensure the team's focus and understanding of the requirements and needed deliverables.

Moving on, tasks were divided in two main areas, server side and client side. The task were then allocated to each of the team members. And still, whilst the project was progressing the divison of tasks has gone.

Next, during the duration of the working day several meetings were done at an interval of about 1h to 2h via Slack. This approached proved to be of great benefit for performance, and error handling. Additionaly, it helped keeping the team focused and motivated. Thus, the project had implemented a similar approach to the extreme programming.

Then, taking the process in terms of milestiones there were two significant ones - before, and after reviewing. The before reviewing stage had implemented a straight foward, yet wide approach. To better clarify, two pages were created with the associated buttons - Google Search, I'm Feeling Lucky - followimg the structure of the desired outcome. And the design was basic. Next, the after reviewing stage, used only one page to display the results by making use of the sessionStorage() object, and the .createElement() and .append(). In other words, depending on which button is selected, a value will be stored for the session and used to determine the results - whether showing the full list, or just one item.

Bugs

  • For the latest design, the I'm Feeling Lucky button fails to do the random set of the text
  • For the implemeted design, the image is misplaced, the button aspect should be improved, and few other elements need to be added (that are on the latest design)

Future Work

  • Integrating the new design
  • Adjusting the design of the result.html

Wins & Challenges

Completing the task has brought several accomplishements namely:

  • An increase of the communication skills, motivation, and focus

Yet, there were several challenges such as:

  • Structuring the process
  • Overlooking the importance of using comments in the code

Licence

MIT licence

lap1_codechallenge's People

Contributors

ddaiana avatar ismael76 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.