Best Flask open-source libraries and packages

Focustudy

Enterprise Solution Development project (Vue CLI-flask-docker-MySQL)
Updated 2 years ago

👋 IS213 - G2T1 - Focustudy


👨‍🎓 Group Members

Name Email ID
Gnanasekaran Sanchana sanchanag.2020
Koh Hui Qing huiqing.koh.2020
Lim Wei Jie weijie.lim.2020
Ricky Goh Rui Yu ricky.goh.2020
Sophia Chow Hui Ru sophia.chow.2020

🤓 Project Overview

What is the problem?

It’s getting harder and harder to focus. With everything going digital, the amount of time spent on our various devices has increased exponentially. The sheer amount of content exhausts our attention and leads to a decreased attention span. And studying is no exception


How do we solve it?

Introducing Focustudy, where we aim to create an environment where students can configure their studying essentials - study timer, to-dos, music. It will all be available in one application, allowing them to remain focused as they work.




💻 How to Install Our Web Application

  • This method is applicable to both Mac OS and Windows OS

Firstly, clone this repository into your local environment.

  1. On the '<> Code' page, click on the green 'Code' button and a dropdown will appear.
  2. Make sure you're under the 'HTTPS' tab, and copy the URL.

image


Next , open Visual Studio Code.

  1. Change the current working directory to any location where you want the cloned repository to be - use command cd to navigate.
  2. Type git clone, and then paste the URL you copied earlier.

image

  1. Press Enter to clone into your local machine.

  2. After cloning, change directory into the local repository.

image

  • Note that Focustudy is the root folder, containing the main sub-folders - backend and frontend.

Next, start WAMP/MAMP and import the .sql files from Focustudy/backend/sql into localhost/phpmyadmin.

  • The files are located here:

image

  1. On the localhost/phpmyadmin page, click on the 'Import' button and a 'Choose File' button will appear. Select a file and click 'Go'.

  2. Make sure to import all 3 .sql files.

image

  1. Upon successful import, you should see an output similar to the one as seen in the picture below.

image


Next, install the node modules used in this repository

  • Note that the screens below may defer from yours.
  1. Change directory into the frontend folder.
  2. Type npm install or npm i for short to install all the node modules used in the front-end folder.

image




🏃 You are done with the set-up! Now lets run our application on your localhost.

  • Note that the screens below may defer from yours.

First, run the docker compose file from the backend folder.

  1. Go to Focusstudy/backend/docker-compose.yml.

image

  1. Ctrl + F and input 'esdg2t1'. Replace all with your docker id.
If you are using MAMP:
  1. Go to Focustudy/backend/docker-compose.yml.
  2. Replace the following lines with the code below:
  • Line 20
      dbURL: mysql+mysqlconnector://root:root@host.docker.internal:3306/timer
  • Line 34
      dbURL: mysql+mysqlconnector://root:root@host.docker.internal:3306/rating
  • Line 129
      dbURL: mysql+mysqlconnector://root:root@host.docker.internal:3306/tasklist

  1. Change directory into the backend folder.
  2. Type docker-compose up -d to build and run all the images in the backend folder.

image

  • You should see the following output in the Visual Studio Code terminal:


Next, run the frontend of Focustudy from the frontend folder.

  • Note that the screens below may differ from yours.
  1. Change directory to the frontend folder.
  2. Type npm run serve to run the frontend.
  3. Ctrl + Click or manually go to http://localhost:8000 to see our app!

image




📖 How To Use Focustudy

Welcome to Focustudy. Login with Google to start focusing!

  • Use the following account that we have prepared just for you! The account comes with database records already in place.

    Email esdg2t1@gmail.com
    Password dockerisfun1!

image


Upon successful login, you will be brought to Focustudy's home page.

image

  1. Start a study session.

image

  1. Upon completing a study session, you will be prompted to rate it.

image

image

  1. View, add and delete tasks in your to-do list.

image

  1. Play music from Spotify.

image


Interested in your past study sessions?

  • Press the "History" button located at the top right of the home page.

image

  • You will be brought to the history page where you will be able to view all your past study sessions sessions.

image


We are sad to see you go!

  • Log out by clicking on the exit button at the top right corner of the home page.

image




🐰 AMQP Testing

Import the Postman collection

  • Open Postman and import Focustudy/backend/AMQP Tests.postman_collection.json.

image

image


Testing Error and Activity Log microservices

  • Requests have been prepared for you to simulate errors and activity in Record Session and Display Sessions microservices. Messages will be printed in the console.

image