Is there something we all want, need, and dream of - but none of us have? Exactly: money.
With this sad and yet relatable idea in mind, the following project aimed to offer a humble application allowing hypothetical users to estimate the price of a website, as well as obtain a desirable response according to the options they chose and their different prices.
As seen above, the final result should track the selected options, clear up any possible doubts regarding the very nature of the services through an information button, offer a final price, allow the user to keep their customized lists safe and sound, and, finally, display them on a right panel after submitting.
Independently of the apparent simplicity of the project, it allows for interacting more directly with the client as we are taking into account their choices and preferences, and also providing them with tools for a smoother experience, such as:
- a
search bar - buttons
sortingtheir saved lists bydateandname - an
individualized deleting systemfor each list created - the possibility of
clearingall their saved budgetsat once - a
pagination systemfocused on making their saved data more accessible - the possibility of keeping their budget options
saved in the URL.
By combining all of these elements, we are delivering if not a great tool (note that this is the creator's second React project, so of course it's not good at all!), at least an intuitive one.
In order to customize the assignment, I implemented some extra functionalities (the navbar or the pagination system are two of the most noticeable ones), and then applied styled-components and in-line styles to each of the individual components. Since these are my very first steps in using React, I divided the project into three main parts:
- A
welcomepage. - The
main site, which incorporates both theservicesat the customer's disposal and atabledisplaying their lists. - An
aboutpage, just so it would feel more personal and welcoming:
As it's almost a tradition here, the creation of this little app would have been impossible without the inspiration and stunning designs from different indie video games available in itch.io (https://itch.io/), a platform that offers a simple way to find, download and distribute humble and yet heartwarming interactive pieces of art.
For instance, Eternal Home Floristry or Dear Substance Of Kin, both created by Deconstructeam (https://www.deconstructeam.com/), illustrated and gave sense to the very essence of the entire project - and they won't steal much time from you. Check them out! And just in case you feel tempted to create a React application by yourself..
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify