Emarat Frontend

Live URL

Table of Contents

About The Project
Getting Started
Contributors

About The Project

Most Resident Welfare Association (RWAs) and cooperative societies rely on physical methods to solve resident problems and to collect maintenance fees which is quite a tedious task and lacks clarity and status tracking. With E-Marat, we are providing digital solutions for all the society issues at one place. This will include payments tracking, complaints resolving, and public announcements system. We will also provide a Social space platform for residents to become acquainted with others by posting stories and sharing their thoughts.

Artefacts

PRD HLD One Pager Wireframes Coding Practices

Backend Repo

Mission:

To empower cooperative society digitally by providing a platform to avail facilities easily and to connect.

Vision:

To make all the members of a society feel like a family and to resolve all the problems at one place.

Goals:

Simple solutions for the problems.
All solutions are in one place.
Bridge the communication gap within the society.

Features:

Social Feed with realtime comments.
Simple and consistent UI.
Secure app with mobile Otp and JWT Token.
Multiple Payment Option.
Infinite scrolling to optimize long lists.

Built With

Getting Started

Following are the simple steps to run this project.

Prerequisites

npm
```
npm install npm@latest -g
```
firebase
```
npm install firebase -g
```

Installation

Clone the repo

git clone https://github.com/pesto-students/n6-emarat-fe-eta-6.git emarat-fe

Set environment variables

REACT_APP_PROXY=https://e-marat.herokuapp.com
REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_DATABASE_URL=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_FIREBASE_STORAGE_BUCKET=
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=
REACT_APP_FIREBASE_MEASUREMENT_ID=
REACT_APP_RAZORPAY_KEY_ID=
REACT_APP_SENTRY_DSN=
COUNTRY_CODE=+91
Install NPM packages
```
cd emarat-fe && npm install
```
Run
```
npm start
```
Open http://localhost:3000 to view it in the browser
Run Test cases
```
npm test
```

Test Credentials

To login in the app as admin use no. 9999999999 and otp 123456
To login in the app as resident use no. 8888888888 and otp 123456

Other Available Scripts

Linting
To lint our entire project expect build folder, we can run

npm run lint

we don't need to run the above commoand for every change in our file, VS code will automatically tell the places where ESLint rules are getting broke, thanks to .eslintrc.js which conatins all the standard rules for our project.

Pretty code
To make our coding practices standard with all our team members, we are using Prettier

npm run format

Pre-commit hook
In this project we are using husky to hook particular scripts to pre commit hook,
whenever we do git commit -m 'message' husky will call the pre-commit hook, from the hook we will call our scripts in the order of

npm run lint

npm run format

if anyone of this script gets failed our commit will not happen, so this will give standard structure to our code base.

End-To-End Test
To do end to end testing, we are using cypress.
Whenever we do npm run cypress cypress window will open and we can run any test suite that is written.
We can also use npm run cypress:headless to run all the end to end test suits at once.

Tools and Libraries

[Redux-Tool-Kit] - State Management
[Sentry] - Error Tracking
[Cypress] - End to End testing
[Jest] - Unit testing
[React-testing-Library] - Integration testing
[Recharts] - Charts
[Eslint] - Linting
[Prettier] - Automatic code formatting
[Tailwind] - CSS styling classes
[StyledComponents] - Styling

Contributors

Deepak Singh Rawat - GiHub - Email

Haris Rahman - GiHub - Email

dev-deepak-rawat/e-marat-frontend