This project contains a To-Do App created with React, Material UI, and Firestore. Users can register with an email address, and then add and manage their daily tasks in a responsive frontend interface. The app is deployed to Netlify.
Read more about:
Users can:
-
Register/Log In.
- Users can register/log in with their email and password:
-
Manage tasks. Users can manage their to-dos.
- Add a task
- Delete a task
- Update the tasks' text
-
See user-friendly notifications: Upon entering invalid data, users are notified with the help of the modal windows that display further instructions:
- When registration/authorization was unsuccessful
- When an empty task was submitted
-
Install the app on mobile/desktop devices like a native app: When installed, it allows to:
- Use the app, resembling a native-app experience.
- Have an improved user experience
- Experience cross-platform compatibility
- Make use of faster loading times
- Use offline accessibility
- Have a smaller size than a native desktop app
- Access the app quickly via a mobile home screen, a Windows/Mac taskbar, etc
Read more about the benefits that Progressive Web Apps have here
- React
- Material UI
- Responsive design
- Progressive Web Apps (PWA)
- Firebase
- Netlify
- Node v 16
- React.js as a framework
- Material UI for styling and icons
- Firebase for database
- Service worker for enabling PWA functionality
- Netlify for deployment
- To clone the app use the following command:
console git clone [email protected]:yevheniiairapetian/todo-app
Or download directly by clicking on <> Code button > Download ZIP. Make sure you have Node installed on your machine. To check if you have Node installed, run thenode -v
command in the terminal. If Node is not installed, use the preferred package manager:
- For npm on Windows, run the
npm install nodejs
command - For Mac, run the
brew install node
command - For Linux Debian/Ubuntu-based systems run the
sudo apt-get install nodejs
command - For Red Hat/Fedora-based systems run the
sudo yum install nodejs
command
- Then get back to the project folder and use the
cd todo-app
terminal command. Then run thenpm i
command (or similar, depending on the package manager) to install the project dependencies - After that, follow the scripts in the section below*
(*the commands below are listed for npm)
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.
The app is live at gimmetask.com
Feel free to contact me via LinkedIn or email or via the contact information on my portfolio