Git Product home page Git Product logo

frontend-code-challenge's Introduction

Front-end Code Challenge - React

This is a boilerplate for a code-challenge meant for Front-end engineers using React as library tool for development. It includes all necessary HTML and CSS, so your work is to focus on the development of the app. Please fork this repository in your own account.

For other technologies

Switch to the branch of the technology of your expertise and follow the README:

git checkout [vue|react-native|angular]

How to use

git clone https://github.com/Nikodermus/frontend-code-challenge.git
cd frontend-code-challenge
npm install
npm run start

The app will be available in your browser at localhost:3000

Challenges

These are a series of features the app should do, here they are sorted in the priority they have, if you feel unable to complete one you can continue with the next one in hope to do as much as possible in given the time scope.

  1. Fetch the given .json file inside src/App.jsx when the user writes in the input
  2. Filter the results given user input, it can be searched by Name or one of its Types
  3. Results should be not more than 4 at any time.
  4. Sort elements first if the match the Name, then if they match the Type
  5. User can toggle on/off to sort by maximum combat points (MaxCP), this will take effect on the whole list, but you should only show the first 4 elements that match the current search
  6. If the search matches a part of the name, that part of the name should be hightlighted
  7. While the list is being downloaded, show the loader.
  8. If there're no results, show the No Results badge

Development

  • You can use internet, other projects, textbooks and whatever you think you need to complete the task, work as you usually would.
  • Please speak as you develop, this in order to understand better what you are trying to do.
  • You can ask questions if you need to, but try to refer to this document in first place, should have all what you need.
  • You can create as many components in the fasion you want (classes, stateless functional components, react hooks).
  • This setup uses EcmaScript Stage 4, you can use destructure, rest syntax, etc... This project is meant to be written with ES6+ standard.
  • Do not add dependencies.
  • Do not spend time in configuration, babel, webpack. This project has enough for its purpose and time is short.

frontend-code-challenge's People

Contributors

dependabot[bot] avatar nikodermus avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  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.