This project is a game. The game is a simple and interactive quizz that will trigger discussion for a couple. The idea came from after my wife and me were looking online for such game and got really disappointed by what we find. So I decide to make my own.
This repository is designed only for the frontend part of the application. I made everything with React Native. Once finish the application will be available on Google Play for free.
I do my continuous integration with Travis and my coverage is checked by Coveralls and Codeclimate. I also use CodeClimate for checking the level of maintainability of the code. I use Typescript for improving the quality of the code, making it simpler to read and less buggy. For the testing, I use Jess linked with Expo. And finally for the formatting, I use Prettier and just after EsLint for linting the code.
I document pretty well my code following JSDoc standard, so feel free to dig into my code and comment.
The following describe how the project is structured. It's an easy way for discovering the project and the way I organize the code.
For connecting to the API during the test, I use localtunnel for exposing the server to Expo. The server works on the port 5000, so I use the following commands :
npm install -g localtunnel
lt --port 5000 --subdomain couple-api
| As... | I want... | So that... |
|---|---|---|
| Player | I want to play | So that I can have fun |
| Player | I want to setup the duration of the game | So that the game is not too long |
| Player | I want to select topics or levels | So that everyone is comfortable |
| Player | I want to run the dices | So that I can choose who answer first |
| Player | I want to answer multiple questions | So that the game is long |
| Player | I want to answer only x questions | So that the game can stop |
| Player | I want to stop the game in the middle | So that I can take a pause |
| Player | I want to stop the current game anytime | So I can restart the game or change options |
| Player | I want to skip questions | So I can avoid questions |
| Admin | I want to add questions | So that I can increase the number of question |
| Admin | I want to edit questions | So that I can correct questions |
| Admin | I want to delete question | So that I can remove bad question |
| Folder's Name | Description of the folder |
|---|---|
| env | Contains the environment files |
| assets | Contains the public files |
| documentation | Regroup everything for documenting my way of thinking and docs |
| src | The source code of the app |
I improve the design of the app and created the mockup on FIGMA
Touch not working outside of a view
At the moment of development, there was a bug on react-native where a touch event will not be fired if an element was outside of it's parent. On Home, I was using the start button at the bottom of the screen outside of the square, so it could not work. For fixing that and still getting the desired effect, I create two squares. The bigger one is here for having the touch event inside a parent and the smaller square for creating the visual.
Styled-components does not have Pressable
Pressable is a touch event from react native but it have not been typed by styled-components. So typescript cannot be use with a Pressable. For bypassing the problem, I have to comeback on the normal StyleSheet creation.
Prettier does not want to use Camel Case on css
Prettier recognize css properties like backgroundColor as an error. So for fixing and bypassing the problem. I use another convention like background-color.
For running the project, simply use :
npm run start
It will then run a browser with a QR code that you can use on expo for testing the app.
For linting the code :
npm run lint
For formatting the code :
npm run format
For building an apk or app-bundle that could be use on Google Store or Apple Store :
npm run build-android
npm run build-ios
MIT - Copyright © JUSTAL Kevin