Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fredoist/typiform

The online form builder that works like a document
https://github.com/fredoist/typiform

form-builder hacktoberfest hacktoberfest-accepted hacktoberfest2021 harperdb notion react

Last synced: about 1 month ago
JSON representation

The online form builder that works like a document

Host: GitHub
URL: https://github.com/fredoist/typiform
Owner: fredoist
License: mit
Created: 2021-06-30T18:40:21.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-01-16T17:15:23.000Z (almost 3 years ago)
Last Synced: 2024-05-02T03:14:01.962Z (8 months ago)
Topics: form-builder, hacktoberfest, hacktoberfest-accepted, hacktoberfest2021, harperdb, notion, react
Language: TypeScript
Homepage: https://doca.vercel.app
Size: 5.83 MB
Stars: 24
Watchers: 1
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        

[![Contributors][contributors-shield]][contributors-url]

[![Forks][forks-shield]][forks-url]

[![Stargazers][stars-shield]][stars-url]

[![Issues][issues-shield]][issues-url]

[![MIT License][license-shield]][license-url]

[![LinkedIn][linkedin-shield]][linkedin-url]






  

    

  

  
Typiform


  


    Easy online form builder that works like a doc. Just add form elements as you type and start collecting data.

    


    Read article on Hashnode »

    


    


    View Demo

    ·

    Report Bug

    ·

    Request Feature

  


  
Table of Contents

  

    

      About The Project

      

        Built With

      

    

    

      Getting Started

      

        Prerequisites

        Installation

      

    

    Usage

    Roadmap

    Contributing

    License

    Contact

    Acknowledgements

  


## About The Project

[![Typiform Screen Shot](screenshots/cover.png)](https://fredoist.hashnode.dev/introducing-typiform-simple-online-form-builder-that-works-like-a-doc)

### Built With

- [React + Next.js](https://nextjs.org)

- [Tailwind CSS](https://tailwindcss.com)

- [Auth0](https://auth0.com)

- [HarperDB](https://harperdb.io)

- [Jotai](https://jotai.pmnd.rs/)

## Getting Started

To get a local copy up and running follow these simple steps.

### Prerequisites

This is an example of how to list things you need to use the software and how to install them.

- npm

  ```sh

  npm install npm@latest -g

  ```

### Installation

1. Clone the repo

   ```sh

   git clone https://github.com/fredoist/typiform.git

   ```

2. Install NPM packages

   ```sh

   npm install

   ```

3. Create a `.env.local` file and add your own variables

   ```sh

   # HarperDB

   HARPERDB_TOKEN=[Your HarperDB Authorization Token]

   HARPERDB_URL=https://example.harperdbcloud.com

   # Unsplash

   UNSPLASH_TOKEN=[Your Unsplash Access Key]

   UNSPLASH_API=https://api.unsplash.com

   # Auth0

   AUTH0_SECRET=[use [openssl rand -hex 32] to generate a 32 bytes value]

   AUTH0_BASE_URL=https://example.com

   AUTH0_ISSUER_BASE_URL=https://example.us.auth0.com

   AUTH0_CLIENT_ID=[Your Auth0 Client ID]

   AUTH0_CLIENT_SECRET=[Your Auth0 Client Secret]

   ```

4. On harperdb you must create a schema named `typiform` and create the following tables

   - `forms` to store form data

   - `responses` to store form response data

5. Run your local dev server by running `npm run dev`

## Screenshots

Landing Page

![Landing Screenshot](screenshots/landing.png)

Form Editor

![Editor Screenshot](screenshots/editor.png)

Unsplash Integration

![Unsplash Screenshot](screenshots/unsplash-integration.png)

Dashboard Page

![Dashboard Screenshot](screenshots/dashboard.png)

Viewform Page

![Viewform Screenshot](screenshots/viewform.png)

_For more, please refer to the [Hashnode Article](https://fredoist.hashnode.dev/introducing-typiform-simple-online-form-builder-that-works-like-a-doc)_

## Roadmap

See the [open issues](https://github.com/fredoist/typiform/issues) for a list of proposed features (and known issues).

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

## License

Distributed under the MIT License. See `LICENSE` for more information.

## Contact

Freddy González - [@fredoist](https://twitter.com/fredoist)

Project Link: [https://github.com/fredoist/typiform](https://github.com/fredoist/typiform)

[contributors-shield]: https://img.shields.io/github/contributors/fredoist/typiform.svg?style=for-the-badge

[contributors-url]: https://github.com/fredoist/typiform/graphs/contributors

[forks-shield]: https://img.shields.io/github/forks/fredoist/typiform.svg?style=for-the-badge

[forks-url]: https://github.com/fredoist/typiform/network/members

[stars-shield]: https://img.shields.io/github/stars/fredoist/typiform.svg?style=for-the-badge

[stars-url]: https://github.com/fredoist/typiform/stargazers

[issues-shield]: https://img.shields.io/github/issues/fredoist/typiform.svg?style=for-the-badge

[issues-url]: https://github.com/fredoist/typiform/issues

[license-shield]: https://img.shields.io/github/license/fredoist/typiform.svg?style=for-the-badge

[license-url]: https://github.com/fredoist/typiform/blob/master/LICENSE.txt

[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555

[linkedin-url]: https://linkedin.com/in/fredoist