Introducing Voyagger - Connecting people, Changing lives

Hey all, during August I worked on Voyagger for the Auth0 x Hashnode hackathon.

Inspiration

When I read about this competition I started brainstorming ideas when it struck me- A hassle-free delivery service. These tough times have made us all aware of the importance of our loved ones and through this app, users can bring a smile to their family and friends' faces by sending them their favorite delicacy, medicines, or a simple heartfelt gift.

The Tech 💻 I am using

Framework: Next.js

CSS: Tailwind CSS

Authentication: Auth0

Database: Firebase

Payment: Stripe

State management: Redux

Animations: Framer Motion

Authentication 🔒

To use most of the services in the app, you will need to be authenticated first. The authentication system is built with Auth0. If you want to add auth0 authentication to your app checkout "Add auth0 authentication to your Next.js app in less than 5 🖐🏻 minutes"

Biometrics

I have added a biometrics login where you can log in through your fingerprint or other biometrics. This is a feature present in Auth0.

Order food 😋

All the food categories and items have been stored in the database instead of hardcoding them so that none can manipulate the data like the price of the product.

You can select the food items you want from the various categories and buy them after adding them to the cart on the order food page.

How it works-

Every time you hit the plus icon it will add the product to the global redux store for accessing the data in different components and then to local storage for the persistence of the items.
If you click on the checkout button then it will create a checkout session with stripe. If you want to learn more about Stripe then checkout "Accept payments through Stripe in a Next.js app". For testing the checkout you can use the card 4242 4242 4242 4242 with random details.
After you have completed the payment, a Stripe webhook will be triggered which will add the order details to the database, which is Firebase in this case.

After placing the order you can view all the placed items on the order page.

Send a parcel 📦

The sending parcel page will show you a simple form where you need to add a few details required for pick up and delivery of the parcel like your address, the recipient's address, phone number, etc.

When you submit the form it will add the data to Firebase. Adding data to the Firebase firestore database is as simple as doing this

 db.collection("parcels").add({
      pickupaddress: "your address",
      zip: "zip code",
      weight: "weight of the package",
    });

Now you can see all the parcels you have added, on the parcel tracking page. If you want to share the details with a friend then simply click "Share with someone" and the link will be copied.

You might think that copying the link might be a hard task but it is a simple one-liner

navigator.clipboard.writeText("Text you want to copy");

Books 📚

I am using the Google books API to get so many books. Here is an example endpoint to get all the books-

https://www.googleapis.com/books/v1/volumes?q=Fiction

Order medicines 💊

The order medicines page is very similar to the order food page, the only difference being in the products.

PWA

This is a Progressive Web App (PWA), So you can even install it on your device 📱💻. If you want to make your web app a PWA checkout How to make a Next.js app a PWA