Challenge III

Badge em Desenvolvimento

This project is the Final Compass Challenge, which is a mobile application developed using React Native and CSS. The main goal of this challenge is to use the best practices and structuring of React Native and CSS, covering the main concepts and practices of these technologies.

Features

The application consists of the following screens:

  • Login screen using email and password credentials to authenticate in the app.
  • User registration screen with email, name, and a password.
  • Home screen with a list of empty cards.

Installation

  1. Clone the repository.
  2. Install the dependencies by running npm install in the terminal.
  3. Run the application using npm start in the terminal.

Folder Structure

The project's folder structure is organized in a way that is easy to navigate and understand. The main folders are:

  • src/components: This folder contains all the reusable components used in the application, such as Inputs, Footer, and Buttons.
  • src/screens: This folder contains all the screens of the application, such as LoginScreen, SignUpScreen, and HomeScreen.
  • src/global: This folder contains all the global files used in the application, such as validators, helpers, and constants.

How to Use

  1. Open the application on your mobile device.
  2. You will be presented with the Login screen. Enter your email and password credentials to authenticate in the app.
  3. If you don't have an account, click on the "Sign Up" button to go to the User Registration screen. Enter your email, name, and password, and click on the "Register" button.
  4. After registering, you will be redirected to the Login screen. Enter your new credentials to authenticate in the app.
  5. Once authenticated, you will be redirected to the Home screen, where you can see a list of empty cards.

Technologies Used

  • React Native
  • CSS
  • TypeScript

Credits

This project was developed as part of the Second Challenge. The design prototype used as a reference for this project can be found on Figma.