Merge pull request #27 from TestMECA/testing

Add documentation

.env.example

@@ -0,0 +1,5 @@
+PORT=5050
+REACT_APP_TITLE=UTesks
+REACT_APP_BUILD_TARGET=UTasks Todoist Clone
+REACT_APP_NAME=UTasks
+REACT_APP_VERSION=0.3.0

README.md

@@ -1,72 +1,99 @@
-# UTasks
+[![Website Deployed](https://github.com/TestMECA/UTasks/actions/workflows/firebase-hosting-merge.yml/badge.svg)](https://github.com/TestMECA/UTasks/actions/workflows/firebase-hosting-merge.yml) [![Code Quality](https://github.com/TestMECA/UTasks/actions/workflows/code-quality-pipline.yaml/badge.svg)](https://github.com/TestMECA/UTasks/actions/workflows/code-quality-pipline.yaml) [![codecov](https://codecov.io/gh/TestMECA/UTasks/branch/main/graph/badge.svg?token=3K0C6K2F0U)](https://codecov.io/gh/TestMECA/UTasks)
+
+![GitHub Release Date](https://img.shields.io/github/release-date/TestMECA/UTasks?style=for-the-badge) ![GitHub package.json version](https://img.shields.io/github/package-json/v/TestMECA/UTasks?style=for-the-badge) ![GitHub repo size](https://img.shields.io/github/repo-size/TestMECA/UTasks?style=for-the-badge) ![GitHub last commit](https://img.shields.io/github/last-commit/TestMECA/UTasks?style=for-the-badge) [![GitHub license](https://img.shields.io/github/license/TestMECA/UTasks?style=for-the-badge)](https://github.com/TestMECA/UTasks/blob/main/LICENSE) ![GitHub all releases](https://img.shields.io/github/downloads/TestMECA/UTasks/total?style=for-the-badge) [![GitHub stars](https://img.shields.io/github/stars/TestMECA/UTasks?style=for-the-badge)](https://github.com/TestMECA/UTasks/stargazers) [![GitHub forks](https://img.shields.io/github/forks/TestMECA/UTasks?style=for-the-badge)](https://github.com/MohamedRaslan/pytest-qatouch/network) [![GitHub issues](https://img.shields.io/github/issues/TestMECA/UTasks?style=for-the-badge)](https://github.com/MohamedRaslan/pytest-qatouch/issues)
 
-UTasks is a Todoist clone
+# UTasks
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+UTasks is a **[Todoist](https://todoist.com/)** 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"
 
-## Available Scripts
+## :wink: Features
 
-In the project directory, you can run:
+- 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 under 10 mins
+- Doesn't require a lot of knowledge to set it up "Just a **[Google Account](https://accounts.google.com/signup/)** and **[Nodejs](https://nodejs.org/en/)**"
+- Created using **[Create React App](https://create-react-app.dev/)** as **Frontend** and **[Firestore](https://firebase.google.com/docs/firestore)** as **Backend**
 
-### `yarn start`
+## :mechanical_arm: Usage
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+There are already a public website for this application you can use them or you can make your own one "locally or publicly"
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+#### :iphone: Use a deployed version
 
-### `yarn test`
+- **[Utasks Main](https://utasks-main.web.app/)**
+- **[Utasks Stage](https://utasks-stage.web.app/)**
+- **[Utasks Develop](https://utasks-develop.web.app/)**
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+> :warning: **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](https://utasks-develop.web.app/) website doesn't make you able to login to the [Utasks Main](https://utasks-main.web.app/) website.
 
-### `yarn build`
+#### :roll_eyes: Setup your own app
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+To setup you own, check out the **[Prerequisites](#Prerequisites)**,and the **[Setup](#Setup)**
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+## :toolbox: Prerequisites
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+- **[Git](https://git-scm.com/)**
+- **[Nodejs](https://nodejs.org/en/)** **`Version 14`**
+  - Preferred to install the nodejs using a Node Version Manager:
+    - For **Windows** users, you can use **[NVM for Windows](https://github.com/coreybutler/nvm-windows)**
+    - For **Linux or MacOS** users, you can use **[NVM](https://github.com/nvm-sh/nvm)**
+- **[Google Account](https://accounts.google.com/signup/)** to able to create a **[Firebase](https://firebase.google.com/)** project
 
-### `yarn eject`
+## :building_construction: Setup
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+> **_NOTE:_** You can watch this 10 mins video **[Setup Utasks](https://www.youtube.com/)** for the full setup.
 
-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.
+- Get the source code in your machine (Using one of the following options):
 
-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.
+  - 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](https://github.com/TestMECA/UTasks/releases/tag/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`**
 
-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.
+- Change the name of the file **[.env.example](https://github.com/TestMECA/UTasks/blob/main/.env.example)** to `.env`
+- Install **[yarn](https://yarnpkg.com/)** to install all the needed dependencies **`npm install --global yarn`**
+- Install the needed dependencies **`yarn install`**
+- Create a Firebase project from the **[Firebase Console](https://console.firebase.google.com/)** and after that:
 
-## Learn More
+  - Add app to register a web application from the **[Firebase Console](https://console.firebase.google.com/)** and register it with the same name as the project name
+  - Open the **Authentication** tab from the created project in the **[Firebase Console](https://console.firebase.google.com/)** 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](https://console.firebase.google.com/)** and add create a database
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+- Run **`yarn firebase login`** to login from the CLI to your **[Firebase Console](https://console.firebase.google.com/)** using the **[Firebase CLI](https://firebase.google.com/docs/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](https://console.firebase.google.com/)**
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+  - Copy the appropriate data from the output of the previous command and add it to the proper place in the **[utasks-configuration.json.example](https://github.com/TestMECA/UTasks/blob/main/src/utasks-configuration.json.example)** file
+  - Change the name of the file **[utasks-configuration.json.example](https://github.com/TestMECA/UTasks/blob/main/src/utasks-configuration.json.example)** to `utasks-configuration.json`
 
-### Code Splitting
+- Setup the Firestore rules by running the following command **`yarn firebase deploy --only firestore:rules`**
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+#### :fire: Local setup
 
-### Analyzing the Bundle Size
+- Run the app locally by running the **`yarn react-scripts start`** and it will be open in **[Localhost:5050](http://localhost:5050)** :
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+#### :rocket: (Optional) Make it online
 
-### Making a Progressive Web App
+If you want to make your own app a public website, you need to do the following:
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+- Add your **`<firebase-project-name>`** with the appropriate configuration to the **[firebase.json](https://github.com/TestMECA/UTasks/blob/main/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](https://console.firebase.google.com/)**, 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](https://console.firebase.google.com/)**.
 
-### Advanced Configuration
+## :see_no_evil: Issues
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+If you encounter any problems, please **[file an issue](https://github.com/TestMECA/UTasks/issues)** along with a detailed description.
 
-### Deployment
+## :handshake: Contributing
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+Contributions are very welcome :heart:.
 
-### `yarn build` fails to minify
+## :nerd_face: Credits & Resources
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+- **[Todoist Clone :heart_eyes:](https://www.youtube.com/watch?v=hT3j87FMR6M)** by **[Karl Hadwen](https://www.youtube.com/c/cognitivesurge)**
+- **[React Authentication Crash Course With Firebase And Routing :heart_eyes:](https://youtu.be/PKwu15ldZ7k)** by **[Web Dev Simplified (YouTube Channel)](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw)**
+- **[Firebase Documentation](https://firebase.google.com/docs)**
+- **[Firebase 9 Tutorial :heart_eyes:](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jERUGvbudErNCeSZHWUVlb)** by **[The Net Ninja (YouTube Channel)](https://www.youtube.com/c/TheNetNinja)**
+- **[ReactJS Tutorial for Beginners :heart_eyes:](https://www.youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3)** by **[Codevolution (YouTube Channel)](https://www.youtube.com/c/Codevolution)**
+- **[GitHub Actions Documentation](https://docs.github.com/en/actions)**

jsconfig.json

@@ -1,5 +1,5 @@
-{
-    "compilerOptions": {
-        "baseUrl": "."
-    }
+{
+    "compilerOptions": {
+        "baseUrl": "."
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "utasks",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "UTasks is a buggy Todoist clone",
   "repository": {
     "type": "git",
@@ -40,10 +40,12 @@
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,scss,md}": [
-      "prettier --write",
+      "prettier --write"
+    ],
+    "src/**/*.{js,jsx,ts,tsx,json}": [
       "yarn ci:code:lint"
     ],
-    "cypress/**/*.{js,jsx,ts,tsx,json,scss,md}": [
+    "cypress/**/*.{js,jsx,ts,tsx,json}": [
       "prettier --write",
       "yarn ci:cy:lint"
     ]

src/components/Tasks.js

@@ -1,49 +1,49 @@
-import React, { useEffect } from 'react';
-import { Checkbox } from './Checkbox';
-import { AddTask } from './AddTask';
-import { useTasks } from '../hooks';
-import { collatedTasks } from '../constants';
-import { getTitle, getCollatedTitle, collatedTasksExist } from '../helpers';
-import { useSelectedProjectValue, useProjectsValue } from '../context';
-
-export const Tasks = () => {
-    const { selectedProject } = useSelectedProjectValue();
-    const { projects } = useProjectsValue();
-    const { tasks } = useTasks(selectedProject);
-
-    let projectName = '';
-
-    if (collatedTasksExist(selectedProject) && selectedProject) {
-        projectName = getCollatedTitle(collatedTasks, selectedProject).name;
-    }
-
-    if (
-        projects &&
-        projects.length > 0 &&
-        selectedProject &&
-        !collatedTasksExist(selectedProject)
-    ) {
-        projectName = getTitle(projects, selectedProject).name;
-    }
-
-    useEffect(() => {
-        document.title = `${projectName}: Todoist`;
-    });
-
-    return (
-        <div className="tasks" data-testid="tasks">
-            <h2 data-testid="project-name">{projectName}</h2>
-
-            <ul className="tasks__list">
-                {tasks.map((task) => (
-                    <li key={`${task.id}`}>
-                        <Checkbox id={task.id} taskDesc={task.task} />
-                        <span>{task.task}</span>
-                    </li>
-                ))}
-            </ul>
-
-            <AddTask />
-        </div>
-    );
-};
+import React, { useEffect } from 'react';
+import { Checkbox } from './Checkbox';
+import { AddTask } from './AddTask';
+import { useTasks } from '../hooks';
+import { collatedTasks } from '../constants';
+import { getTitle, getCollatedTitle, collatedTasksExist } from '../helpers';
+import { useSelectedProjectValue, useProjectsValue } from '../context';
+
+export const Tasks = () => {
+    const { selectedProject } = useSelectedProjectValue();
+    const { projects } = useProjectsValue();
+    const { tasks } = useTasks(selectedProject);
+
+    let projectName = '';
+
+    if (collatedTasksExist(selectedProject) && selectedProject) {
+        projectName = getCollatedTitle(collatedTasks, selectedProject).name;
+    }
+
+    if (
+        projects &&
+        projects.length > 0 &&
+        selectedProject &&
+        !collatedTasksExist(selectedProject)
+    ) {
+        projectName = getTitle(projects, selectedProject).name;
+    }
+
+    useEffect(() => {
+        document.title = `${projectName}: Todoist`;
+    });
+
+    return (
+        <div className="tasks" data-testid="tasks">
+            <h2 data-testid="project-name">{projectName}</h2>
+
+            <ul className="tasks__list">
+                {tasks.map((task) => (
+                    <li key={`${task.id}`}>
+                        <Checkbox id={task.id} taskDesc={task.task} />
+                        <span>{task.task}</span>
+                    </li>
+                ))}
+            </ul>
+
+            <AddTask />
+        </div>
+    );
+};

src/components/layout/Content.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import { Sidebar } from './Sidebar';
-import { Tasks } from '../Tasks';
-
-export const Content = () => (
-    <section className="content">
-        <Sidebar />
-        <Tasks />
-    </section>
-);
+import React from 'react';
+import { Sidebar } from './Sidebar';
+import { Tasks } from '../Tasks';
+
+export const Content = () => (
+    <section className="content">
+        <Sidebar />
+        <Tasks />
+    </section>
+);