yevheniiairapetian / todo-app

A to do app written with React, Material UI, and Firebase. It allows users to manage their tasks. It is deployed to Netlify

Gimme Task App

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:

• Netlify

Project Screenshot

Available features

Users can:

1. Register/Log In.

   • Users can register/log in with their email and password:

2. Manage tasks. Users can manage their to-dos.

   • Add a task
   • Delete a task
   • Update the tasks' text

3. 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

4. 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

Technologies Used

• React
• Material UI
• Responsive design
• Progressive Web Apps (PWA)
• Firebase
• Netlify

Project Dependencies

• 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

Clone and Preview

1. 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 the node -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

2. Then get back to the project folder and use the cd todo-app terminal command. Then run the npm i command (or similar, depending on the package manager) to install the project dependencies
3. After that, follow the scripts in the section below*

(*the commands below are listed for npm)

Available Scripts

In the project directory, you can run:

npm start

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.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

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.

Live Version

The app is live at gimmetask.com

Contact:

Feel free to contact me via LinkedIn or email or via the contact information on my portfolio