FEEDGET - The Widget to Get Feedback

Lessons Learned   |    Technologies   |    Environment Setup   |    Features

Application developed during eighth edition of Next Level Week, delivered by RocketSeat. The objective here was to build a full JS stack widget to collect bug reports and feedbacks, so it can be embedded in any web or mobile application. Although the React Native version was skipped, I was able to build (and have fun) the version for browsers and the backend for it. Amazing technologies learned!

Check out the application running!

🏆 Lessons Learned

• Building a React application using Tailwind CSS;
• Taking screenshots directly from the browser;
• Creating accessible and keyboard-controllable interfaces (little hel from Headless UI);
• Adding and setting Prisma as ORM tool in a Node environment;
• Dealing with emails in development environment (with MailTrap);
• Organizing backend project following SOLID principles;
• Setting unit testing on the server-side;
• Deploying the applications at Vercel and Railway

🚀 Technologies & Resources

Frontend:

• Bun as package manager and development runtime
• Vite.js
• React.js
• Tailwind CSS
• Phosphor Icons
• Headless UI
• HTML-to-Canvas converter

Backend:

• Bun as package manager, test runner and runtime
• Express.js
• Prisma
• Insomnia
• MailTrap service
• SOLID principles
• SQLIte database

Development:

• Visual Studio Code
• TypeScript
• ESlint and Prettier

🔨 Setting up the Environment

To set up the projects in your environment, make sure to have Bun 1.3+ installed in your machine and the bun shortcuts available through the command line.

Besides, you will need to create a .env file in both folders /server and /web. These file hold some configuration and secrets to make the application runnable. You can use the .env.example file as template to know which variables should be configured.

With all these set, run the following commands to install dependencies and configure your database:

# Backend project
$ cd server/
$ bun install       # install project dependencies
$ bun run prepare   # update Prisma's interfaces with DB schema
$ bun run migrate   # ensure your DB schemas is up-to-date
$ bun run dev       # start the server in development mode

# Frontend project
$ cd web/
$ bun install       # install project dependencies
$ bun run dev       # start the server in development mode

⚡ Features Implementations

The main idea of the project was developed during the NLW (Next Level Week) event and the result is the one available in release v1. Afterwards, any incoming commits are intended to be incremental updates to improve the application, as proposed at the end of the event.

Besides, base project layout & design is available at Figma.

• Frontend web:
  • Create project using Vite and TypeScrip;
  • And and configure Tailwind CSS;
  • Create button to open dialog;
  • Use Headless UI to create dialog (accessibility-ready);
  • Create components based on Figma layout;
  • Implement workflow functionalities;
  • Refine accessibility and navigation via keyboard;
  • Implement light theme for the project;
  • Convert project to a node package and publish it in npm;
  • Create panel to display submitted feedbacks;
• Frontend mobile:
  • Create React Native project using Expo;
  • Implement navigation and swipe animations to open and close widget;
  • Create components based on Figma layout;
  • Implement workflow functionalities;
• Server:
  • Create node project with Express and TypeScript;
  • Add and configure Prisma as application ORM;
  • Configure mail library to notify new incoming feedbacks/records;
  • Implement business logic and services in a single file;
  • Refactor project following SOLID principles;
  • Add and configure Jest;
  • Create unit tests for application core and ensure coverage of 100%;
  • Replace MailTrap by a custom SMTP provider;
  • Enhance look of email sent by the application;
  • Create an endpoint to recover all created feedbacks;
• Integration and deploy:
  • Integrate front and backend via HTTP requests;
  • Prepare environments for deploy (.env file and package.json scripts);
  • Configure Vercel to deploy frontend project;
  • Configure Railway to deploy database and backend project;
  • Create reference docs for GitHub repository;

---

Also checkout the project developed in NLW #2, NLW #3, NLW #4, NLW #5 and NLW #6.