Note

1st place for the React Native category at Let's Go Hackathon, organized by Mediamarkt

CarrierX is a React Native mobile application coded using TypeScript and Solidity. Its aim is to help Mediamarkt's employees have an easier time managing all the paraphernalia related to carriers and deliveries, while being secure, efficient and beautiful.

• Basic features
• Extras
• Even more extras
• Setup
• Blockchain ledger
• Code quality
• Security
• Wrapping off

Note: All features are production ready. State is persisted on MongoDB. Please refer to Setup

• Parcel inventory managing
  • Parcel addition
    • Add validated carrier information
    • Add validated parcel information
  • Parcel listing
  • Parcel handover state
• Parcel validation
  • Assignment to valid carrier
  • Valid parcel properties
• Pickup validation
  • Driver name and plate validation

Note: These only include the listed extra ideas

• Handover with signature
  • Persistent signature storage
  • Signature integrity with hashes
• Advanced overall validation
  • Parcel ID Regex
  • Driver ID Regex
  • Exact driver name expected
  • Exact driver plate expected
• Parcel bar code scanner

Note: These extras greatly extend the main app idea and improve the user experience and security.

• Production Ready
  • State saved on MongoDB
  • Actions reflect instantly
  • Ability to execute actions
• Blockchain ledger PoC
  • Custom Solidity Smart Contract
  • Deployed to the Goerli network
  • Verified on EtherScan
• Immutable ledger for main actions
  • Improve transparency
  • Main actions
    • PARCEL_ADD: Scan QR and add parcel
    • PARCEL_VIEW: View contents of parcel
    • ITEM_VIEW: View single item
    • DELIVERY_EXECUTE: Deliver (add carrier info)
    • DELIVERY_SUCCESS: Delivery given to carrier
    • DELIVERY_ERROR: Info is wrong
    • DELIVERY_CONFIRMED: Delivery confirmed by carrier
• Dark Mode
• Fully responsive
  • Supports multiple screen resolutions
  • Supports iOS + Android
• Completely typesafe

Since this app is production ready, the setup is a little bit longer.

To start with install all the necessary modules:

yarn
# npm install

1. Create a MongoDB atlas database. Please note the Cluster name down.
2. Enable the Data API and create a new API_KEY with read and write access. Here's the official documentation.
3. Install Atlas and connect to your database using the URI in MongoDB's web console. Here’s the official documentation. Select Compass for the driver option.
4. After successfully connecting. Create a new collection named items and a new database. Note the name down with the Cluster name of step 1.
5. Under the newly created database, create 4 collections, named:
   • carriers
   • parcels
   • ledger
   • signatures

Note: The names are case sensitive

Note: The required structure is a database with 5 collections inside: items, parcels, ledger, carriers and signatures

Note: Here's how the entries should look like under a database named data:

6. Go to ./utils.ts and change all variables with value CHANGE_ME (L:34 and onwards) for the required values. Do not remove the quotes, place the content inside.
7. Time to populate the database with predefined values. Run:

yarn run populate
# npm run populate

Note: This will add the provided data to the database to be able to use the app

Note: The urlEndpoint should end with /endpoint/data/v1

8. Run the app

npx expo start

9. Download Expo Go and scan the QR like stated here or use one of the builtin emulators. Installing them is out of the scope of this guide.

This application comes with a builtin ledger for all notable actions. This means that every time an employee does an action such as adding a parcel, delivering correctly or delivering incorrectly a parcel, it gets logged, and saved.

A proof of concept (PoC) exists under the blockend directory. It features a custom smart contract that is already deployed on the Goerli network. It keeps tracks immutably and transparently of all actions. More info about the contract can be seen here.

The idea is to implement a ledger on the blockchain company-wide. This would allow to quickly track down actions in case of errors, as well as cracking down on fraud. Moreover, due to its immutable nature, it would have the last word and guarantee a transparent zero-trust solution. It could easily be implemented to the public, so that they can keep track of their parcels without having to "trust" intermediary companies, such as the delivery one.

One of, if not the most, important aspects of code is quality. Therefore, this mobile application has been created using TypeScript and the latest ECMAScript features.

Advanced features such as generics, builtin types and mapped types have been used to ensure maintainability and ease of understanding.

Another key aspect of every application is security. Taking this into account, the application has been designed taking security and transparency greatly into consideration. Some security features are plate and name validation upon delivery, signature hashing to preserve the integrity of the signature and immutable event logging. On the event of an incorrect delivery (eg: wrong plate, wrong driver name), the event gets logged and displayed as an error on the ledger, so that employees are aware and can take the necessary actions.

This hackathon was a lot of fun, and the blockchain PoC would be a great addition to any existing application. Furthermore, designing and implementing a full stack application using typescript is marvelous, completely recommend it.