https://github.com/harshproj/punt_partners-assignment-
https://github.com/harshproj/punt_partners-assignment-
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/harshproj/punt_partners-assignment-
- Owner: HarshProj
- Created: 2024-06-27T06:07:44.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-28T04:17:46.000Z (about 2 years ago)
- Last Synced: 2025-01-22T16:14:48.762Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://font-analyzer.vercel.app
- Size: 322 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Steps to Implement the Text Editor
## Project Setup
Create a new React + TypeScript project.
Install necessary dependencies: react, react-dom, @types/react, @types/react-dom, axios for API calls, and styled-components for styling.
## Component Structure
App.tsx: Main component to hold the editor and settings.
Home.tsx:this component hold the text editor
## Fetching Google Fonts Data
Use the provided JSON file to map font names to their variants and URLs.
## State Management
Use useState to manage the text, selected font family, weight, and italic state.
Use useEffect for auto-saving and loading from localStorage.
## Implementing Auto-Save
Save the text, font family, and selected variant in localStorage on every change.
Load the saved data from localStorage on component mount.
## Handling Font Variants
Update the font weight and italic options based on the selected font family.
Handle the logic to select the closest available variant if the exact one is not available.
Styling
Apply the selected font family, weight, and italic style to the text area using inline styles or styled-components.
## Error Handling
Handle invalid font variants gracefully.
Ensure the application does not crash with invalid data from localStorage.
# Error Handling and Improvements
## Invalid Font Variants
Validate the font variant before applying it.
Fallback to the closest available variant if the exact one is not available.
## Future Improvements
Integrate with a persistent backend.
Improve the UI design.
Add more comprehensive unit tests.