Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpdevries/synctodo
Progressively Enhanced React To Do List
https://github.com/jpdevries/synctodo
a11y express html5 node postgres progressive-enhancement react redux server-side-rendering
Last synced: 2 months ago
JSON representation
Progressively Enhanced React To Do List
- Host: GitHub
- URL: https://github.com/jpdevries/synctodo
- Owner: jpdevries
- License: mit
- Created: 2016-08-03T23:35:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-09T15:20:07.000Z (over 7 years ago)
- Last Synced: 2024-11-22T01:41:58.073Z (3 months ago)
- Topics: a11y, express, html5, node, postgres, progressive-enhancement, react, redux, server-side-rendering
- Language: JavaScript
- Homepage:
- Size: 145 KB
- Stars: 9
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Sync To Do
========
Progressively Enhanced React To Do List. HTML–first, Node, Express, PostgreSQL.
## Preview
Have a look at the synchronous and asynchronous endpoints in action. [Run the live demo at our Heroku Dino](https://sleepy-anchorage-68739.herokuapp.com).
## What you need
Install the [grunt-cli](http://gruntjs.com/getting-started#installing-the-cli) package if you haven't before. This should be done as a global install:
```bash
npm install -g grunt-cli
```
Make sure you have `grunt` installed by testing:
```bash
grunt --version
```
To interact with the application you'll need to be running PostgreSQL for the database. [Install Postgres](https://www.postgresql.org/download/) if you haven't already. Mac users can [install Postgres via brew](https://www.moncefbelyamani.com/how-to-install-postgresql-on-a-mac-with-homebrew-and-lunchy/).
Create a synctodo database.
```
psql
CREATE DATABASE synctodo;
\q
```
Next import our example data. Data will be imported into a `tasks` table.
```bash
psql synctodo < _build/db/synctodo.sql
```
## Getting Started
First, clone a copy of this git repo by running:
```bash
git clone -b grunt [email protected]:jpdevries/synctodo.git
```
Then cd into the `synctodo` folder and install the Node dependencies:
```bash
cd synctodo
npm install
```
You should now be able to build the files and run the Node server!
```bash
grunt build
npm run serve
```
The server will automatically restart when changes are made. To watch the Sass source files for changes and automatically rebuild the source files, run the `grunt` command:
```bash
grunt #alias for grunt watch
```
By default this project runs on port 1187. To run it on a different port use the `PORT` environmental variable:
```bash
PORT=8081 npm run serve #visit http://localhost:8081 in your browser
```
To use a database with a different name use the `PGDATABASE` environmental variable:
```bash
PGDATABASE=anotherdb npm run serve
```
## Features
- Add, Complete, Archive, and Delete Tasks
- Progressive Enhancement (`.no-js`) support
- Isomorphic HTML layer doubles as a data model for Redux
- Isomorphic server uses the same promises for asynchronous and synchronous requests
- React Routing
- React and Redux used on both server and client side
- REST API prefetches and fetches data to keep UI fresh
- Loads dependencies from CDN with local fallback
- Feature detection to only load scripts if they'll work (IE9+)
### Add New Tasks
Homepage at `/`
Asynchronously posts to `/api/tasks`
### Complete Tasks
Synchronously posts to `/`
Asynchronously posts to `/api/tasks`
### Archive Tasks
Synchronously posts to `/archive`
Asynchronously posts to `/api/tasks`
### Unarchive Tasks
Synchronously posts to `/`
Asynchronously posts to `/api/tasks`
### Delete Tasks
Synchronously posts to `/delete/tasks`
Asynchronously posts to `/api/tasks`
## Database
A simple PostgreSQL database schema is used to store our tasks. See `server.js` for the queries that interact with the database to add, complete, archive, unarchive, and delete tasks.
```sql
CREATE TABLE "tasks" (
id SERIAL PRIMARY KEY,
title varchar(255) NOT NULL DEFAULT '',
completed smallint NOT NULL DEFAULT '0',
archived smallint NOT NULL DEFAULT '0'
);
```
## Accessibility Proclaimer
This component strives for WCAG 2.0 Guidelines Level AA. Please [open an issue](https://github.com/jpdevries/synctodo/issues/new) for any accessibility issue, feedback, or concern.