https://github.com/ethercreative/tasks-task
https://github.com/ethercreative/tasks-task
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/ethercreative/tasks-task
- Owner: ethercreative
- Created: 2021-02-26T18:19:50.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-03-01T14:14:19.000Z (about 5 years ago)
- Last Synced: 2025-02-22T12:34:09.320Z (about 1 year ago)
- Language: JavaScript
- Size: 363 KB
- Stars: 1
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tasks Task
A test to see if you can code.
Requires [Docker](https://docker.com) and [Node](https://nodejs.org).
## Goal
Add due dates to tasks.
### Steps
Here's a rough guide for what you need to do:
- [ ] Add a due date column to the `tasks` table. This should be non-destructive, so
don't drop the table.
- [ ] Add a date picker (any will do, as long as it fits the look of the app) to the
task input according to the design.
- [ ] Display due dates on tasks as per the design, and have it change appearance
depending on whether it is upcoming, due soon, or late.
- [ ] Sort active tasks by due date, then date created.
## Setup
### API
In the `api` directory:
1. Copy `.env.example` into `.env`
1. Install node modules `$ yarn install`
1. Start docker containers `$ docker-compose up -d`
1. Migrate the schema `$ make migrate`
### Web
In the `web` directory:
1. Install node modules `$ yarn install`
1. Start development server `$ yarn start`
## Useful Links
- Adminer: https://localhost:5002/
- GraphiQL: http://localhost:5001/graphiql
- Web UI: http://localhost:3000/
## Design
#### Main
#### Compose Task
## Resources
### Colours
- #FF6B5E - Overdue
- #5BD8D6 - Due Soon
- #B59BFF - Upcoming / Button
- #6F57B4 - Icon
### Assets
Calendar Icon
```svg
```
### Sizes
- Calendar border radius: `10px`
- Calendar button padding: `12px`
- Due date size: `14px`
### SASS
This project uses SASS (but we also use LESS on older projects). This project
uses a helper function `size()` to convert `px` to `rem`.
### Postgraphile
The project uses a GraphQL API, automatically generated based of the DB schema by [Postgraphile](https://www.graphile.org/postgraphile/). If you want to update the API, make a change to the `schema/public.sql` file and migrate it (`make migrate`).