This is only to prove your skills, try harder, be smarter and think out-of-the-box 🤓, the test is intend to measure your skills so besides the code, you have to follow some standards described below.
The reason why i'm writing this test in english is because you have to be familiar with it, the best documentation is written in English. (Also i'm doin' it to practice 🙄).
In this test, we're going to build a PWA with React, for funny and entertainment situation we're building a Rick and Morty's fan site.
This application must accomplish some features:
- Search bar (it might search for episodes and characters).
- It might have search filers like described in RMAPI
- Recent characters and episodes (main page).
- Character profile.
- Episode information.
- Search results must have pagination.
- The application must be mobile-friendly.
- put some creativity from you...
To get all the information from Rick and Morty, we will use and HTTP API that already exists called The Rick and Morty API, this is where you will be able to retrieve characters, locations, images, episodes, etc.
Like it's obvious we're using React as our main goal, i'm starting to give you the technology and standards that you MIGHT use:
Note: Just the technology marked with * is a MUST, otherwise remember to think out-of-the-box.
- Standard*: You have to install it and configure it in your editor/project. It's the standard we use for JavaScript code.
- Create React App*: You might initialize your app with this CLI app made by Facebook (React's creators). It'll make your life easier and it implements everything that you will need.
- Redux*: It's a framework which use Flux architecture made by Facebook open source. It let you store an state for your application and handle changes by actions that might change your state.
- Duck pattern: It's a modular redux pattern, which will make your app scalable and easy to read while you can use redux as LEGO's pieces.
- React Router*: DOM Bindings to handle the routes of your application, this is useful when your application is not a SPA.
- Redux Devtools: As you have use Redux, it may be helpful to have a debugger and a state viewer for Redux.
- Redux Sagas: Library extension for Redux which let you handle the side effects from your application with generators, you can compose, combine and above with the helpers it contains. (It works with duck pattern to).
- Redux Cycles: Library extension for Redux which let you handle side effects in a pure functional way, minimizing errors and make your app even more composable. (It works with duck pattern to).
- Connected React Router: library which let you connect your router with redux, just think a little bit about it, sounds awesome!
Recommendation: use on of the side effects redux handler from above.
- Material UI: React components that follows Material Design from Google, they're complete and ready to production. Support theming and CSS in JS.
- Styled Components: Library Helper for react which let you build modular and styled components, it's flexible and the API is simple.
- Grommet: Another series of components for React which use their own design guidelines, it has a lot of useful and gorgeous components, it also supports theming.
- Reflexbox: Flexbox grid system to position and space components in React, it has a simple and clean API.
Note: Like i said, you could use whatever you want, but remember to stick with the idea of the project.
- React has a file standard according to the use of JSX, the files which contains JSX syntax MUST end with .jsx, otherwise with .js.
- I'm truly believer of K.I.S.S pattern, check it out!
- React is based on functional principles, the functional saying is about to split your code into small pieces of functions so later you can compose them. Do the same with React, create components as you wish, but don't forget to fit in the definition of reusability. (Here is an article about it)
- Do as many files you want for your project, try to split into pieces and name them (files, variables) with a name for it's purpose.
- Name the things accordingly to their use, e.g. A component which centers a Box might be named as CenteredBox DO NOT use names like
x, y, z. - Do not forget to remember that your code might be used for others, so don't be selfish and write readable code 😐 (this tip is an extension from the previous tip).
- Before you start, i recommend you to check the documentation of the libraries/frameworks/technology you will use.
- Document your code. Besides you will try to write readable code (i hope so 🙌🏻).
- You MUST use an UI Library described in Technology section, but you still have to design your app structure, so be intelligent about it.
- BE FUCKING CREATIVE IN EVERY POSSIBLE SITUATION.
- Despite you have some limitations 🙃, you have the ability to refute the points in this test and prove yours (just don't forget what's about this application).
- The time to develop this web application is maximum 2 weeks. Less time is equal to better performance :)
HERE YOU HAVE A GOOD REACT RESOURCE LIST 😇
With ❤️ by Jorge Garduño.