fernandobrito/assignment-fit-text

Job interview assignment made with React and TypeScript. Fits an arbitrary text on a container with an arbitrary width using the maximum possible font-size.

Do you have questions or suggestions? Contact me on Linkedin, or open a pull request on this project.

This project was made as a programming assignment for a job interview.

---

Fit Text

You need to create a JavaScript solution to make a variable length text fit inside a container with flexible width but fixed height. The purpose of the solution is to “fit” the input text into the div in one line (no line breaks) within the div height and using the maximum possible integer font-size​. The form’s text input and range slider position should be persisted between page reloads. Use any framework/tool/library that you consider appropriate. There are no restrictions in that sense.

Built with TypeScript and React.

For this project I have intentionally chosen not to use Create React App or similar tools in order to practice how to configure from scratch Webpack (and its loaders), TypeScript and integrate all different tools.

I have used a third-party library to do the actual text resizing (jquery-textfill) and I chose to focus on other aspects of the solution, such as project organization, code quality and modularity.

The project is deployed at: https://fernandobrito.github.io/assignment-fit-text/ (GitHub Pages).

Technologies

• node (8.11.2)
• react (16.4.0)
• typescript (2.8.3)
• jquery (3.3.1)
• jquery-textfill (0.6.0)
• js-cookie (2.2.0)
• chart.js (2.7.2)
• react-chartjs-2 (2.7.2)
• webpack (4.10.0)
• jest (23.1.0)
• enzyme (3.3.0)
• tslint (5.10.0)
• sass-lint (1.12.1)

Services

• CircleCI: Run tests, lint tools and build project on each commit.
• CodeCov: Test coverage report (pushed by CircleCI after each build).
• CodeClimate: Code quality analysis.

Installation

📋 Install all necessary modules to run the current project.

$ git clone https://github.com/fernandobrito/assignment-fit-text
$ cd assignment-fit-text
$ yarn install

Development

📋 Start development server.

$ yarn start

The app will be served with live reloading and hot module replacement on http://localhost:8080.

Test

The project uses jest as a testing solution and enzyme for React testing utilities. There is over 97% test code coverage.

📋 Run all unit tests.

$ yarn test

Lint

Different linting tools are used to enforce a consistent coding style.

📋 Run linting tools individually.

$ yarn lint:ts
$ yarn lint:sass

📋 Run all linting tools at once.

$ yarn lint

Build

Webpack is used to generate minified asset bundles.

📋 Build the app for production on the dist folder

$ yarn build

Deploy

📋 Build the app and deploy it to GitHub Pages.

$ yarn deploy:gh-pages

Contributing

1. Fork it
2. Create your feature branch with specs (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Suggestion for improvements

• Improve build process by moving CSS to its own files and improving chunks generation
• Improve folder organization. Move test and lint configuration files from project root to subfolder
• Use alternative lib for resizing the text that does not depend on jQuery

Known issues

• html-webpack-plugin has a known issue and will display Entrypoint undefined = index.html on the console output. This message can be ignored (html-webpack-plugin#895).

Contributors

• Fernando Brito (fernandobrito)

License

This project is licensed under the MIT License. Check the LICENSE file.