The following project consists of an application capable of showing different quotes and accordingly switching the background images just so the hypothetical client of a fictional company can see an initial approximation of the prototype we're supposed to work on.
Considering that one of the objectives was consistently displaying the different quotes and images, we used Vite (https://vitejs.dev/guide/) as the base of our project, a build tool that aims to provide a faster and leaner development experience for modern web projects. Thanks to it, it was possible to implement a Welcome screen, as well as a first component consisting of an array with two different properties:
img, which stored the background images that should be displayed on the screen.txt, which contained four different quotes.
In case you'd want to create your first React project, please, keep in mind the following steps:
Install Nodejs(we'll usenpmto alleviate the project creation, as well as the management of the different packages).Install the project's template. To do that, remember to write the command
$ npx create-react-app name_of_projectStart and visualize the project:
$ npm start
As seen above, the final result should look somehow similar to the one provided by IT Academy's guidelines and the usage of styled-components.
In order to customize the assignment, however, I decided to include new designs and quotes extracted from the Tao Te Ching while still respecting the basis of the project; the objective, in this case, varied from telling a story to providing the user with some meaningful and philosophical quotes:
It would have been impossible for me to achieve this result if it wasn't thanks to incredibly talented illustrators such as Helvetica Blanc (https://helveticablanc.com/), the creator behind the artwork that illustrates this application. If you still don't know their work, please, have a look at it (it's simply amazing; you have my word!) - and try your best to support (in any way possible) these creators with such a unique vision of reality.
- Thanks a lot for becoming a part of this!
