https://github.com/binaryleo/react_feedback_widget
A Feedback widget built using React JS and Tailwind CSS
https://github.com/binaryleo/react_feedback_widget
nodejs reactjs tailwindcss typescript vitejs
Last synced: 9 months ago
JSON representation
A Feedback widget built using React JS and Tailwind CSS
- Host: GitHub
- URL: https://github.com/binaryleo/react_feedback_widget
- Owner: BinaryLeo
- License: mit
- Created: 2022-05-02T23:45:57.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-22T15:34:47.000Z (over 3 years ago)
- Last Synced: 2025-09-04T05:53:36.149Z (10 months ago)
- Topics: nodejs, reactjs, tailwindcss, typescript, vitejs
- Language: TypeScript
- Homepage: https://react-feedback-widget-mu.vercel.app/
- Size: 1.44 MB
- Stars: 35
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A Feedback widget built using React JS and Tailwind CSS
Get feedback from your customers with screenshots directly from your app. Fast, easy and built-in
[](https://github.com/BinaryLeo/react_feedback_widget_web/blob/main/LICENSE)
Technologies |
How it works |
How to use |
License
## 🧪 technologies
* [Frontend](https://github.com/BinaryLeo/react_feedback_widget_web/tree/main/web) - [ReactJS](https://reactjs.org/), [Tailwind CSS](https://tailwindcss.com/), [Typescript](https://www.typescriptlang.org/), [ViteJS](https://vitejs.dev/), [Phosphor Icons](https://phosphoricons.com/).
* [Backend](https://github.com/BinaryLeo/react_feedback_widget_web/tree/main/server) - [Express](https://expressjs.com/), [Typescript](https://www.typescriptlang.org/), [Prisma](https://www.prisma.io/), [Mailtrap](https://mailtrap.io/), [Nodemailer](https://nodemailer.com/), [Jest](https://jestjs.io/), [PostgreSQL](https://www.postgresql.org/), [Postman](https://www.postman.com/).
* [Mobile application](https://github.com/BinaryLeo/react_feedback_widget_web/tree/main/mobile) - [React native](https://reactnative.dev/), [Expo](https://expo.dev/expo-go), [Bottom Sheet](https://gorhom.github.io/react-native-bottom-sheet/).
## 💡 how it works
This is a feedback widget built with React to be applied on any website for a simple interaction between the customer and the company.
## 💡 how to use
Requirements:
* [NodeJs](https://nodejs.org/en/)
* [Yarn](https://classic.yarnpkg.com/) or [npm](https://www.npmjs.com/package/npm)
* [Expo CLI](https://docs.expo.dev/workflow/expo-cli)
Clone the repository.
- Open the project from your IDE.
- Follow the steps below:
Web application
**Make sure to have the server running**
```bash
# From the project root folder access the 'web' folder
$ cd web
# Install the dependencies
$ npm install or yarn
# Start the application
$ npm run dev
```
Web application - Postgres local DB
Server
.env file
Migration
```bash
# From the project root folder access the 'server' folder
$ cd server
# Install the dependencies
$ npm install or yarn
# Edit your '.env.example' to '.env' and add your credentials (See picture above)
DATABASE_URL="postgresql://server:password@localhost:5432/databasename?schema=public"
# With a PostgreSQL running, run the migrations
$ npx prisma migrate dev
# You can access Prisma Studio from:
$ npx prisma studio
# Start the server
$ npm run dev
# Routes
Post: http://localhost:3333/feedbacks
```
Mobile
**Make sure to have the server running**
```bash
# From the project root folder access the 'mobile' folder
$ cd mobile
# Install the dependencies
$ npm install
# If you are going to emulate with android, run this command
$ npm run android
# If you are going to emulate with ios, run this command
$ npm run ios
# Or just start the bundle
$ npm run start
```
## 📄 License
This project was built under MIT. See the file [LICENSE](LICENSE) for more details.
---