Feedback Widget

Preview - Technology - Installation

Feedback Widget is a component fixed in the right bottom corner of the website, used to send feedback (a comment with or without a printscreen) via email.

👀 Preview

Live

🚀 Technology

• Web:
  • React with Vite and TypeScript
  • TailwindCSS
  • HeadlessUI
  • Axios
  • Phosphor Icons
  • html2canvas
  • Deploy in Vercel
• Mobile:
  • React Native with TypeScript
  • Axios
  • Expo
  • Phosphor Icons for React Native
  • RN Bottom Sheet made by Gorhom
• Server (back-end):
  • Node.js Typescript with Express.js
  • Jest
  • Prisma
  • Nodemailer
  • Deploy in Railway

🔨 Run this project

# Clone this repository
$ git clone https://github.com/Linsmar7/feedback-widget-nlw.git
# Open the web project folder
$ cd feedback-widget-nlw\web

Install dependencies (you need Node.js installed)

$ npm install
# Run npm run dev to start
$ npm run dev
# The page will open on localhost on the port assigned in your terminal

# Now to make the back-end work
# Open the server folder
$ cd ..\server

Install dependencies (you need Node.js installed)

$ npm install
# Create a file named ".env"
$ touch .env
# Type this in the file and save:
$ DATABASE_URL="file:./dev.db"
# If you don't have postgresql and don't want to use it, go to prisma folder, then open the file named "schema.prisma" change the provider to "sqlite"
# Now re-establish the link between schema.prisma and .env file
$ npx prisma generate
# Run npm run dev to start
$ npm run dev
# In another terminal, run Prisma Studio to see the database
$ npx prisma studio

Now with both front-end and back-end running
You can see the emails by changing the transport in the file named "nodemailerMailAdapter.ts" in the adapters folder
Use mailtrap, go to your inbox, in the right side you can choose the Integration in a select input, choose "nodemailer"
Copy your new transport and change it in the nodemailerMailAdapter file
Maybe you will need to stop the server and run again ;)
Now test the app, if you need some help, contact me!

For mobile, you have to use EXPO and your device or an emulator (of course, don't forget the npm install)

# With EXPO 45, some stuff has changed, no more expo-app-loading, you now have to use expo-splash-screen
$ expo install expo-splash-screen
# react-native-gesture-handler needs to be on the 2.1.0 version
$ npm install react-native-gesture-handler@~2.1.0

You will probably do fine in starting the mobile.
But if you didn't succeed and after many google searches and try and error you didn't succeed, DON'T BE SHY, contact me! ;)

---

Made with ❤️ by Linsmar7🎇