Skip to main content

Fut Evento

Live

futevento-screenc futevento-screenc2 futevento-screenc3 futevento-screenc3

About the project

Welcome to Futevento ⚽

image

Project info​

URL: https://futevento.com.br

How the project was born​

With the problem of always having to send list after list on whatsApp groups with people having to copy the list, add their name and resend it, i came up with the idead of creating a list organizer but aiming towards the soccer theme.

The project was kickstarted using lovable, an AI code generator. Then i added a few features, google Maps API and Supabase Auth.

image

How it works​

  1. A user can create a list of events, add a location and a date. Then they can share the list with others via link.

  2. When someone clicks on the link, they can see details about the event including the location on the map.

  3. The user can add their name to the list and the list will be updated automatically.

  4. The user can also see the list of people who are going to the event.

  5. The creator of the list can see the list of people who are going and copy the list to clipboard, to paste on whatsApp.

Setup​

For this project to work, you need to create a .env.local file and add the following variables:

VITE_GOOGLE_MAPS_API_KEY=isadjasiod...
project_id=sdapdoka...
VITE_SUPABASE_URL=https://xxxxxxxxx.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=dasdsapdka....

You'll need to create a Google Maps API key and activate the Google Maps API. You can get the Google Maps API key here

You'll need to create a Supabase project and get the project id and publishable key. You can get the Supabase project id and publishable key here

Run the project:​

  • Step 1: Clone the repository
git clone https://github.com/nixoletas/fut-evento.git
  • Step 2: Install the dependencies
npm i
  • Step 3: Start the development server
npm run dev

Technologies used for this project​

  • Vite
  • TypeScript
  • React
  • shadcn-ui
  • Tailwind CSS
  • Supabase
  • Google Maps API
  • Netlify
  • Registro.br