Welcome to the code review and refactoring test! In this test, you'll be reviewing and refactoring an example Vue.js "Jokes" app to improve its structure, readability, and maintainability. Your main objective is to enhance the current codebase.
The provided codebase is a Vue.js application written using version 2.7.0, which is the current version in Crowdbook. Your task is to review the existing code, identify areas for improvement, and refactor it to adhere to best practices. Additionally, you're required to install and integrate Tailwind CSS.
For the test the following API are used for some easy functionality https://api.chucknorris.io/
The minimum requirements for the app are as follows:
The app should be at least as functional, as from start.
- Allowing users to:
- View the current joke
- View previous jokes
- Create a new joke
- Generate a random joke
- Delete previous joke
- Tailwind CSS should be installed and integrated into the project using a package manager
Besides the requirements feel free to develop what you see fit.
Code Review: Begin by thoroughly reviewing the provided Vue.js codebase. Pay attention to the architecture, organization, coding standards, and any potential issues or inefficiencies. Create a clear plan of what you wish to prioritize for refactoring.
Refactoring / Developing: Once you've completed the code review, start refactoring the code to address any identified issues or areas for improvement. You're encouraged to make any necessary changes to improve the codebase, examples could be:
- Implementing best practices
- Optimizing performance by reducing unnecessary re-renders and improving data fetching methods
- Introducing proper error handling and validation where necessary
- Enhance User Interaction
Tailwind CSS Integration: Install and integrate Tailwind CSS into the project using package manager. Utilize Tailwind utility classes to style components and elements throughout the application.
Submission: After completing the code review and refactoring, Email casper@crowdbook.com with your revised codebase. Include your thoughts or suggestions on what you would address if you spent more time.
- You're allowed to make any changes you deem necessary to improve the overall codebase, such as upgrades, deleting current code, adding new code, linting, and architectural changes.
- The main objective is to enhance the current codebase while also integrating Tailwind CSS for styling enhancements. However, prioritize Vue.js over styling if you are in time need, but showing you know tailwind and CSS is also much appreciated.
- Leverage your expertise and creativity to implement solutions that adhere to best practices and standards.
- If you have any questions or need clarification on any aspect of the test, feel free to reach out for assistance.
Thank you for participating in this test! We look forward to reviewing your work. Good luck!