/ChallengeHandTalk

Project carried out with the purpose of implementing the technical challenge for the selection process for the position of React-Native developer at handtalk.

Primary LanguageTypeScript


Hand Talk

Project carried out with the purpose of implementing the technical challenge for the selection process for the position of React-Native developer at handtalk.

Table of Contents
  1. About the project
  2. Installation
  3. Important Points
  4. Prints of the developed application

About the project

Project carried out with the purpose of implementing the technical challenge for the selection process for the position of react native developer at handtalk.

The project consists of creating an application that meets the topics described in the requirements document.

Main points:

  • Rendering of 3D objects using THREE.js;
  • Authentication using Firebase;
  • Visual alteration of the objects from the Realtime Database query;

Built with

Technologies and frameworks that were used throughout the implementation of the application

Installation

  1. Clone the repository
 git clone https://github.com/GabrielPassos25/ChallengeHandTalk.git
  1. Install the dependencies
yarn
  1. Start the server
 expo start

  1. To run the aplication, just scan the QR code to open it on a physical device. (NOTE: The application, because of the emulator's native features, only works on physical devices. Make sure you are running on a PHYSICAL device)

  2. Evaluate the application 😄

Important Points

  • The application, because of the emulator's native features, only works on physical devices. Make sure you are running on a PHYSICAL device.

  • By default, all colors will start, directly in the database, as white. When you make the first change, the colors will already be synchronized automatically.

  • Below I list the credentials available to access the application:

Available Users
avaliador1@gmail.com
avaliador2@gmail.com
  • Colors available for alteration (NOTE: Follow exactly the way the color is written. The application is case sensitive.):
Available Colors
green
blue
red
white
purple
black
yellow

Main features to be added

  • Splash Screen
    • Create splash screen;
  • Login Screen
    • Add logo -> HandTalk;
    • Add animation using lootieview;
    • User authentication using firebase authenticator;
    • Validate correct email and password input;
    • Alert for invalid credentials;
  • Home Screen
    • Add options to render the selected geometric shape;
    • Add shadow to the geometric shape;
    • Rotate geometric shape;
    • Perform color synchronization with the realtime database;
    • Add input to change color and synchronize change in database;
    • Invalid color alert;
    • Avoid input overlap with the keyboard;
    • Invalid color bug in android -> Apparently, when trying to put an invalid color in android, the error condition is not being validated and the color goes invalid in the database. However, when trying to change the color to a valid color, the change occurs normally. (NOTE: THIS DOES NOT HAPPEN ON IOS. VALIDATION OCCURS AND THE COLOR IS NOT CHANGED)
    • Investigate -> On android, it is only possible to change the color of one picture at a time per session. Apparently we have to relog to avoid the error message and be able to change the color of two pictures.
  • Emulator Issue
    • Investigate -> Native emulator error

Prints

Mockup and style guide created to serve as a guide for project implementation using Figma.

Abaixo, ilustro algumas das telas implementadas, de acordo com o protótipo do figma.