testmeca / utasks

UTasks is a buggy Todoist clone for practicing testing and test automation

UTasks

UTasks is a Todoist clone, meant for testing purposes, like trying different test automation tools and techniques or just manually test the app instead of relying on some online apps "that may changes over time and make your test automation scripts fails" or "you simply don't have a way to try some advanced test automation techniques, weird scenarios or some test automation best practices"

😉 Features

• A simple feature-rich website but a bit tricky to work with.
• Simple & easy to set up and run in your local machine or deploy it publicly
• A unique identifier data-testid for mostly all of the fields in the app
• Doesn't require a lot of knowledge to set it up "Just a Google Account and Nodejs"
• Created using Create React App as Frontend and Firestore as Backend

🦾 Usage

There are already a public website for this application you can use them or you can make your own one "locally or publicly"

📱 Use a deployed version

• Utasks Main
• Utasks Stage
• Utasks Develop

⚠️ Warning

• If you are using the public websites: your data may get removed from time to time "every 2 to 3 months"
• Each website has its own separate environment, so signup in the Utasks Develop website doesn't make you able to login to the Utasks Main website.

🙄 Setup your own app

To setup you own, check out the Prerequisites,and the Setup

🧰 Prerequisites

• Git
• Nodejs Version 14
  • Preferred to install the nodejs using a Node Version Manager:
    • For Windows users, you can use NVM for Windows
    • For Linux or MacOS users, you can use NVM
• Google Account to able to create a Firebase project

🏗️ Setup

NOTE: You can watch this 8 mins video for the full setup.

• Get the source code in your machine (Using one of the following options):

  • Clone the repo git clone https://github.com/TestMECA/UTasks.git
  • Download the buggy branch or check out to it git checkout buggy
  • Downland the Utasks Buggy V0.3.0
  • (The best option) Fork the repo and clone your fork git clone https://github.com/<your-github-username>/UTasks.git then check out to the buggy branch by running git checkout buggy

• Change the name of the file .env.example to .env

• Install yarn to install all the needed dependencies npm install --global yarn

• Install the needed dependencies yarn install

• Create a Firebase project from the Firebase Console and after that:

  • Add app to register a web application from the Firebase Console and register it with the same name as the project name
  • Open the Authentication tab from the created project in the Firebase Console and add the "username/password" as your sign in method/provider
  • Open the Cloud Firestore/Firestore Database from the created project in the Firebase Console and add create a database

• Run yarn firebase login to login from the CLI to your Firebase Console using the Firebase CLI

• Run yarn firebase use <firebase-project-name> && yarn firebase apps:sdkconfig web --json with <firebase-project-name> is your Project Name you created in Firebase Console

  • Copy the appropriate data from the output of the previous command and add it to the proper place in the utasks-configuration.json.example file
  • Change the name of the file utasks-configuration.json.example to utasks-configuration.json

• Setup the Firestore rules by running the following command yarn firebase deploy --only firestore:rules

🔥 Local setup

• Run the app locally by running the yarn react-scripts start and it will be open in Localhost:5050

🚀 (Optional) Make it online

If you want to make your own app a public website, you need to do the following:

• Add your <firebase-project-name> with the appropriate configuration to the firebase.json file
• Build the app by running yarn react-scripts build
• Run yarn firebase deploy --only hosting:<firebase-project-name> with <firebase-project-name> is your Project Name you created in Firebase Console, and thats it,you will find the website url in the output of the previous command, or you can check it from the Hosting tab from the created project in the Firebase Console.

🙈 Issues

If you encounter any problems, please file an issue along with a detailed description.

🤝 Contributing

Contributions are very welcome ❤️.

🤓 Credits & Resources

• Todoist Clone 😍 by Karl Hadwen
• React Authentication Crash Course With Firebase And Routing 😍 by Web Dev Simplified (YouTube Channel)
• Firebase Documentation
• Firebase 9 Tutorial 😍 by The Net Ninja (YouTube Channel)
• ReactJS Tutorial for Beginners 😍 by Codevolution (YouTube Channel)
• GitHub Actions Documentation

utasks's Issues

Create a buggy app "Utasks"

Add Client performance audits with lighthouse

Fix the manually-triggered-tests work flow

Need to fix the issues of the manually-triggered-test work flow

Nav bar need to be fixed

Utasks - Add quality metrics and measurements to the app

Checking the firebase issues

Utasks - Make it automatically deployed

Utasks - Add unit test for it

Deploy the app

Need to deploy the app

Make the deploy easier

configure the BE using firebase cli

Add a readme documentation

Need to documentation on how to use , install or deploy the app

Creating some CI workflows for testing

Creating some workflow for testing

Routes in the app