Git Product home page Git Product logo

reactjs-card-challenge's Introduction

ReactJS Card Challenge

A responsive card based design, to be implemented by React & Redux

Introduction

In this challenge, you are going to develop a reactJS responsive web application which shows a random card on the page and has a 'Try' button. Whenever the user clicks on the 'Try' button, you should show him another card. (Order of the cards does not matter).

Each card has at least 2 items:

  • title
  • description

We have different Cards which are shown differently:

  • Picture Card which shows a picture at the end of card content (code is 0)
  • Animated Card which uses a special animation when it is shown (code is 1) (Use a good animation of your choice)
  • Sound Card which plays a sound when the card is shown (code is 2)

Cards can be shown in different themes (meaning they are based on a different template), icon and color representing their tag:

  • sport
  • art
  • fun

You can choose your desired template, icon and color for each theme.

Use the following URL to initialize the card list: http://static.pushe.co/challenge/json. Application state and data, fetched from the server, should be managed by Redux. Write your unit tests using Jest for at least your reducer(s) and action generators. Use unit test best practices at your own discretion.

User is able to edit the title and description text on the cards and save it (just saved it locally, no need to send the saved data to the server). After hitting 'Try' button several times, when visiting the same card again: the saved text should be shown instead of the original server text (for both title and description).

Expectations

  1. We expect a clean, readable and maintainable code with meaningful comments.
  2. It would be better if the project uses a bundle tools like Webpack or parcel.
  3. Although this is a small test project, complete it with the mindset of a big project. (then structres and naming of the files are very important)
  4. As mentioned above it is more valuable to us that the project comes with unit tests

Task

  1. Either clone or private fork this repository (if you don't know how to do that, Google is your friend)
  2. Develop the given challenge
  3. Commit and Push your code to your new repository
  4. Send us an email and notify us of completion! We'll take care about the rest and get back to you.

Please do not start development before getting a confirmation from us.

Happy Coding! โœŠ๐Ÿป

reactjs-card-challenge's People

Contributors

am-ta avatar vahid-amintabar 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.