This is the codebase for edutask, a simple web-based application where users can sign up, add YouTube videos to a watchlist, and associate these videos with todo lists in order to keep track of educational material. The application consists of a database using MongoDB, a server using Flask, and a graphical user interface using React. You can find more information in the specification.
Please keep the following in mind:
- The system contains intended flaws, which are to be identified applying test techniques.
- The system is a work-in-progress, meaning that some functionalities are not yet implemented. Focus on the functionalities that already exist, everything else can be disregarded for now.
There are two ways to get the system running: either you run the dockerized version, in which Docker will take care of all setup, or you start all three components locally yourself.
Your system must have Docker enabled. The following steps need to be performed in order to start the system:
- Make sure that Docker (e.g., DockerDesktop on Windows) is currently running.
- Navigate a console (with admin rights) to the root folder of the repository and run
docker-compose up.
This will setup a network with three separate containers, one for each component.
You can then access the system via a browser at http://localhost:3000.
You can specify the output port by changing the PORT_FRONTEND environment variable in the .env file.
Setting the system up locally requires you to handle all three components yourself, but gives you the option to only run parts of the system.
Make sure to have the following software available on your system to run this application:
- MongoDB for the database
- Python and pip for the backend server
- nodejs for the React.js-based frontend
Once this software is installed, perform the following steps before running the system for the first time:
- In the root folder of this repository, create the folder
data\db. This will be the directory for the content of the MongoDB database. - In the folder backend run the following command to install all relevant python packages:
pip install -r requirements.pip. - in the folder frontend run the following command to install all relevant node packages
npm install --dev.
Once all software and libraries are installed, you can start the system by performing the following steps:
- Navigate a shell to the root folder of this repository and run the following command (you might need admin rights for this) to start the database:
mongod --port 27017 --dbpath data\db. - Navigate a different shell to the folder backend and run the following command to start the server:
python ./main.py. - Navigate a third shell into the folder frontend and run the following commend to start the user interface:
npm start.
Now a browser window should open and display the frontend of the system at http://localhost:3000.
You can specify the port of the frontend by changing the PORT environment variable in the frontend/.env file.
When changing the port of the frontend and before executing Cypress, ensure to update the url specified as baseUrl in frontend/cypress.config.js.
You can specify the port of the backend by changing the PORT environment variable in the backend/.env file.
When changing the port of the backend, make sure to also update the REACT_APP_BACKEND_PORT environment variable in the frontend/.env file such that the frontend can still communicate with the backend.
You can interact with the system in different ways. Here are a few to explore the components of the system:
- To interact with the database directly, you can use the MongoDB Compass: while the database is running, connect to it via the compass interface using the connection string
mongodb://localhost:27017. You can now see and manipulate all data in the database manually. Alternatively, you can use the MongoDB Shell. - To interact with the backend directly, you can use a service like Postman: while the database and server are running, create a new collection in the Postman GUI and add requests. Select a HTTP method and an URL, for example GET http://localhost:5000/users/all. You can find all available API endpoints in the backend/src/blueprints folder or by inspecting the console in which you started the server where all API endpoints are printed in the beginning. Try for example PST http://localhost:5000/populate to populate the database with an initial user and some tasks. Alternatively to Postman, you can use any browser to interact with the API of the server directly at http://localhost:5000. Interaction between the browser and the server is, however, limited to GET requests.
- To interact with the frontend directly, simply use the browser which is opened when running
npm start. You can access the frontend at http://localhost:3000 (or the port that you specified).
The following issues are known and may require attention:
- The system was built using nodejs 17, which has a known compatability issue due to its upgrade to OpenSSL3. Check the version of node that you are using and adapt accordingly:
- v17.0.0 and beyond: in frontend/package.json, the "start" script needs to contain the flag --openssl-legacy-provider
- before v17.0.0: remove the --openssl-legacy-provider flag from the "start" script
- When starting the MongoDB with
mongod, make sure to use the path separators appropriate on your operating system. - When using Fedora as your Linux distribution and encountering issues installing mongoDB (student solution):
- From https://www.mongodb.com/try/download/community, select RedHat / CentOS 8.0 as platform and download the .rpm file
- Go to downloads and execute
sudo dnf install <rpm file> - Execute
sudo systemctl enable mongod, thensudo systemctl start mongod - Delete the file in /tmp which causes errors when tryng to start a new mongodb instance in a dir with
sudo rm /tmp/mongodb-27017.sockin the terminal - Then you can finally start up the database in the data/db directory
- In case port 5000 (default for the flask backend) or 3000 (default for the React.js frontend) are currently in use on your system, set them either locally in the
.envfiles of the respective directories (if you run the system locally) or centrally in the.envfile in the root directory (if you run the system dockerized).
The backend service was derived from Marcos Vinícius project todo-list-python, which is licenced under Apache-2.0. For all other additional content, Copyright © 2023 by Julian Frattini. This work (source code) is available under MIT license.