Welcome to the Timer App Assignment! This project is designed to evaluate your skills in React development, focusing on UI implementation, code quality, state management, and best practices. The project uses React, Vite, Tailwind CSS, and Vitest for testing.
Your task is to improve and enhance an existing Timer App based on the following requirements. The app currently has a partially implemented timer system, and your goal is to address the listed issues and extend its functionality.
- Frontend Framework: React (with Vite for fast development)
- Styling: Tailwind CSS
- Testing Framework: Vitest (for unit and component testing)
-
Fork or Clone the Repository
- Fork or clone the repository to your local machine.
- Set up the project using the provided instructions.
-
Complete the Following Tasks:
-
Match the UI:
- Ensure the app's UI matches the given screenshots.
-
-
-
-
-
Simultaneous Timers:
- Update the app to allow multiple timers to run simultaneously (currently, only one timer runs at a time).
-
Snack Bar Behavior:
- When a timer is completed:
- A snack bar notification should display.
- The notification sound should keep playing until the snack bar is dismissed.
- When a timer is completed:
-
Fix Snack Bar Console Error:
- Resolve the console error that occurs when the snack bar's dismiss button is clicked.
-
Extract Common Components:
- Extract the buttons in the Add/Edit Timer Modal as a separate reusable component.
- Replace all instances of similar buttons in the app with this component.
-
Consolidate Modal Code:
- Refactor the code to use a single modal component for both adding and editing timers, eliminating duplication.
-
Validation Snack Bars:
- Currently, the Submit button is disabled when the form is invalid.
- Show an error snack bar or notification when the form is submitted with invalid data.
-
Responsive Snack Bar Placement:
- For desktop devices: Display snack bars in the top-right corner.
- For mobile devices: Display snack bars at the bottom of the screen.
-
Write Tests:
- Add unit tests for the
validation.tsfile to ensure all validation rules work as expected. - Write component tests for reusable components like
TimerItemandModalButtons.
- Add unit tests for the
-
Timer Persistence:
- Use localStorage to persist timers across page refreshes.
-
-
Clone the repository:
git clone https://github.com/CW-Codewalnut/timer.git
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Run tests:
npm vitest
You will be evaluated on the following points:
-
UI Matching:
- The app's UI should match the provided screenshots.
-
Code Quality:
- Clean, modular, and readable code.
- Avoid code duplication and ensure reusable components are implemented.
-
Functionality:
- Simultaneous timers, snack bar notifications, and localStorage persistence should work seamlessly.
-
State Management:
- Effective use of React hooks or Context API for managing state.
-
Testing:
- Comprehensive unit and component tests, especially for validation logic and reusable components.
-
Error Handling:
- Resolve the existing snack bar console error and provide meaningful feedback to users for invalid forms.
-
Responsiveness:
- Snack bar placement should adapt based on device type (desktop vs. mobile).
-
Commit Messages:
- Follow conventional commit standards (e.g.,
feat:,fix:,refactor:).
- Follow conventional commit standards (e.g.,
- A GitHub repository link to your completed project (forked from the original repo).
- Include a
README.mddescribing:- Steps to run your project.
- Any additional changes or enhancements you made.
You are expected to complete this assignment in 4 hours of focused effort.
If you have any questions or issues, feel free to reach out via the provided contact channels in the repository.
Good luck! 🚀