Code Monkey home page Code Monkey logo

frontend-challenge's Introduction

Front-end challenge

This is a test to determine how skilled you are at using git, GitHub, JavaScript, React, Redux, CSS and other technologies. You are encouraged to put your best foot forward.

Required software

In order to work on this challenge, you will need the following:

  • Node.js v10 or later.
  • Yarn package manager v1.22.4 or later.
  • git v2 or later.

Test instructions

  • Clone this repository.
  • Open a terminal/command prompt and navigate into the cloned repository.
  • Run the command below to install the app's npm dependencies:
yarn
  • Create a new branch based off of the master branch and implement the requirements in the app requirements section below in that branch.
  • Create a public repository on GitHub and push both your master branch and your implementation's branch to it.
  • In your repository on GitHub, raise a pull request that seeks to merge your implementation branch into the master branch.
  • Send a link to that pull request to [email protected] so that we can evaluate what you have done.

App requirements

We would like you to build a basic chatting/messenger app. You have creative freedom on what it will look like, but you can use the pictures in the sample implementation section of this document as a guide.

  • Required features:
  1. A user should be able to select different friends. You should list at least 5 other friends that the user can select.
  2. After selecting a friend, a user should be able to write messages in the chat window, hit a "Send" button or press Enter to send the message, and see them appear.
  3. A user should be able to switch from Friend A to Friend B and still see any previous messages that they've sent to Friend B.
  4. The app must be responsive at least at mobile resolutions.
  • Not required:
  1. Persisting chat history across page reloads.
  2. Talking to a backend/REST API.
  3. A sign up or sign in system.
  4. Making the app responsive at ALL resolutions.

Sample implementation

Here are screenshots of a sample implementation for you to use as a guide:

All the best!

frontend-challenge's People

Contributors

manuelbiolatiri avatar foladipo avatar folushooladipo avatar

Watchers

James Cloos 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.