diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml new file mode 100644 index 0000000..1b47106 --- /dev/null +++ b/.github/workflows/static.yml @@ -0,0 +1,47 @@ +# Simple workflow for deploying static content to GitHub Pages +name: Deploy static content to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["master"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Install Dependencies + run: npm install + - name: Build + run: npm run build + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: './build' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/Procfile b/Procfile deleted file mode 100644 index 1da0cd6..0000000 --- a/Procfile +++ /dev/null @@ -1 +0,0 @@ -web: node index.js diff --git a/README.md b/README.md index ccc0a87..b1c74d5 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,59 @@ - # Offline Kanban -_Kanban board that just works in your browser (even when you have no internet)_ +A browser-based Kanban board that works offline, powered by modern web technologies. [![Build Status](https://travis-ci.org/sarmadsangi/offline-kanban.svg?branch=master)](https://travis-ci.org/sarmadsangi/offline-kanban) -### Getting started -```javascript +## Getting Started + +```bash npm install npm run dev ``` -### Production build -```javascript +## Production Build +```bash npm run build ``` -### Architecture (TODO) +## Deployment + +### GitHub Pages Deployment + +1. Go to your repository settings +2. Navigate to "Pages" in the sidebar +3. Under "Source", select "GitHub Actions" +4. Push your code to the master/main branch + +The site will be automatically built and deployed to `https://.github.io//` -I will be adding a dragram/details to explain architecture properly. Here is the few bullet points of architecture/tech stack, +Note: Make sure your repository is public and GitHub Pages is enabled in your repository settings. -1. View (ReactJS) responds to state changes (Mobx: state management) -2. Most of Kanban board logic (add cards, remove cards, add list, move cards to lists and etc) is in `stores/kanban.js` -3. Everytime state changes (in `KanbanStore`) it auto saves a snapshot of `KanbanBoard` state to `PouchDB (IndexedDB/WebSQL)` -4. All assets (including html) are cached in browser using `AppCache`, `Service Workers` look for any new changes and auto updates the cache / reload the browser (Todo: show a button to refresh). -5. Since `PouchDB` in this case is just storing everything locally the whole thing is available offline. -6. `CSS Modules` to avoid global conflicts and to decipline myself in writing css per component only. -7. `Travis` is used for CI and app is deployed to heroku automatically after CI passes. Check [![Build Status](https://travis-ci.org/sarmadsangi/offline-kanban.svg?branch=master)](https://travis-ci.org/sarmadsangi/offline-kanban) +## Architecture +- **Frontend**: React.js with CSS Modules for component-scoped styling +- **State Management**: MobX for predictable state updates +- **Offline Storage**: PouchDB (IndexedDB/WebSQL) for persistent local storage +- **Offline Capability**: Service Workers and AppCache for offline asset serving +- **Continuous Integration**: Travis CI with automated Heroku deployment -### TODOS +### Key Features -1. Make it mobile friendly (components/controls specific to mobile) -2. Abstract store -3. Create decorators or contains for drag and drop operations -4. Improve sorting (it breaks from time to time) -5. Move from Card and List into either parent level container or store -6. Rename functions/variables to be more readible -7. Performance optimisations (too many filtering here and there) +- Fully functional offline-first architecture +- Real-time state persistence +- Drag-and-drop card management +- Automatic state synchronization +- Component-isolated styling + +## Roadmap + +1. Mobile-responsive design optimization +2. Store architecture refactoring +3. Drag-and-drop operation improvements +4. Performance optimizations +5. Enhanced sorting algorithm implementation + +## Development Status + +[![Build Status](https://travis-ci.org/sarmadsangi/offline-kanban.svg?branch=master)](https://travis-ci.org/sarmadsangi/offline-kanban) diff --git a/package.json b/package.json index 4845369..b33f45c 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.0.1", "private": true, "main": "index.js", + "homepage": "https://sarmadsangi.github.io/offline-kanban", "devDependencies": { "babel-core": "6.14.0", "babel-eslint": "6.1.2",