BinaryLeo / react_feedback_widget

A Feedback widget built using React JS and Tailwind CSS

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

Technologies   |    How it works   |    How to use   |    License

🧪 technologies

• Frontend - ReactJS, Tailwind CSS, Typescript, ViteJS, Phosphor Icons.
• Backend - Express, Typescript, Prisma, Mailtrap, Nodemailer, Jest, PostgreSQL, Postman.
• Mobile application - React native, Expo, 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
• Yarn or npm
• Expo CLI

Clone the repository.

• Open the project from your IDE.
• Follow the steps below:

Web application

Make sure to have the server running

# 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

# 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

# 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 for more details.

---