Takagi

Source code of Takagi, a simple web application build with Flask and Vue.js used to conduct quick and anonymous polls over the internet.

🔥 Takagi was built as an assignment for my university Web-Dev course.

Takagi may lack certain business features because everything was done by me, that includes,
design, architecture, backend, frontend, testing and a lot of DevOps-y stuff in a limited amount of time.

👑 It's alive! Check it out live at takagi.bednarski.dev!

Takagi is CDD (CV Driven Development) in the nutshell!

Below are the features I had the most fun developing.

• Simplified JWT based authentication system for users saving their polls.

• Managed Sentry used for application monitoring and exception tracking.

• CI/CD pipelines for automatic building and deploying on my infrastructure build on top of GitHub Actions.

• Simple End-To-End tests build with the Cypress testing framework run before each frontend deploy by CI/CD system to achieve the best user experience.

• Functional tests for the API service build with PyTest and Requests modules.

• Python 3 (Flask) RESTful API build on top of MongoDB for storing application state.

• Redis based, cluster ready, application-level rate limiting on some of the API service endpoints.

• Monitoring /api/health endpoint with the most valuable performance counters from Redis, hooked up to my Telegraf, InfluxDB and Grafana metric monitoring infrastructure (Cool graphs! 🤓)

• Fully Dockerized development workflow, taking advantage of docker-compose for developing, testing and deployments.

• Beautifully designed SPA frontend build with Vue.js and Vue-Router.

• Valve's Fingerprint.js 2 library used for identifying users to avoid duplicated votes.

• Client-side forms validation build with Vee-Validate used for achieving better user experience.

That's all I can remember... 😉

It's easy to get started with developing Takagi!

This project uses Docker as a development and production deployment tool, so you need It first!

💡 Execute every command in the ./backend directory!

If you only want to run It, you need to:

• Spin up the whole stack as containers, simply type:

  docker-compose up -d

This will spin up all the necessary containers and expose Takagi service API at http://127.0.0.1:5000.

If you want to make changes to the Flask app, you need to:

• Install Python 3.8, then projects requirements.

  pip3 install -r requirements.txt

• Also, It's optionally development requirements.

  pip3 install -r dev-requirements.txt

• After that spin up Redis and MongoDB as containers.

  docker-compose up -d redis mongo

• Run main.py, entry point for Flask app.

  python3 ./main.py

  This will spin up databases, and run Python code with the development server at http://127.0.0.1:5000.

💡 Execute every command in the ./frontend directory!

If you want to make changes to the Vue.js app, you need to:

• Install NPM, then projects requirements.

  npm install

• To then serve a website, simply type:

  npm run serve

This will create a development web server at http://127.0.0.1:8080. And It's a lot simpler!

Takagi has a simple set of functional tests!

This project uses PyTest, PyLint and Cypress as a testing tools, so you need them first!

• To run backend tests, run Takagi API service and in the ./backend directory type:

  pytest .

• To run backend lint, run in the ./backend directory:

  pylint ../backend

• To run Cypress E2E tests, with everything running, open dashboard by typing:

  npm run open

  This will open a dashboard that will let you run all the specs.

You are more than welcome to help me improve Takagi!

Just fork this project from the master branch and submit a Pull Request (PR).
It's probably a good idea to run all the tests beforehand.

This project is licensed under GPL-3.0 .