Table of Contents
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.
PRD HLD One Pager Wireframes Coding Practices
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.
Following are the simple steps to run this project.
-
npm
npm install npm@latest -g
-
firebase
npm install firebase -g
-
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
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
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.
- [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