nearform/titus

Deploy useful features in sprint one

 

PLEASE NOTE

Titus has been sunsetted and now exists for reference. It is no longer updated as of July 2022. Thanks for all the support.

 

 

🚀 A rocket powered jet pack super charged starter kit. 🛠️

From 0 to react front-end, fastify-backend, authentication, with tests, and cloud-ready in about an hour.

---

 

Workflow Name	Badge
Frontend CI
Frontend Deploy
Backend Deploy
DB Manager Deploy
Storybook Deploy

Titus is a production grade, end-to-end stack for modern web application development. It includes DevOps and authentication preconfigured. Titus is a reusable set of packages that deploys your application with minimum effort.

• To get the full picture, view our Documentation

titus's Issues

Allow the Navigation component to render a custom component in the top/right corner

This would be the place where to put the UserProfile component

Titus kitchen sink demo app comment feature not working

From pathfinders created by danakim : nearform/pathfinders#267

Description

Out of all the features showcased by the 'kitchen sink' demo app based on the Titus framework deployed at https://titus.nearform.com, the commenting features does not work: https://titus.nearform.com/comments

That's because it tries to open a websocket connection, but it fails with a 'unauth' error. From the console log:

Uncaught (in promise) Error: Connection requires authentication at new o (client.js:1) at i._onMessage (client.js:1) at WebSocket.l.onmessage (client.js:1)

Change CLI to use zipped releases rather than git

Add tests for titus-components

Login Page

• Remove required tag from input fields to prevent flashing html5 default required box
• Prevent always redirecting to login on page refresh
• Add Yup schema validation and use for login form validation

Typings

• Investigate if there is a way to generate a Typescript / Flow typedefs automatically with low maintenance overhead

or

• Investigate adding typing support via comments / JSDoc comments

Implement a GraphQL solution on the frontend

Comments Server

• Add authentication token for comments server to use in front end
• Handle errors gracefully if server is not available, current behavior it crashes

Integrate Commentami (Hapi Plugin)

https://github.com/nearform/commentami

Auth0 Identity Example

Blog post

Write a blog post for nearform.com discussing Titus. Speak to @dberesford for further information on what to cover.

Titus kitchen sink demo app refresh issue

From pathfinders created by danakim : nearform/pathfinders#266

Description

The 'kitchen sink' demo based on the Titus framework, deployed at https://titus.nearform.com has an issue with page refreshes:

Every time a refresh / reload action is triggered from the user's browser, the page returns a 404. That's because the various demo URLs (example: https://titus.nearform.com/autocomplete) do not have any correspondent on the file system so that the Nginx web server can look for and serve. It is controlled by the React app.

NPM modules

Some of the packages need publishing, eg

@nearform/titus-components
@nearform/titus-cli

Not sure starter or kitchen-sink need a module. I see those being packaged up potentially and cloned using something like...

titus starter my-folder
titus kitchen-sink [folder]

Add greenkeeper to manage dependency updates

ESLint

Leverage create-react-app eslint config because of it's non-opinionated code format linting. All code formatting can be deferred and handled through prettier.

Format all files through prettier

Check Titus Components haven't lost composability

Evaluate all components in titus-components to ensure they don't lose composability. Avoid any wrapping of the component where the parent component acts solely as a passthrough for props

Validate that File Upload actually works in Live

Take advantage of react-apollo components to avoid duplicate logic implemented in Redux

Currently all requests to the graphql endpoint are handled in a redux thunk. Since react-apollo is already integrated, we can take advantage of the components they provide out of the box to make these requests.

SPIKE - Agile project management functionality

Investigate the ability to add integrated agile management functionality similar to Trello.

Deliverables:

• Documentation of suggested solution, pros & cons and possible alternatives
• Small example of possible solution

Redux

After completing #105 #108,

• Investigate what features would still require redux
• If not needed, remove redux
• If redux is removed, either document or have a way to add it back easily if needed

Remove demo data from backend

Currently the backend has demo schema, data and routes. Would be good to isolate this in a demo folder and only install via a script

Create a UserProfile component

This component would display the user avatar in a dropdown style button.
On click it could display additional data and the option to Logout

Authentication

• Hoist authentication logic into a module / class
• Make authentication instance available in a React Context

Make Trail migration a command that can be run by titus

I think we should update the trail project so that it exposes a migration command https://github.com/nearform/trail/tree/master/packages/trail-core/database .

I've done it for commentami nearform/commentami@c2fbeb5 and it should be similar for trail.

After that we would need to run that command in our npm run migrate https://github.com/nearform/titus/pull/74/files#diff-6f5e4d666e1d265669b467be68546e92R9 instead of having our own duplication of the trail sql migration.

Resolve devops issues with titus.nearform.com

titus.nearform.com runs the titus kitchen sink on kubernetes.
There are still some niggly issues with this:

• hit refresh on any page and you get a 404
• commentami not fully working

It also requires a lot more testing.

Reporting Journey

Investigate functionality that would allow an end user to generate a report based on a set of criteria they choose themselves.

Deliverables:

• Documentation of suggested solution, pros & cons and possible alternatives
• Small example of possible solution

Create zipped releases

At the moment the cli clones the entire git repo and then copies folders. It would be better to create a zipped release/archive that could be pulled down.

Add Drag & Drop Journey

Investigate drag and drop functionality for arbitrary DOM elements and drag & drop upload functionality for both files & folders.

Deliverables:

• Documentation of suggested solution, pros & cons and possible alternatives
• Small example of possible solution

SPIKE - Tree Graph Visualisations

Investigate & document the ability to add tree graph visualisation functionality.

Deliverables:

• Documentation of suggested solution, pros & cons and possible alternatives
• Small example of possible solution

Code review

• needs a big ol' code review, generate a list of improvements from this

Backend starter

Integrate Udaru

https://github.com/nearform/udaru

Documentation plan

Titus needs a huge amount of documentation. The purpose of this task is to come up with a general documentation site structure. Using docsify and hosting on gh pages would be the frontrunner here, like what we do with Udaru (https://nearform.github.io/udaru/#/)

Clone backend via CLI

Add tests for titus-kitchen-sink

Add form validation example

Clone kitchen-sink via CLI

Flatten folder structure

Flatten folder structure as much as possible, avoid deeply nested folders

Upgrade to material-ui 3.0

https://github.com/mui-org/material-ui/releases/tag/v3.0.0

Wizard Component

Create a wizard component that will allow user to complete several steps

Graphql queries

• Load graphql queries using .graphql file extension. This is built-in to create-react-app 2.0, which is not released yet. In the meantime, it would be possible to load the file manually by specifying the webpack loader in the import statement
• Prefer graphql fragments over graphql queries

Add support for hapi 16 to commentami and notificami

• nearform/notificami#25

• nearform/commentami#89

i18n support

Investigate supporting i18n out of the box. This recommended by @ShaunBaker https://react.i18next.com/

Theme selector and one custom theme

Titus will form the shell of a new project using material ui. From there it is expected that the material theme will be customised to conform to the customers brand/design system (or in some cases fully replaced).
To help with customising material, let's provide a sample theme with Titus (possibly the new nearForm branding theme), and functionality in the kitchen sink application that will allow for easy switching of themes.

Fake authentication

A component to wrap most of the app. Create some fake auth data and if missing show a dummy login page.

Route Splitting

To get the initial bundle size down, we can split based on route using react-loadable

Search functionality

Add search functionality example to the kitchen sink application.

Deliverables:

• Search functionality added to kitchen sink application
• Relevant backend functionality added to backend application

Integrate Trail

https://github.com/nearform/trail

Integrate Commentami (React Components)

https://github.com/nearform/commentami