Giter Club home page Giter Club logo

pomodoro-timer's Introduction

Pomodoro-Timer | Toto Tomato Timer

A pomodoro-timer webapp based on symfony 6. | This project is work in progress

This Webapp is meant as a scholar project to learn the Symfony (v6) php frameworks as well as the Pomodoro-Technique Timer It uses Symfony with Twig for the backend and templating parts, Webpack/Encore as packagemanager for Assets, Stimulus and Turbo-UX for the Javascript driven parts

Installing / Getting started

Requirements

Docker / Docker Compose : You may use the provided docker-compose.*.yml files for plain docker environments. They are as they are provided by the symfony project, neither edited nor tested so far

DDEV (recommended) : "DDEV is an open source tool that makes it dead simple to get local PHP development environments up and running within minutes." DDEV is based on docker and yields most of the tools needed to develop this app such as php, node, npm, nvm, yarn and much more. For further Information on setting up DDEV, please consult the DDEV documentation as a starting point for both Docker installationa and the DDEV install process.

Setup

If you setup docker, docker-compose and ddev properly for your environment / OS you are ready to go: Make sure to read the section [Initial Configuration](#Inititial Configuration) first

mkdir /your/projects-root/my-pomodoro-timer
cd /your/projects-root/my-pomodoro-timer
git clone https://github.com/thorsten-weber/pomodoro-timer.git ./

This will setup a project folder as you like, make sure to replace the path accordingly to your needs. Change your working path to the former created directory And clone the source code to this directory,

After cloning the repo finished you are ready to run the app YOu may or may not want to change the .ddev/config.yaml, The checked out version will setup your environment with php 8.1 and MySQL Database For details on changes to this file, refer to the config documentation of DDEV

You may want to change the project-name (i.e. in case of conflicts). You can use ddev config and follow the instructions. You must leave the later 2 options as they are, and just set a new name for your project.

ddev start
ddev composer install
ddev yarn install 
ddev php bin/console doctrine:migrations:migrate
ddev yarn dev
ddev launch 

The command chain above will

  • start the ddev environmnet (and in the very first run setup the environment for the project)
  • install the needed libs and dependecies for the php parts of the app
  • install the node_modules for the app
  • Setup the database tables as needed by symfony entities
  • build the assets for frondend rendering (css, js etc.), by ommiting the dev flag/ argument, production ready assets will be build
  • launch the app into your browser

Initial Configuration

Projects initial configuration env-variables : You will need to create a local .env file named .env.local. This is mandatory to get the db connection set up correctly and to make sure you are able to call the sound via the freesound API.

# Override database
DATABASE_URL="mysql://db:db@ddev-<PROJECT_NAME>-db.ddev-pomodoro_default:3306/db?serverVersion=8.0&charset=utf8mb4"

FREESOUND_CLIENT_KEY="YOUR_API_KEY"
FRESSOUND_CLIENT_ID="YOUR_API_ID"

Developing

To start developing on this, setup this project as shown in Installation / Getting started start it as described, now run

ddev yarn watch

This will start the webpack / encore watcher process. This will rbuild assets, CSS and JS as soon as changes in files are saved For now you need to reload the app / browser on your own, to make built changes visible. Changes on the php backend code will take effect imediately after saving the file and relaoding the app

Contributing

If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

Make sure your IDE / Editor knows Editorconfig For the php Code use PSR-12 In the JavaScript files try to keep the already existing Style, changes may be discussed. Linting may be introduced as a result of these discussions

Links

Licensing

"The code in this project is licensed under MIT license." See also License.md

pomodoro-timer's People

Contributors

thorsten-weber avatar

Watchers

James Cloos avatar  avatar

pomodoro-timer's Issues

Make up Sound Information container in view / template

Make up the rendering for the sound-information.
This container should look more styled.
This container should show respect for the sound creator with mention, copyright and license information and links to the creator page

Setup View to render pomodoro settings in a modal

Render the New/ Edit / Delete view in a modal, instead of rendering into the <turbo-frame>
Just render the Show view into <turbo-frame> as a view onto the current settings
Therefore implement a proper modal container in templates and app.css with Bootstrap5

Render tasks Edit / New / Delete -View in a modal

Render the New/ Edit / Delete view in a modal, instead of rendering into the <turbo-frame> directives for turbo-ux
Just render the Show view into <turbo-frame> as a view onto the current settings
Therefore implement a proper modal container in templates and app.css with Bootstrap5

Write Documentation / Readme.md

Edit and extend Readme.md to make sure following sections are included

  • Getting started
  • Installation / Prerequisites
  • Usage
  • Local Development
  • Contribution

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.