I developed an event project using React with Next.js, where users can register for the event and access a dedicated page to share their referral link. On this page, they can track the number of accesses generated by their link, the total referrals made, and their position in the ranking. Additionally, there is a section highlighting the top three participants with the most referrals.

• 🧭 Table of contents
• 🎥 Implementation Video
• 🎨 Layout
• 👏 Learning and more Implementations
• 💡 Technologies Used
• 🚀 Running the Project
  • Back-end
  • Front-end Web
• 🌎 License
• ✒ Author

Layout developed by Milena Martins

The main learning experience was installing Tailwind CSS version 4, which was recently released, and exploring its new configurations. Additionally, I used Orval, which automatically generates all queries and typings for the frontend based on the backend's OpenAPI documentation.

• React
• Nextjs
• TypeScript
• Tailwind CSS
• Lucide
• React Hook Form
• Zod
• Orval

Clone the project

  git clone https://github.com/VagnerNerves/nlw-connect-react-022025.git

Enter the project directory

  cd server

Install with dependencies

  npm install

You will need to start Docker and run the following command to create the PostgreSQL database and Redis.

  docker compose up -d

Run the following command to create the database and tables.

  npm run db:migrate

Start the server

  npm run dev

Enter the project directory

  cd web

Install with dependencies

  npm install

Start the server

  npm run dev

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

Made with love and hate 😅, get in touch!