My Portfolio Project “Ija-Foot”

Salah Besbes
4 min readJun 21, 2021

by Med.Salah Besbes and Wael Ben Hassen

Introduction

FootBall is the most popular Sport in the world, with 3.5 billions fans.

Community is getting bigger and bigger, and amateur players are spending money on football fields rental , but the communication between players is slow and not efficient, for example if you want to play and your social circle is limited or your friends are busy, or maybe you are in a vacation, you will very much struggle to find a team or match.

As a team of two, we wanted to solve this problem by creating an App for this amateur community that reduce the complexity of communication.

Before we start we took the time we need to plan and discuss the needs of this project we created :

  • ULM Diagrams to understand the relations between parts of the project
  • Created Use Case and Transformed it to tasks in the Trello
  • during our development we follow one Rule, is that the branch Main must have only deployable code

we used Agile Scrum Methodology to dispatch the project into small tasks, and every person worked on full stack both front and back end.

Why “Ija-Foot” ?

I’m an amateur footBall Player and i frequently play we friends in some rental Stadium, but some times we can’t found the last player to create team, every one was searching in his social network for some player but we couldn't reach any one, i remember one day because we couldn't find any one the opposite team refuse to play with us, and some other day we were waiting for some opposite team but it cancel the appointment and couldn't reach us, some other day we couldn't find any team we know to play with with us, what i want to say is for this community of amateur player the communication between players is slow and not efficient.

The idea behind this project is to bring everyone closer and facilitate the search for amateur players or teams

Strategy and Architecture

Architecture of project

Layered architecture considers three layers: presentation, business and data. The presentation layer is responsible for the look of the app for the users. business layer maintains workflows and behaviors of the end users, providing the functionality logic and managing the local state.
Data layer responsible for communication between client and Firebase

For the Frontend we chose to use React-Native because its a cross platform technology that is mature, and have big developer community, also because it uses web technology in the development of mobile.

in the backend however, the choice is made on firebase one of the leading BaaS (Backend-as-a-Service) solutions on the market. it offers numerous services for mobile development, including a NO-SQL database with a real time listener on events that came handy in the implementation of the chat, also numerous other useful services.

Features:

  • autoSignIn with Google: implemented with auth service of firebase
  • State Management: implemented React State Management to handle the local state and reduce complexity of sharing data between components
  • Real Time listener of database: watching on changes on the database collections and updating the local state of the user (listing on chat messages, updates profile, member adding to team, …)

Difficult technical challenges

  • On the planning phase we dispatched work so that one person work on the front and the other on the backEnd but this strategy created so much conflicts and difficulties, so we decided to switch to agile scrum methodology so that we create a functional component working by it self
  • When we start working we were passing props to child components but when the project start to take shape we were over whelmed with props from every where so we have implemented state management together.
  • User must not quit the App to detect changes like add to team member, chat, detect team details changes, so we have to listen to changes in the database and change the local state, this is done by listing on the firebase db using onSnapshot method.

Technical interests

in this project we have learned that every thing never go as expected for the first time, we need to always try and improve our knowledge all time

we have learned:

  • How to plan and dispatch tasks in a project
  • Using UML language to illustrate relations between parts of the project
  • Using hooks a functional component
  • Managing the state
  • Using firebase cloud services

Although i have some experience in React-Js but in this project i learned new features and new hooks

conclusion

even if we could not finish all expected features, we really enjoy building this app, the curve line of learning is so high it gave us so much

About Me

I’m a junior full Stack developer recently graduated from Holberton School.

I have a Certificate From Boot Camp Go-MyCode , i have some Personal Project for different language: Python, C, React, Js, firBase

Email: salah.besbes9@gmail.com
Github: https://github.com/salahbesbes

--

--