Tajdeed

Inspiration

Studying outside Sudan, I would occasionally need to renew my passport in order to be able to live outside without issues. Unless there is a missionary in the country I live in, I would be required to travel back to Sudan to just renew my passport. Which is time-consuming and a waste of money. Therefore I thought about digitizing the process so anyone, anywhere can apply for renewal without need to leave home.

What it does

A simple dashboard & form to allow Sudanese citizens to apply and manage their applications online and monitor them with streamlined ui. It consists of 6 simple steps:

Basic information: The user enters his personal information(i.g. Fullname, passport number, birthday, etc..)
Personal photo: The user opens the camera from the button then tries to satisfy the rules of the photo that are detected using face-api.js library to allow face detection to ensure the photo is clear and and person is visible.
Passport photo: The user takes a photo of his passport and try to match it with the corners shown. Then an OCR library called Tesseract.js is used to classify the photo and whether it is a passport or not .
Signature: The user draws his signature in the box with limited strokes to make sure it is a signature, not a drawing.
Location picking: the user chooses whether to receive the passport inside or outside Sudan, then selects the the country or the state where the user lives.
Review: A passport-like view is displayed in the screen to make the user check whether there are mistakes or not, if there is any, the user can go back and fix them then continue seamlessly.

Why did I choose to take the photo manually instead of uploading them as files?

It is known that in our today's world, modifying a photo became easier than eating a piece of cake. Therefore, to disallow that, I used the camera to capture the photo and used ai libraries to validate them to ensure they are as good as possible and to enforce integrity of information into the system.

How I built it

Frontend :

ReactJS
TailwindCSS
DaisyUI
Tesseract.js
Face-api.js

Backend :

Node.js (to apply backend logic and link with MongoDB)
Express.js (to create API to allow interaction between frontend and backend)
MongoDB Atlas (to store uses' and applications' data)
JWT (to authenticate and authorize users)
bcrypt ( to encrypt users' passwords)

Challenges I ran into

Applying face validation logic with AI models, and making them work with the application seamlessly
Designing a simple UI that anyone without an experience can use it and interact with it easily.
Using the cameras to take photos instead of uploading them as files takes a lot of effort and time.

Accomplishments that I am proud of

This is my first project in MERN Stack and I made this functioning system in only 2 weeks. I also never worked with cameras before this project. Ultimately this is my first hackathon to be a part of.

What I learned

I learned how to deal with Reactjs, Tailwind as tools. I learned how to make projects as fast as possible for production, to add new features and integrate them with the existing system as well as to validate inputs and outputs in the most organized way possible.

What's next for Tajdeed

Tajdeed must not be the only part of the government system that should be digitized, an entire digital ecostystem can be made to streamline all of Sudanese citizens needs. Tajdeed Should be a part of this comprehensive system. I also plan on migrating it from a website on the web into a React Native app that works seamlessly on mobile phone to make them the main method of using the service.