Welcome!

This project will be used to test your skills during the interview. We are going to ask you a couple of questions about the code. You will be asked to propose changes and you will have a chance to implement them on your own.

Before the interview

Please prepare yourself before the interview but do not spend more than 15 minutes on it. Please read this README file carefully and check the code of the application. Focus mostly on App.tsx as this is a file which we are going to discuss. Do not modify the code yet! You will do this during the interview.

The challenge

• Look at the project as you'd like to continue its development. Refactor the code using your knowledge about best practices etc. Focus on using available tools rather than bringing something new to the project.
• Use TypeScript to define types / interfaces
• Refactor the code so the project uses redux-toolkit. It's already set in the project - you're welcome! ;-)
• If you'll have some spare time show your CSS knowledge by redesigning the app:
  • the app should be wider,
  • stories should render as tiles in 3 columns,
  • when clicked the tile should expand to the full width of the app and show more data.

Note

Due to time limitations you may want to leave a comment in parts of the refactor that would be time consuming, but still worth doing so we still get the idea of what would you do in a normal scenario.

Setup

While working on the task you can use help of the internet as well as discuss everything with us!

This project was bootstrapped with Create React App.

Create .env.local file in the root folder of the project with the following content REACT_APP_API_KEY= REACT_APP_API_ID=

Ensure values of above are set before going forward.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Enjoy!

                                                            / /
                                                         | | |  /
                                                          \|_|_/
                                                        ,--/.__/--'
                        _.-/   _   \-._                    .'|
                      .'::(_,-' `-._)::`.                  |:|
                     (:::::::::::::::::::)                .':|
                      \_:::;;;::::;;;:::/    /            |::|
              \        ,---'..\::/..`-.'    /             |::|
               \       \_;:....|'...:_ )   /             .'=||
                \.       )---. )_.--< (   /'             ||=||
                 \\     //|:: /--\:::\\\ //             _||= |
                  \\   ||::\:|----|:/:||/--.______,--==' \ - /
           -._     \`.  \\:|:|-- -|:\:/-.,,\\  .----'//'_.`-'
       \.     `-.   \ \ _|:|:|-- -|::||::\,,||-'////---' |/'
        \\       `._)\ / |\/:|-/|--\:/|. :\_,'---'       /
         \\_      /,,\/:.'\\/-.'`-.-//  \ |
         /`\-    //,,,' |-.\-'\--/|-/ ./| |             /
          /||-   ||, /| |\. |.-==-.| . /| |            | /
  __  |    /||-  ||,,\- | .  \;;;;/ .  .':/         _,-=/-'
 /  \//    /||-  ' `,-|::\ . \,..,/   /: /         /.-'
 ,--||      /||-/.-.'  \  `._ `--' _.' .'|        //
 .--||`.    /||//\ '   |-'.___`___' _,'|//       /;
   /\| \     ///\ /     \\_`-.`--`-'_==|'       /;'
  / |'\ \.   //\ /       \_\__)\`==-_'_|       / /
   .'  \.=`./|\ /          \`-- \--._/_/------( /
        \.=| `_/|-          |\`-| -/| `--------'
         \\` ./|-/-         |\`-| |-|     ________
          `--\ |=|'        _|\`-| |-|----'.-._ ..\`-.
              -|-|-     .-':`-;-| |./.-.-( | ||..|=-\\
              `'= /'   / ,--.:|-| ||_|_|_|_|-'__ .`-._)
               /|-|- .' /\ \ \|-` \\ ____,---'  `-. ..|
                /\=\/..'\ \_>-'`-\ \'              \ .|
                `,-':/\`.>' |\/ \/\ \              `- |
                //::/\ \/_/|-' \/| \ `.            / ||
               / (:|\ \/) \ \|.'-'  `-\\          |;:|\_
              || |:`-/:.'-|-' \|       \\          `;_\-`-._
              \\=/:_/::/\| \|          |\\            `-._ =`-._
               \_)' |:|                | //               `--.__`-.
                    |:|                                         )\|
                    /;/                                         / (\_
                   / /                                         |\\;;_`-.
                 _/ /                                          ' `---\.-\
                /::||      
               /:::/
              //;;'
             `-'