Feedback Widget

Feedback widget for collecting feedback on websites developed during Rocketseat's NLW Return using ReactJs, Vite and Tailwindcss.

The project was also developed with accessibility in mind, and to make this work easier we used components from the headless ui that already has keyboard navigation ready.

📌 Table of contents

• Features
• Technologies
  • Code standards
• Application demo
  • Cloud infrastructure
• Getting started
• How to run
• How to contribute to the project
• License

Features

• Envio de feedbacks
• Captura de tela para anexar ao feedback (bastante utilizado no caso de bugs)

⚡ Technologies

This project was developed with the following technologies:

• ReactJS
• Vite
• Tailwindcss
• HeadlessUI

🎈 Code standards

• EditorConfig

🚩 Application demo

You can test the project at this url: https://feedback-widget-alpha.vercel.app/.

☁️ Cloud infrastructure

• Vercel: Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

• Railway: the project's backend is deployed on Railway, a deployment infrastructure for any type of application as simple as vercel.

💻 Getting started

Before you begin, you will need to have the following tools installed on your machine:

• Git

The project can be built with npm or yarn, so choose one of the approach bellow in case you don't have any installed on your system.

Npm is distributed with Node.js which means that when you download Node.js, you automatically get npm installed on your computer.

• Node.js v16.14.2 or heigher.

Yarn is a package manager created by the Facebook team and seems to be faster than npm in general.

• Yarn v1.22.18 or heigher.

The project uses a database (Postgres), it is necessary to have it on your machine so that you can run it. If not, I suggest using Docker to run a container with the postgres image.

• Docker

How I created my postgres container locally (linux)

docker run --name postgres -e POSTGRES_PASSWORD=postgres -p 5432:5432 -d postgres

Also, it’s good to have an editor to work with the code like VSCode.

ℹ️ How to run

Follow the instructions below to download and use the project from this repository:

You can use yarn or npm as package manager to run this project, but preferably I use yarn.

Clone this repository using SSH:

git clone git@github.com:danielhessell/feedback-widget.git

or clone using https:

git clone git@github.com:danielhessell/feedback-widget.git

Go to project folder in terminal/cmd:

cd feedback-widget

Backend

Go to server folder in terminal/cmd:

cd server

Install dependencies:

yarn

Run migrations

yarn prisma migrate dev

Run project:

yarn dev

The server will start on port 3333. Go to http://localhost:3333.

Frontend

Go to web folder in terminal/cmd:

cd web

Install dependencies:

yarn

Run project:

yarn dev

The server will start on port 3000. Go to http://localhost:3000.

🎉 How to contribute to the project

1. Fork the project
2. Create a new branch with your changes: git checkout -b my-feature
3. Save the changes and create a commit message telling what you've done: git commit -m "feature: My new feature"
4. Submit your changes: git push origin my-feature

Caso tenha alguma dúvida confira este guia de como contribuir no GitHub.

📄 License

This project is under the MIT license. See the LICENSE file for more details.

---

Made with 💙 by Daniel Hessel.