trello Svelte Themes

Trello

JAMStack application for NodeJS, using Grown and Svelte.

How it works?

This repository implements a NodeJS API server to communicate with Trello and a web app made with Svelte, the communication from the front-end to the Trello API is only allowed through the back-end API.

The main architecture and tooling is built on top of homegrown utilities of my own.

Requirements

View 1

  • This view must be used to login:
    • Implement any authorization method, the result of the login must return the Trello Token and Key necessary to do requests to Trello's API.

View 2

  • Immediately after login:
    • There must be a dropdown to select the workspace (Organization)
    • Once the workspace is selected, a second dropdown must be enabled to select the board (Boards assigned to the selected workspace)
    • Once a board is selected, a grouped list must be created in the bottom with the list of cards
      • The cards must be grouped by stage
      • If the card contains activities, the activities must be listed (Must be clear to which card the activity belongs)
      • The user must be able to Create/Update cards.
        • To create or update a card, the user must be able to at least fill the following information:
          • Title
          • Description
          • Due Date
          • Assign to multiple members
            • The UI must show the display name of the members not the ID's

Notification

  • If the user deletes a card, send an email notification (Don't include your email credentials in your project).
    • Send the email to any email you want.
    • Implement this step in the back end thru an API call.
    • In the email body add:
      • Type of Object deleted
      • Name / Description of the deleted object
      • User who deleted the object.
Relevant sources

Server side

  • server.js — Our NodeJS application

  • static.json — Settings for the web-server on Heroku

  • Procfile — Custom web: process for running Nginx + NodeJS

  • api/ — Here we setup our API handlers.js and routes.js

    • controllers/ — Use provider.js files to inject dependencies
    • mailings/ — Pug templates and LESS stylesheets for the mailings

E-mail sent by the application can be accesed through the /email endpoint.

Client side

  • app/ — Web app sources, i.e. the main.js is the entry-point
    • components/ — Svelte components on the wild!
    • resources/ — Files found in sprites/ are used as <SvgIcon />
    • shared/ — Utility functions and shared state

I prefer to work with Svelte over React or Vue. It's easy to grasp and helps you get stuff done quickly!

Deployment how-to

Heroku

The following buildpacks are required:

Deployments are done by running git push heroku main

Environment

The following variables are required on the server, e.g.

MAILDEV=YES
TRELLO_API_KEY=XXX

Either export'ed, on a .env file or added through heroku config:add

Development

Execute make in your terminal, it'll setup the dependencies and start the services.

Maildev should be enabled by default since it's just for demo purposes, otherwise you must configure it.

Top categories

Loading Svelte Themes