freply v0.0.33

🤔 How does it work?

The thought behind Freply was having a feedback system designed to collect issues and ideas from your users, which works to connect the developers to their users and vice-versa.

This monorepo includes both a package and website with a dashboard, either of which you can use to configure this.

The website contains a dashboard where you can create new projects, all of which integrate with the API. The application also ships with an API, which the form can post requests to allowing you to recieve feedback in your inbox. You can either use the freply package to assist you in creating your form, or build your own from scratch: it's your entirely choice!

Alternatively, you can simply use the library with Courier itself. This is what the demo website is doing, and this requires you to signup on Courier. The package is headless, and ships with things like icons, animations, integrations, functions and a set of opinionated accessible components.

API

The base endpoint is https://freply.hxrsh.in/api

Receiving Feedback

POST https://freply.hxrsh.in/api/notification

You must provide the Authorization header with your Project ID (which you can find on the dashboard).

You don't even need to create your own widget to try it out! Create a new project, and copy the ID and run the below command in your terminal:

curl --location --request POST 'https://freply.hxrsh.in/api/notification' \
--header 'Authorization: YOUR_PROJECT_ID' \
--header 'Content-Type: application/json' \
--data-raw '{
    "title": "TITLE", 
    "body": "BODY"
}'

...and you should recieve an email inside of your inbox. Woo! 🥳

🚀 Quickstart

Having trouble? Unsure of something? Feel free to ask away in the discussions.

Install the npm package:

yarn add freply

Get Started With Courier

This library integrates with Courier to help you recieve feedback.

1. Sign up for a free account at app.courier.com/signup
2. Choose the integration of your choice. View a list of native Freply integrations.
3. Retrieve your API key
4. Configure your environment variables with your API key

If you would rather skip this hassle, you can create an account on our website to recieve notifications directly to your email.

Configuration

Below is a basic example:

import * as F from '@freply/react'

export default function App() {
  return (
    <F.Form>
      <F.Success>
        <F.Checkmark />
        <F.Thanks>Thanks! We received your feedback.</F.Thanks>
        <F.Back>Anything else? Let us know</F.Back>
      <F.BackButton>Anything else? Let us know</F.BackButton>
      </F.Success>
      <F.Content>
        <F.TextareaContainer>
          <F.Textarea placeholder='What would you like us to know?' />
        </F.TextareaContainer>
        <F.Footer>
          <F.Report>
            <F.ReportButton>Idea</F.ReportButton>
            <F.ReportButton>Issue</F.ReportButton>
            <F.ReportButton>Issue</F.ReportButton>
          </F.Report>
          <F.Options>
            <F.Screenshot>Take Screenshot</F.Screenshot>
            <F.Submit>Send</F.Submit>
          </F.Options>
        </F.Footer>
      </F.Content>
    </F.Form>
  )
}

This library is opinionated and allows you to customise the styles and behaviour to your needs, and ships with the bare basics.

This means it ships with zero styling, or in-built functionality for the components. However, you can view our implementation of the bar to get a basic idea.

Components

Below are all the components which this library ships with, in hierarchical order.

Form

The form wrapper around this entire component. Should contain an onSubmit event for submitting the form.

Success

This is the wrapper of the screen which is shown after the form submission was successful. Consider using a basic ternary implementation with hooks.

Checkmark

An SVG checkmark animation. Try submitting the form on the website for a demo.

Thanks

The title (h2) of the element submission screen.

Back

A button allowing users to go back and submit more feedback. For implementation, consider using a hook and setting it to the original state.

Content

The wrapper for all content inside the regular form.

Textarea

A textarea element which contains the feedback.

Footer

The wrapper for all elements below the textarea.

Report

A wrapper containing the report variants.

Report Button

A button element for selecting report variant.

Options

A wrapper containing the utilities such as the 'screenshot' button and the 'send' button.

Screenshot

A button element which contains code for a screenshot. Consider using the default screenshot function shipped with the library.

Send

A button element (with type='submit') for submitting the form. Consider using the submit function shipped with the library.

Functions

This library ships with several functions to help you integrate the widget onto your site.

Screenshot

A function which uses html-to-image to generate an image from a DOM node using HTML5 canvas. Consider using it with an onClick event on the screenshot element.

This function requires a single argument for the format it will return.

Submit

The default submit function which posts to the Courier API.

This function posts to api.courier.com/send.

Alternative, you can also post to the Freply API which will route your request through Courier.

Integrations

This package attempts to integrate some of Courier's integrations into the package natively in an attempt to enhance developer experience.

This list of integrations is ever-growing, and you can always add new ones - it's pretty easy to get started with!

Authorisation

Begin by initialising the API:

import { authorize } from 'freeply'
authorize(process.env.COURIER_API_KEY)

Gmail

Begin by configuring the Gmail integration on Courier. Refer to this documentation for a more in-depth explanation.

/* Make sure to authorise your client beforehand */
import { gmail } from 'freply'

const data = {
  title: 'TITLE',
  body: 'BODY'
}

gmail.email(data)

Discord

Begin by configuring the Discord integration on Courier. Refer to this documentation for a more in-depth explanation.

/* Make sure to authorise your client beforehand */
import { DiscordEndpoint } from 'freply'
const discord = new DiscordEndpoint()

const data = {
  userId: '518432133111611397',
  title: 'TITLE',
  body: 'BODY'
}

discord(data)

Icons

This library also ships with some basic SVG icons to help you design your form. These icons are all from Remix Icons, an open-source icon system licenced under Apache Licence 2.0

Usage

import { icons } from 'freply'
const Icon = () => <icon.Idea />

This library ships with five icons: Idea (outline), Screenshot, Other/Chat, Issue, a regular Checkmark and an animated Checkmark.

💻 Development

This is a monorepo containing both the Freply website and the package.

Begin by cloning it locally:

git clone https://github.com/harshhhdev/freply.git

Setting up the website

cd website 

# Install dependencies
yarn

# Run our development server
yarn dev

Awesome. Our development server should be running on localhost:3000

Setting up the library

cd package
yarn

# Setup example directory
cd example
yarn

Next, start the development server:

yarn start

This should compile an instance of your project to the dist folder. It should re-build everytime you save a new change.

Using the package

You can test the built package locally by running the example repository:

cd example

# Start development server
yarn start

Awesome. Your React development server should now be running on localhost:3000.

🔧 Tools Used

• Courier
• Supabase
• Turborepo
• supabase-auth-helpers
• create-react-library
• Next.js
• focus-trap-react
• framer-motion
• nanoid
• prism-react-renderer
• TypeScript
• Microbundle
• React
• html-to-image
• Prettier
• ESLint

Contributing

After setting up the project, and making changes:

git add .
git commit -m "commit message"
git push YOUR_REPO_URL YOUR_BRANCH

This codebase is well-documented and has comments explaining just about everything in here. All contributions are welcome!