/teamsapp

Team App is a React Native mobile app for learning and practicing app development. Create groups, add players to teams, and dive into React Native's features like navigation, theming, fonts, and more

Primary LanguageTypeScript

Team App


Technologies    |    Project    |    Layout   |    How to run   |   

commits GitHub language count Snyk Vulnerabilities for GitHub Repo Linkedin GitHub Sponsors

animated

๐Ÿ’ป Project

Team App is a basic React Native application created for practicing React Native development. This app allows users to manage groups, create new groups, and add players to teams within those groups.

๐Ÿง  Challenge

This project was developed during the Ignite course, a bootcamp offered by Rocketseat. The goal of creating this project was to practice React Native concepts, such as navigation, componentization, state management using Expo Managed Workflow, styled-components, immutability, interactive interfaces, and more.

๐ŸŽจ Features

  • Groups: View a list of all existing groups and create new groups.
  • New Group: Create a new group using a form. After creating a group, you will be redirected to the Players page.
  • Players: Add new players to two different teams (Team A and Team B) within a group. Prevents duplicate player names across teams and displays the number of players.

๐Ÿ“š Learning Objectives

Throughout this project, we focused on several key React Native concepts and techniques, including:

  • Navigation Stack
  • useCallback and useEffect with focus
  • Componentization
  • Passing data through navigation
  • Defining routes
  • Customizable theme implementation
  • Customizable font families

๐Ÿš€ How to run

To run the Team App on your local machine, follow these steps:

  1. Clone this repository:

    git clone https://github.com/tatacsd/teamsapp.git
  2. Install dependencies:

    npm install
        # or
    yarn install
  3. Start the development server:

    npx expo start

This will start the development server and provide instructions for running the app on different platforms (Android, iOS, web).

Alternatively, can downlad expo app on your mobile and scan the QR code to run the app on your device.

expo QR code

๐Ÿ›  Dependencies

Here are the main dependencies used in this project:

@expo-google-fonts/roboto
@react-native-async-storage/async-storage
@react-navigation/native
@react-navigation/native-stack
expo
expo-font
expo-status-bar
expo-updates
phosphor-react-native
react
react-native
react-native-safe-area-context
react-native-screens
react-native-svg
styled-components
Development Dependencies
@babel/core
@types/react
@types/react-native
@types/styled-components
@types/styled-components-react-native
babel-plugin-module-resolver
typescript

License

This project is licensed under the MIT License.

Acknowledgments

This app was created as a learning exercise and is not intended for production use. Special thanks to RocketSeat for providing the Ignite course and Rodrigo Gonรงalves the instructor of this course.