/homework-front-end

TrendyGIF - mobile first, responsive SPA that consumes Giphy API. Node app with JS, jQuery, HTML, CSS, Bootstrap

Primary LanguageJavaScript

INSTRUCTIONS FOR USE

These instructions will get a copy of the project up and running on your local machine for development and testing purposes.

  1. Clone or fork git repo $ git clone https://github.com/bterbs/homework-front-end.git
  2. cd into new project directory
  3. Install your dependencies: $ npm install
  4. Run the server: $ npm run start
  5. Log on to http://localhost:3000 to access the client front end. The Express server will be running on port 3000.

Eaze Front End Homework

Front End coding challenge.

Project

We would like you to build a web app that displays the trending GIFs on Giphy. Users visiting the website should be able to search for GIFs and see a list of results. The user should be able to expand a GIF and see its details (username, rating, anything you think could be relevant).

Users should have a good user experience on desktop, tablet and mobile devices.

This project is pretty open ended in order to leave you some freedom to improve upon the base by focusing on what you like the most.

We strongly encourage you to pick a couple of optional improvements. The following are just some ideas, so if none of these interest you, feel free to do something that isn’t on this list:

  • When the user scrolls the page to the bottom, load new GIFs automatically.
  • Create a mosaic layout and display a placeholder when GIFs are still loading.
  • Show off your animation skills!
  • Sort the results by uploaded time and let the user choose if they prefer ascending or descending ordering.
  • Let the user favorite GIFs and list their favorites. The users should be able to retrieve their favorite GIFs even after refreshing the page.
  • Provide the ultimate user experience: scrolling, searching, fetching… could be optimized for UX.
  • Let the user upload a GIF.
  • Add some unit tests.

Project Structure

We've included all of the boilerplate to get started with this project using create-react-app, feel free to use this structure if you'd like. If you'd prefer to use something other than React or you'd prefer a different project structure, go ahead and make any changes you'd like.

Evaluation

The app should run on any computer by running npm install and npm start. We’ll evaluate the exercise by looking at the end result and the code.

Notes

Please, don't open a PR against this repo. Just follow the direction from the rectuiter on how to submit the exercise.

Coding at Eaze

At Eaze we strive for writing simple, maintainable and clean code.

We prefer simplicity over complexity.

We comment our code and commit often.

We love our users and we really care about providing a good user experience and pleasant UI.

We encourage out of the box thinking and we love to be impressed!