olaven / krets

Frictionless feedback.

Krets

👋 Welcome

Krets is a useful tool for getting feedback. The idea is that giving feedback should be as simple as possible. Ideally, completely frictionless.

Local setup

In addition, a .env-file must be created at the root of the project. It must contain:

AUTH0_DOMAIN=<YOUR_VARIABLE_HERE>
AUTH0_CLIENT_ID=<YOUR_VARIABLE_HERE>
AUTH0_CLIENT_SECRET=<YOUR_VARIABLE_HERE>
REDIRECT_URI=<YOUR_VARIABLE_HERE>
POST_LOGOUT_REDIRECT_URI=<YOUR_VARIABLE_HERE>
SESSION_COOKIE_SECRET=<YOUR_VARIABLE_HERE>



PGHOST=<YOUR_VARIABLE_HERE> # db if using devcontainers
PGUSER=<YOUR_VARIABLE_HERE> # user if using devcontainers
PGPASSWORD=<YOUR_VARIABLE_HERE> # pass if using devcontainers
PGDATABASE=<YOUR_VARIABLE_HERE> # data if using devcontainers

CONTACT_EMAIL=<YOUR_VARIABLE_HERE>

Start the application locally

docker-compose up --build -d

krets's Issues

Text responses should be sorted by date

Description

The text responses on the admin-page should be sorted by date.
-> Newest first!

Stripe Webhook Error

Description

I got an email from Stripe about the webhook not responding properly.
This has to be in place before payment is visible to the user

Checklist

• Investigate Stripe's emails
• Check if this is still a problem
• Fix problem
• Verify that the webhooks work as intended

Admin page crashes if there are no responses

Declarative method handling

This is not feature critical and mainly an idea for fun and exploration! 💡 🚲

Experiment to see if something akin to the following API can be implemented:

//pages/api/greetings
export default handleMethods({
    get, post
});

const get = async (request: NextApiRequest, response: NextApiResponse) => {

    response
        .status(200)
        .send("Hello!")
}

const post = async (request: NextApiRequest, response: NextApiResponse) => {

    //..creating resource

    response
        .status(201)
        .send("Hello!")
}

Coverage Treshhold

Should add some treshold for testcoverage in CI pipeline

Investigate if this can be used.

BarChart should use page colors

BarChart should use the colors associated with each page, like LineChart does.

Organize `models`

Description

Organize models.ts in the same way as database.ts and middleware.ts, with one file dedicated to exporting forwards

Checklist

• Implement
• Make sure nothing breaks

"API resolved without sending a response for /api/pages/test/responses, this may result in stalled requests."

Description

API resolved without sending a response for /api/pages/test/responses, this may result in stalled requests.
Gets logged for may API routes. It does not break functionality, but it is probably due to some suboptimal usage of Next.js API-routes

Checklit

• Figure out what I'm doing wrong
• Update API routes
• Verify that server-log warnings are gone

Share page from GUI

Description

A logged in user should have access to the following features:

• Copying their page URL to clipboard
• Downloading QR as image file
  This is, of course, something the user can accomplish without Krets explicitly providing the feature. However, I'm guessing that pointing them out to the user in this way will make more people realize and actually do it.

Checklist

• Copy page URL - as per #121
• Download QR - as per #160

`README.md` should have setup instructions

Description

Should be able to setup a local dev environment by following instructions, without previous knowledge of the proejct.

'select all' makes lines disappear

Description

The lines in LineChart.tsx disappears when select all is selected in the dropdown.

Move compare select to graph-half of page

Login issue with email/password

Reported bug

Description

User failed to login, with Auth0 reporting configuration mistake.
From memory: "password login via OCDE-conformant client..."

Checklist

• Reproduce - does not seem doable..
• Figure out - setting default fallback URI
• Fix - Added login URI through Auth0-GUI
• Test - Reported to be working Waiting for someone with the issue to reply 😇

Payment

Description

It should be possible to sign up for a subscription through an integration with Stripe.

Checklist

• Understanding how Stripe works - I should follow this approach, as it allows for a base price + usage cost
• Setup (not implement yet) and understand webhooks - as per #119
• Configure Stripe products - done in GUI
• Create test-page - as per #123
• Figure out testing environment (e.g. keys and accounts)
• Figure out how payment flow works - as per #126 -> https://stripe.com/docs/billing/subscriptions/metered
• Database supports customer IDs - as per #128
• Database supports subscription and price IDs - as per #129
• Collect payment with GUI components -> step 5 - as per #134
• Persist subscription status in backend - as per #141
• Must be possible to have a "free-premium"-status as a user (for users helping me out with testing) - as per this commit
• Server updates Stripe User Records based on Krets-usage
• Handle Stripe webhook events (succeed/failed payment) - as per #143
• Should be able to upgrade after signup

Dynamic placeholder when giving feedback

The placeholder-text should be different depending on what smiley the user selects.

• vary placeholder text
• localize the text (nor/eng)

Compare pages

Compare pages in graph on adminpage.
I.e. display the results for two at the time

Page-labels on line-chart

Description

The lines in the line-chart does nothing to indicate what page they belong to.
This is confusing. Having labels and colors (see #90) should help to solve this.

Checklist

• Implement labels

CORS

Description

Ensure that CORS is set up to only accept requests from https://krets.app

Checklist

• Understand what Next.js has as default CORS rules - start by reading this
• Implement CORS only working on https://krets.app
• Exception for localhost, only when running in dev/test mode
• Make sure everything works as intended - headers are set. important still see if it works when deployed!
• Implement on all routes

As per #130

user.customer_id should have unique constraint

Description

DB should have a contraint on users.customer_id to assure its unique.

Checklist

• Implement
• Test

Implement pagination

All endpoints returning a list should use pagination for performance reasons.
It is important that the pagination logic is handed to the database queries, to avoid
loading lots of data in memory, server-side.

Checklist

• Common interface for loading paginated data from client (see previous projects)
• Responses
• Pages
  - [ ] Categories (once implemented) Skipping categories for now, as the feature is not used.

Text hidden until smiley is selected

• hide textinput until a smiley is pressed

Image suggestion

Use some of these or similar to make the page more friendly? https://www.pixeltrue.com/free-illustrations or https://www.svgrepo.com/vectors/error/

Can suggest new graphs

Description

The user should be able to send in suggestions for new graphs from the admin page. For now, an email can be sent to post at krets app.

• Implement API for sending email (should be useful down the road)
• Implement GUI + REST calls to API
• Make sure GUI sends valid messages
• Localize GUI text
• non-test email config when not in development
• Add CONTACT_EMAIL / CONTACT_EMAIL_PASSWORD in prod

Pages should have a color

Description

It should be possible to associate a page with a given color.
This way, it can easily be recognized in charts etc.

Checklist

• Add to db schema - as of #96
• Give page a random color on creation - as of #105
• Let user change it in settings (have a look at this)
• Display color in charts

Sort out test setup

Description

The test setup should be redone, as it does not work with Next API Queries.
This forces all of the getId-workarounds in the code.

I should attempt to set up the tests in a way that does not break Next.

Update usage records on Stripe

This issue was previously part of #118

Description

As part of the payment system, the server somehow needs to update Stripe about usage. (See this.
I think usage should be calculated (i.e. amount responses to begin with) with an SQL query, and then sent to Stripe, instead of having Stripe do the calculation.

Checklist

• Question: how should the reporting code be triggered?
• Implement query/local calculation
• Test query/local calculation
• Implement reporting code
  -[ ] Test reporting

Let user update page information

User should be able to:

• update page name
• delete page
• update page ID? (think about this)

Categories

Organize pages into "categories".

• create category
• display categories in pagelist
• API for categories
• Manage pages in categories

Should show test-badge in readme

Custom header on landing page

Description

The landing page should be able to display a custom header instead
of "give feedback to XX". The page owner should be able to change this in settings.
If no custom page text is specified, something like the one that's there today is fine

Checklist

• Implement backend
• Test backend
• Implement frontend
• Test frontend

Sharing admin data

Think about sharing admin data.
I.e. share/download graphs.

I will elaborate on this issue when I have more time

Add user mail to `/api/mail`'s .from

Description

Recent scope changes gives access to the user email and makes this change possible.

krets/src/pages/api/mail.ts

Lines 71 to 74 in 8cbf341

	email.text = `${email.text} - ${user.name}`; //TODO: remove in favour of user email as `.from`
	email.to = process.env.CONTACT_EMAIL;
	email.from = process.env.CONTACT_EMAIL; //TODO: should be user email?

Organize with Github Projects

Compare different smileys

Description

This issue falls under #87.
The owner of a page should be able to view text-feedback by smiley, side by side.

Checklist

• Implement
• Test

Tooltip does not work with Flex

Known issues:

• Tooltips gets positioned in upper left corner in Flexbox

(see #58)

Fixing this will allow me to make further use of the tooltip-feature.

'No Such Customer' in production

Here's what I believe happened:
The 'on demand migration' -code ran when production was still running towards the Test Stripe version.
In other words, I need to create a new customer if there is no customer with the given id, likely in callback.ts.

(node:51) UnhandledPromiseRejectionWarning: Error: No such customer: 'cus_HoCG4GZLmBjGol'; a similar object exists in test mode, but a live mode key was used to make this request.

Admin panel

Basic admin panel

• See text responses
• See moodgraph

Collect middleware under `./middleware/middleware`

Description

Collect middleware under ./middleware/middleware. This makes the module
consistent with other parts of the codebase, like database.

Checklist

• Implement .../middleware.ts
• Update all imports
• Make sure no tests are broken

Post endpoint/frontend should handle conflicts

Description

Right now, the server throws a generic error if posts with duplicate IDs are created.
However, this should return 409 and result in an appropriate message on the client.

Checklist

• Implement 409 CONFLICT if the ID already is registered
• Test 409 implementation
• Implement a frontend message indicating what's happened.

The frontend will be even more polished at some point (perhaps checking in real time as the user writes), but
that is beyond the scope of this issue)

Calculate server-side

The code in Charts.tsx is based on client side calculations of all available responses.
This scales very badly. As a solution, endpoints calculating this data using SQL-queries
(i.e. keep calculations as far down the stack as possible) should be implemented.

• Line Chart - as per #162
• Bar Chart - as per #162
• Overall average - as per #99

Line chart by date

Description

A line chart showing the average response value / date -> y / x

Checklist

• Implement
• Make sure it is stable

Too little space between dates and text

Description

The text responses on the admin page have overflowing text between dates and text-content.

Let user give contact details

Optional: ask user if its okay to contact back.
encourage physical meetings

Checklist

• Support for contact details in DB schema
• Support for contact details in DB layer
• Support for contact details in POST-endpoint at /api/responses/
• Support for contact details in GUI
• Have contact details be clearly optional and explicitly state its only purpose.
• Show contact details in admin page (just as part of text to begin with)

GUI behaviour

• only show smileys
• text input shown after smiley selection
• show checkbox with label about contact details below text-input
• if checked, show field to enter email/phone number
• if unchecked, do not show the input field

It is very important that this feature does not come across as pushing or annoying in any way.
That would counter the entire purpose of Krets. It has to be completely clear that this is optional.

Features depending on subscription

Description

Some features should only be available to users on paid plans.
~~ Free users should have limits on page count etc. ~~
EDIT: I have decided to keep access behind a subscription for now, with a nice trial.

Checklist

• Question: What is important to remember when designing limitations?
• Question: Which features / limitations should be implemented?
• Question: Does result of second question hold true against the first?
• Implement
• Make sure that free-premium users always have access

Export all database repositories from one file

Description

Instead of:

import { pages } from "./database/pages"
import { responses } from "./database/responses"

Do:

import { pages, responses " from "./database/database" 

Checklist

• Implement
• Update all imports

Authenticated middleware wrapper

Description

This is a minor issue. The current auth0.requireAuthentication is hard to read and ugly in the code.
I think it would be an improvement to create a wrapper for it as middleware/authenticated.ts

Checklist

• Implement
• Make sure no tests break

'sad' responses hidden by default

Description

When the admin page loads, sad text responses are hidden unless they
are manually removed and then readded.

Checklist

• Todo
• Test presence on launch

Generic DB function

Description

Make some functional query interface, loosely based on the linked function.
This is mainly just for fun 🚲 💡

Providing something like the following API:

const getPages = () => rows<PageModel[]>("select * from pages"); 
const getByEmotion = (emotion: Emotion) => rows<PageModel[]>("select * from pages where emotion = $1", [emotion]); //alternatively vararg?
const getPage = (id: string) => first<PageModel>("select * from page where id = $1", [id]); 

krets/src/database/connect.ts

Line 27 in d242116

export const firstRow = <T>(result: QueryResult<T>) =>

Page providing upgrade options

Finish the payment GUI started with #118

Description

Page should show available subscription options and the user should
be able to purchase them.

Checklist

• Get options from Stripe? - as per #142
• Implement cards - as per #150
• Test (automatically) - as per #164
• Test manually in test environment
• Test manually in production environment

Improve admin page

Description

By default the current bar chart should change to a line graph, with time in the X-axis.
The bar chart should appear if and only if multiple pages are compared.
The overall average score should just be shown as a number, as the bar chart does not really add any values when there is only one graph visible.
Furthermore, improvements should be made to the way text-feedback is displayed.

Checklist

• Show overall score as a number - as per #97
• Can filter text responses by smiley - as per #86
• Implement line chart by date - as per #88
• Just show bar chart when multiple pages are selected - covered by collapsible sections imo may not be relevant when collapsible is implemented?
• Improvements to text feedback - as per #92
• Graphs listed in collapsible sections - as per #115