This is a small app that connects to a firebase instance to allow the users to create a todo list with it's correspondant list items.
To install the project you need to follow the next steps:
- Clone the repository
- Configure your firebase realtime database and auth settings in the firebase console
- Copy the connection object into a new file at src\components\Firebase\firebase.js, you can copy src\components\Firebase\firebase-connection-template.js and rename it to firebase.js with your firebase connection object
- Run 'yarn install', to install the project dependencies
- Run 'yarn start', to start the development deploy
There are more yarn notes at the end of this file.
The app hast six 'root' pages, that call all the components needed to provide the to-do list functionalities.
It is accesible to all the users, even when they are not logged in, it only displays a text, you could add anything that you want all the people to see in this section.
This page allows the user to sign in or create a new account. It uses the firebase auth API so aditional sign up methos can be used, such as a Google or Facebook account.
It also has links to a create account page. In this versión of the app the user can choose to be an 'Admin' by activating the checkbox field, you should remove this and add it to another component, e.g. the admin page.
The home page is a protected component that is only visible to logged in users, it displays the to-do list and it's items. You can add a new item with the text field at the bottom of the page, and edit or delete an existing one by using the correspondant button.
Another protected component, it allows the user to reset the password by sending an email with a link or by setting the password manually. This page also lets the user link or unlink other authentication methods.
This page displays all the app users and has a link to a detail component that also allows to send a reset password link.
This project was created with Yarn and Create React App, so I will left the links and notes to the Yarn docs.
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 the browser.
The page will reload if you make edits.
You will 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent