diff --git a/src/plays/cheesylines/Readme.md b/src/plays/cheesylines/Readme.md index 4f4bb9f80..4833fe469 100644 --- a/src/plays/cheesylines/Readme.md +++ b/src/plays/cheesylines/Readme.md @@ -11,17 +11,59 @@ The Cheesy Lines Web App is designed to entertain users by providing a collectio - User: karna0005 - Gihub Link: https://github.com/karna0005 -- Blog: -- Video: + ## Implementation Details -Update your implementation idea and details here +Installation +Clone the repository: +cd cheesy-lines + +Install the dependencies: +npm install + +Run the app: +npm start +Open your browser and go to http://localhost:3000. ## Consideration -Update all considerations(if any) +Ensure that the button gives proper feedback (e.g., disabling the button temporarily or showing a loading spinner if there’s any delay in generating a line). +Make the application accessible by following best practices for ARIA roles and keyboard navigation. +Use fun and engaging animations for when new lines are displayed to enhance the user experience. ## Resources -Update external resources(if any) +Here’s a concise list of key resources for your **"Cheesy Lines"** React project: + +### 1. **React Documentation** + - [React Official Docs](https://reactjs.org/docs/getting-started.html) + +### 2. **State Management** + - [useState & useEffect](https://reactjs.org/docs/hooks-overview.html) + - [useReducer Hook](https://reactjs.org/docs/hooks-reference.html#usereducer) + +### 3. **Component Design** + - [Atomic Design Principles](https://bradfrost.com/blog/post/atomic-web-design/) + +### 4. **Random Data Generation** + - [Lodash - Random](https://lodash.com/docs/4.17.15#sample) + +### 5. **CSS & Styling** + - [Responsive Web Design](https://www.w3schools.com/css/css_rwd_intro.asp) + - [Styled Components](https://styled-components.com/) + +### 6. **Testing** + - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) + - [Jest Documentation](https://jestjs.io/docs/en/getting-started) + +### 7. **Error Handling** + - [Error Boundaries](https://reactjs.org/docs/error-boundaries.html) + +### 8. **Performance Optimization** + - [useCallback & useMemo](https://reactjs.org/docs/hooks-reference.html) + +### 9. **Fun APIs** + - [JokeAPI](https://jokeapi.dev/) + +These links will guide you through building and optimizing your project efficiently.