Next Level Week #9 - Ignite

NLW eSports - Find your duo

🎮 About this project

You know when you are playing a game really cool and you want a friend to play it with you? Here it is.

In this version of NLW by Rocketseat, we are going to build an application to find game duos!

To find a duo, the person will create an ad to a game, providing the required info. The ones interested in playing the same game will check the ad details, if it's a duo match, they connect over Discord and start playing together.

This is an entirely complete application, which includes the development of the server, web and mobile applications.

⚙ Backend

Technology Stack

How to run it?

Clone the repository to your machine.

Enter on server folder:

$ cd server

Install the dependencies:

$ npm install

We need to save the records in the database, so in order to do it correctly, check the .env file wich contains the URL for the database connection.

$ DATABASE_URL="mysql://my_connection"

Change it to the database you want to connect. After that, it's time to run the migration:

$ npx prisma migrate dev

If the configuration is ready and connected to the database, let's start the application:

$ npm run dev

API routes

Inside root folder, there is a file called requests.http. This file contains examples of requests to all API routes, as shown below:

# List all games
GET http://localhost:3333/games HTTP/1.1

# List all ads
GET http://localhost:3333/ads HTTP/1.1

# List ads for a specific game
GET http://localhost:3333/games/80848e26-164b-4e28-8d01-64028fe5f3d4/ads HTTP/1.1

# Get the discord username for the given ad
GET http://localhost:3333/ads/4524a2eb-61f8-4b76-aa52-524c898a918c/discord HTTP/1.1

# Create an ad
POST http://localhost:3333/games/80848e26-164b-4e28-8d01-64028fe5f3d4/ads HTTP/1.1
content-type: application/json

{
	"name": "player00",
	"yearsPlaying": 4,
	"discord": "letsplay",
	"weekDays": [3,4,5],
	"hourStart": "00:00",
	"hourEnd": "06:00",
	"useVoiceChannel": false
}

💻 Front-end

Technology Stack

Other libraries used:

• React Hook Form: form validation
• Keen-Slider: carousel
• Radix UI: accessible unstyled components
• Mirage JS: fake API

App purpose

• Create an ad to a game

How to run it?

Clone the repository to your machine.

Enter on web folder:

$ cd web

Install the dependencies:

$ npm install

Let's start the application:

$ npm run dev

Important note

In order to deploy the application without deploying the backend server, Mirage JS was used to mock the backend API.

If you want to connect to the backend project, comment the call to the function createFakeAPI on App.tsx.

📱 Mobile

Technology Stack

App purpose

• Visualize ads created
• Get ad's user Discord to connect with him

How to run it?

Clone the repository to your machine.

Enter on mobile folder:

$ cd mobile

Install the dependencies:

$ npm install

Let's start the application:

$ expo start

You can run the application directly on your phone, using the Expo Go app, or use an emulator.

🎨 Application layout

You can check the layout of this project clicking in the link below:

• Check on Figma

You must have Figma account to access it!

🚀 Online app

Wanna see the application online?

• https://nlw-esports-morgs.vercel.app

📝 License

This project is under MIT license.