|
1 | | -#TfTest |
| 1 | +#Welcome to tf-react-coding-test 👋 |
2 | 2 |
|
3 | | -This project was generated using[Nx](https://nx.dev). |
| 3 | + |
| 4 | +[](https://github.com/sebastiandg7/tf-react-coding-test/blob/master/README.md) |
| 5 | +[](#) |
| 6 | +[](https://twitter.com/sebastiandg7) |
4 | 7 |
|
5 | | -<palign="center"><imgsrc="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png"width="450"></p> |
| 8 | +>react coding challenge |
6 | 9 |
|
7 | | -🔎**Nx is a set of Extensible Dev Tools for Monorepos.** |
| 10 | +###🏠[Homepage](https://github.com/sebastiandg7/tf-react-coding-test) |
8 | 11 |
|
9 | | -##Adding capabilities to your workspace |
| 12 | +###✨[Demo](https://sebastiandg7.github.io/tf-react-coding-test/) |
10 | 13 |
|
11 | | -Nx supports many plugins which add capabilities for developing different types of applications and different tools. |
| 14 | +##Usage |
12 | 15 |
|
13 | | -These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well. |
| 16 | +###Install |
14 | 17 |
|
15 | | -Below are some plugins which you can add to your workspace: |
| 18 | +```sh |
| 19 | +npm install |
| 20 | +``` |
16 | 21 |
|
17 | | --[React](https://reactjs.org) |
18 | | --`npm install --save-dev @nrwl/react` |
19 | | -- Web (no framework frontends) |
20 | | --`npm install --save-dev @nrwl/web` |
21 | | --[Angular](https://angular.io) |
22 | | --`npm install --save-dev @nrwl/angular` |
23 | | --[Nest](https://nestjs.com) |
24 | | --`npm install --save-dev @nrwl/nest` |
25 | | --[Express](https://expressjs.com) |
26 | | --`npm install --save-dev @nrwl/express` |
27 | | --[Node](https://nodejs.org) |
28 | | --`npm install --save-dev @nrwl/node` |
| 22 | +###Serve |
29 | 23 |
|
30 | | -##Generate an application |
| 24 | +```sh |
| 25 | +npm start react-coding-test |
| 26 | +``` |
31 | 27 |
|
32 | | -Run`nx g @nrwl/react:app my-app` to generate an application. |
| 28 | +###Dependency graph |
33 | 29 |
|
34 | | ->You can use any of the plugins above to generate applications as well. |
| 30 | +```sh |
| 31 | +npm run dep-graph |
| 32 | +``` |
35 | 33 |
|
36 | | -When using Nx, you can create multiple applications and libraries in the same workspace. |
| 34 | +##Used libs & techniques |
37 | 35 |
|
38 | | -##Generate a library |
| 36 | +-**[Nx](https://nx.dev/):** workspace & dev tools |
| 37 | +-**[standard-version](https://github.com/conventional-changelog/standard-version):** automatic versioning & changelog generation |
| 38 | +-**[Lazy loading](https://reactjs.org/docs/code-splitting.html#reactlazy):** lazy load application features |
| 39 | +-**[Redux Dynamic Modules](https://redux-dynamic-modules.js.org/):** modular Redux state management loaded on demand |
| 40 | +-**[Faker.js](https://github.com/marak/Faker.js):** fake data generation |
| 41 | +-**[Formik]():** forms handling |
| 42 | +-**[Yup]():** data validation |
| 43 | +-**[destyle.css](https://nicolas-cusan.github.io/destyle.css):** CSS reset |
39 | 44 |
|
40 | | -Run`nx g @nrwl/react:lib my-lib` to generate a library. |
| 45 | +##Workspace setup |
41 | 46 |
|
42 | | ->You canalso use any of the plugins above to generate libraries as well. |
| 47 | +You canfind all the generated code script under[`./tools/workpsace-setup.sh`](/tools/workpsace-setup.sh) (suitable for worksapce architecture replication) |
43 | 48 |
|
44 | | -Libraries are sharable across libraries and applications. They can be imported from`@tf-test/mylib`. |
| 49 | +##Author |
45 | 50 |
|
46 | | -##Development server |
| 51 | +👤**Sebastián Duque Gutiérrez** |
47 | 52 |
|
48 | | -Run`nx serve my-app` for a dev server. Navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source files. |
| 53 | +- Twitter:[@sebastiandg7](https://twitter.com/sebastiandg7) |
| 54 | +- Github:[@sebastiandg7](https://github.com/sebastiandg7) |
| 55 | +- LinkedIn:[@sebastianduqueg](https://linkedin.com/in/sebastianduqueg) |
49 | 56 |
|
50 | | -##Code scaffolding |
| 57 | +##🤝 Contributing |
51 | 58 |
|
52 | | -Run`nx g @nrwl/react:component my-component --project=my-app` to generate a new component. |
| 59 | +Contributions, issues and feature requests are welcome! |
53 | 60 |
|
54 | | -##Build |
| 61 | +Feel free to check[issues page](https://github.com/sebastiandg7/tf-react-coding-test/issues). |
55 | 62 |
|
56 | | -Run`nx build my-app` to build the project. The build artifacts will be stored in the`dist/` directory. Use the`--prod` flag for a production build. |
| 63 | +##Show your support |
57 | 64 |
|
58 | | -##Running unit tests |
| 65 | +Give a ⭐️ if this project helped you! |
59 | 66 |
|
60 | | -Run`nx test my-app` to execute the unit tests via[Jest](https://jestjs.io). |
| 67 | +--- |
61 | 68 |
|
62 | | -Run`nx affected:test` to execute the unit tests affected by a change. |
63 | | - |
64 | | -##Running end-to-end tests |
65 | | - |
66 | | -Run`ng e2e my-app` to execute the end-to-end tests via[Cypress](https://www.cypress.io). |
67 | | - |
68 | | -Run`nx affected:e2e` to execute the end-to-end tests affected by a change. |
69 | | - |
70 | | -##Understand your workspace |
71 | | - |
72 | | -Run`nx dep-graph` to see a diagram of the dependencies of your projects. |
73 | | - |
74 | | -##Further help |
75 | | - |
76 | | -Visit the[Nx Documentation](https://nx.dev) to learn more. |
| 69 | +_This README was generated with ❤️ by[readme-md-generator](https://github.com/kefranabg/readme-md-generator)_ |