It is offline-first, mobile-first, static, single page web application, that is hosted on github pages with custom domain: http://carsua.app
This is a project that allows user to search a ukrainian car plates using open data. It's stack of the next tools, libraries, services etc.:
- Typescript
- Webpack
- React
- Redux
- Redux Saga
- React Router
- Material UI
- Immer
- Workbox
- PWA
- Jest
- Cypress
- Node.js
- Azure Table Storage
- Azure Functions
- Azre DevOps
- Google/Facebook OAth2
- HTML5 Video/Audio
- Powershell
The extra services are using here:
- Disqus (Chat as a service)
- Automatic Number Plate Recognition API (Image recognizer as a Service)
- PlatesMania (Image photo by plate number as a Service)
- RIA Auto API (Car ads as a Service)
- National Highway Traffic Safety Administration API (Vin recognizer as a Service)
- Github Pages (Hosting as a Service)
- Let's Encrypt (Certificate as a Service)
- Azre DevOps (DevOps as a Service)
- Application Insights (Logs as a Service)
The extra Linters Analysis are used:
Roadmap (see projects):
- Integration/e2e tests, for instance cypress
IE11 supportAdd facebook hashtag posts, for instance https://www.facebook.com/hashtag/ве7116аа- Add crash test rating, for instance one.nhtsa.gov
- Add android and IOS apps using React Native
- Create BOT for facebook, telegram, viber, wasap
- Create own ML service for image recognizer
Add Auth0 or Azure Active Directory (Auth as a service)
The project is open for everyone, so don't hesitate to create issues and pull request.
It is pretend to use the rules of 12 factors:
- Codebase: Github
- Dependencies: npm
- Config: Dotenv
- Backing services: Azure Table Storage, Disqus, RIA, NHTSA, ANPR, PlatesMania
- Build, release, run: Azure DevOps
- Processes: Azure Table Storage, Disqus, RIA, NHTSA, ANPR, PlatesMania
- Port binding: webpack
- Concurrency: Azure Table Storage, Disqus, RIA, NHTSA, ANPR, PlatesMania
- Disposability: Azure DevOps, webpack
- Dev/prod parity: Azure DevOps, webpack
- Logs: Application Insights
- Admin processes: Azure DevOps, Github
According to DTAP/SDLC (Development Testing Acceptance Production/Software Development Life Cycle) here are the part of Testing/System testing/QA testing result:
- License Risks and Compliance Testing: WhiteSource Bolt
- Linters Analysis: SonarCloud
- CSS validation: jigsaw.w3.org
- HTML validation: validator.w3.org
- Localization Testing: validator.w3.org
- Accessibility Testing: lighthouse
- SEO Testing: lighthouse
- Best Practicies Testing: lighthouse
- Performance Testing: lighthouse
- Security Testing/Vulnerability Testing: OWASP ZAP Proxy
- Security Headers Testing: securityheaders
- Install/Uninstall Testing:
You'll need to install a few things before you have a working copy of the project.
Navigate into your workspace directory.
Run:
$ git clone https://github.com/Krak86/carplates.gitNavigate to the cloned repo's directory.
Run:
$ npm iAfterwards you need to execute extra steps:
- get you own keys (check .env_example file) (use .env to hide it from a project)
- create your own azure table storage tables or use local emulator (you need 2 tables: for cars and for favorites)
- create 2 azure functions, add code there (check azure folder)
- manually download CSV files, parse it and upload to azure table using azure storage explorer or API (check powershell folder, azure folder and columns.csv as a template for columns)
- adjust policy html file (check policy folder), manually generate PDF (use Chrome for convert html to pdf)
- adjust CNAME file in case if you want to use custom domain name
Run the local webpack-dev-server with livereload and autocompile on http://localhost:3000/
$ npm run devBuild the current application
$ npm run prodBuild the current application
$ npm run test- Development/Testing/Acceptance env: https://carsua.pp.ua
- Production env: http://carsua.app
##WIKI
- DTAP/SDLC (Development Testing Acceptance Production/Software Development Life Cycle)
- Security Testing
Hey dude! Help me out for a couple of 🍻!
