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.
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.
- 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.
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.
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.
In the project directory, you can run:
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.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
/ / | | | / \|_|_/ ,--/.__/--' _.-/ _ \-._ .'| .'::(_,-' `-._)::`. |:| (:::::::::::::::::::) .':| \_:::;;;::::;;;:::/ / |::| \ ,---'..\::/..`-.' / |::| \ \_;:....|'...:_ ) / .'=|| \. )---. )_.--< ( /' ||=|| \\ //|:: /--\:::\\\ // _||= | \\ ||::\:|----|:/:||/--.______,--==' \ - / -._ \`. \\:|:|-- -|:\:/-.,,\\ .----'//'_.`-' \. `-. \ \ _|:|:|-- -|::||::\,,||-'////---' |/' \\ `._)\ / |\/:|-/|--\:/|. :\_,'---' / \\_ /,,\/:.'\\/-.'`-.-// \ | /`\- //,,,' |-.\-'\--/|-/ ./| | / /||- ||, /| |\. |.-==-.| . /| | | / __ | /||- ||,,\- | . \;;;;/ . .':/ _,-=/-' / \// /||- ' `,-|::\ . \,..,/ /: / /.-' ,--|| /||-/.-.' \ `._ `--' _.' .'| // .--||`. /||//\ ' |-'.___`___' _,'|// /; /\| \ ///\ / \\_`-.`--`-'_==|' /;' / |'\ \. //\ / \_\__)\`==-_'_| / / .' \.=`./|\ / \`-- \--._/_/------( / \.=| `_/|- |\`-| -/| `--------' \\` ./|-/- |\`-| |-| ________ `--\ |=|' _|\`-| |-|----'.-._ ..\`-. -|-|- .-':`-;-| |./.-.-( | ||..|=-\\ `'= /' / ,--.:|-| ||_|_|_|_|-'__ .`-._) /|-|- .' /\ \ \|-` \\ ____,---' `-. ..| /\=\/..'\ \_>-'`-\ \' \ .| `,-':/\`.>' |\/ \/\ \ `- | //::/\ \/_/|-' \/| \ `. / || / (:|\ \/) \ \|.'-' `-\\ |;:|\_ || |:`-/:.'-|-' \| \\ `;_\-`-._ \\=/:_/::/\| \| |\\ `-._ =`-._ \_)' |:| | // `--.__`-. |:| )\| /;/ / (\_ / / |\\;;_`-. _/ / ' `---\.-\ /::|| /:::/ //;;' `-'