diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..bdcba58 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,29 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: + - master # or main, depending on your default branch + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 20 + + - name: Install Dependencies + run: npm install + + - name: Build + run: npm run build + + - name: Deploy to GitHub Pages + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./dist # or ./build, depending on your build output directory \ No newline at end of file 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..34eefb2 100644 --- a/package.json +++ b/package.json @@ -72,5 +72,6 @@ }, "eslintConfig": { "extends": "./config/eslint.js" - } + }, + "homepage": "https://.github.io/" }