Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsexpertcoder/nlw-unite-react-native
NLW Unite <React Native /> - 2024
https://github.com/jsexpertcoder/nlw-unite-react-native
asyncstorage expo-router javascript nativewind nlw qrcode react react-native rocketseat tailwindcss typescript zustand
Last synced: about 15 hours ago
JSON representation
NLW Unite <React Native /> - 2024
- Host: GitHub
- URL: https://github.com/jsexpertcoder/nlw-unite-react-native
- Owner: JsExpertCoder
- Created: 2024-04-03T22:46:25.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-12-21T20:07:30.000Z (about 1 month ago)
- Last Synced: 2024-12-21T21:19:47.044Z (about 1 month ago)
- Topics: asyncstorage, expo-router, javascript, nativewind, nlw, qrcode, react, react-native, rocketseat, tailwindcss, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 410 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
pass.in
[]()
[Português](#pt) / [English](#en)
## 📝 Tabela de conteúdos
- [Sobre](#about_pt)
- [Iniciando a aplicação](#getting_started_pt)
- [Estrutura do projeto](#project_structure_pt)
- [Deploy](#deployment_pt)
- [Usando](#usage_pt)
- [Tecnologias](#built_using_pt)
- [Contactos](#contact)
## 🧐 Sobre
O pass.in é uma aplicação de **gestão de participantes em eventos presenciais**.
A versão mobile permite aos participantes emitirem uma credencial em forma de QR-Code para check-in no dia do evento..
Ele foi construído durante o evento "Next Level Week Unite" da Rocketseat, na trilha de React Native.
A aplicação foi construída utilizando Typescript, tailwindcss, zustand nativewind e outras tecnologias.
## 🏁 Iniciando a aplicação
Essas instruções vão te permitir obter uma cópia do projeto e rodar a aplicação localmente para propósitos de desenvolvimento e teste.
### Pre-requisitos
Para rodar a aplicação, você precisa ter o Node.js instalado na sua máquina. Você pode baixar o Node.js [aqui](https://nodejs.org/en/).
Você também precisa ter o Git instalado na sua máquina. Você pode baixar o Git [aqui](https://git-scm.com/).
### Instalação
Para acessar o projeto, basta clonar o repositório ou realizar o download dos arquivos do projeto.
Para clonar o repositório, utilize o seguinte comando no seu terminal:
```sh
https://github.com/JsExpertCoder/nlw-unite-react-native.git
```
Após clonar o repositório, acesse a pasta **mobile** e instale as dependências utilizando o seguinte comando no seu terminal:
```sh
npm install
```
Após instalar as dependências da pasta **mobile** você pode rodar o app utilizando o seguinte comando no seu terminal(**estando na pasta mobile**):
```sh
npx expo start
```
Após isso, basta teres instalado o app **Expo Go** no dispositivo físico e fazer scan do QR-Code que aprecer no terminal. Você pode encontrar o **Expo Go** na loja do seu Smartphone [aqui](https://docs.expo.dev/get-started/expo-go/#install-expo-go-on-your-device).
Depois disso acesse a pasta **server** e instale as dependências utilizando o seguinte comando no seu terminal:
```sh
npm install
```
Após instalar as dependências da pasta **server**, ainda estando nesta pasta utilize o seguinte comando no seu terminal para iniciar o servidor:
```sh
npm run dev
```
Após rodar o servidor, você pode acessar uma interface gráfica pra visualizar os dados no banco de dados rodadndo o seguinte comando no ser terminal (**na pasta server**):
```sh
npx prisma studio
```
Com isso, o servidor estará rodando em http://localhost:3333, e o Prisma Studio (a interface gáfica para a base do dados) em http://localhost:5555, para acessar, basta acessar esse endereço no seu navegador.
## ⛏️ Tecnologias
- [ReactJS](https://reactjs.org/) - Biblioteca de JavaScript para construção de interfaces.
- [React Native](https://reactnative.dev/) - Uma framework poderosa desenvolvida pelo Facebook que permite aos desenvolvedores construir aplicativos móveis utilizando JavaScript.
- [Expo](https://docs.expo.dev/) - Ferramenta utilizada no desenvolvimento mobile com React Native.
- [TypeScript](https://www.typescriptlang.org/) - Superset de JavaScript que adiciona tipagem estática ao código.
- [Zustand](https://zustand-demo.pmnd.rs/) - Biblioteca minimalista e prática para gerenciamento de estados no React e React Native.
- [Nativewild](https://www.nativewind.dev/v4/getting-started/expo-router) - Usa Tailwind CSS como linguagem de script para criar um sistema de estilo universal para React Native.
- [Tailwind](https://tailwindcss.com) - Framework de estilização.
[](https://www.linkedin.com/in/f%C3%A1bio-nicolau-97bab92b3/)
[](mailto:[email protected])
## 📝 Table of Contents
- [About](#about_en)
- [Getting Started](#getting_started_en)
- [Project Structure](#project_structure_en)
- [Deployment](#deployment_en)
- [Usage](#usage_en)
- [Technologies](#built_using_en)
- [Contact](#contact_en)
## 🧐 About
Pass.in is an application for **managing participants in offline events**. The mobile version allows participants to issue a QR-Code credential for check-in on the day of the event. It was built during Rocketseat's "Next Level Week Unite" event, on the React Native track. The application was built using TypeScript, tailwindcss, zustand, nativewind, and other technologies.
## 🏁 Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
### Prerequisites
To run the application, you need to have Node.js installed on your machine. You can download Node.js [here](https://nodejs.org/en/). You also need to have Git installed on your machine. You can download Git [here](https://git-scm.com/).
### Installation
To access the project, simply clone the repository or download the project files. To clone the repository, use the following command in your terminal:
```sh
https://github.com/JsExpertCoder/nlw-unite-react-native.git
```
After cloning the repository, access the **mobile** folder and install the dependencies using the following command in your terminal:
```sh
npm install
```
After installing the dependencies of the **mobile** folder, you can run the app using the following command in your terminal (**being in the mobile folder**):
```sh
npx expo start
```
After this, just make sure you have the Expo Go app installed on your physical device and scan the QR-Code that appears in the terminal. You can find the Expo Go in the app store of your smartphone [here](https://docs.expo.dev/get-started/expo-go/#install-expo-go-on-your-device).
Then, navigate to the **server** folder and install the dependencies using the following command in your terminal:
```sh
npm install
```
After installing the dependencies of the **server** folder, still being in this folder, use the following command in your terminal to start the server:
```sh
npm run dev
```
After running the server, you can access a graphical interface to visualize the data in the database by running the following command in your terminal (**in the server folder**):
```sh
npx prisma studio
```
With that, the server will be running at http://localhost:3333, and the Prisma Studio (the graphical interface) at http://localhost:5555, to access, just access this address in your browser.
- [ReactJS](https://reactjs.org/) - JavaScript library for building user interfaces.
- [React Native](https://reactnative.dev/) - A powerful framework developed by Facebook that allows developers to build mobile apps using JavaScript.
- [Expo](https://docs.expo.dev/) - Tool used in mobile development with React Native.
- [TypeScript](https://www.typescriptlang.org/) - A superset of JavaScript that adds static typing to the language.
- [Zustand](https://zustand-demo.pmnd.rs/) - A minimalist and practical state management library for React and React Native.
- [Nativewild](https://www.nativewind.dev/v4/getting-started/expo-router) - Uses Tailwind CSS as a scripting language to create a universal styling system for React Native.
- [Tailwind](https://tailwindcss.com) - A utility-first CSS framework.
[](https://www.linkedin.com/in/f%C3%A1bio-nicolau-97bab92b3/)
[](mailto:[email protected])