USCIS Case Status Tracker

This is a web application that allows users to check the status of their USCIS (United States Citizenship and Immigration Services) case using a receipt number. It integrates with the USCIS API and presents real-time updates regarding the case status. The app is built using React, Vite, Tailwind CSS, and OAuth 2.0 authentication to secure the API requests.

Demo

Features

1. Case Status Lookup:
   • Users can enter their 13-character USCIS receipt number to fetch the current status of their case.
2. Real-time Status:
   • Displays information such as the case status, form type, submission date, last update, and more.
3. Error Handling:
   • Displays appropriate error messages for invalid receipt numbers or API errors.
4. Staging Environment:
   • A staging section to view mock receipt numbers with case history data and those without it.
5. Responsive Design:
   • Built with Tailwind CSS to ensure the app is fully responsive on all devices.

How it works

1. Authentication
   • The app uses OAuth 2.0 with the Client Credentials Grant Type to authenticate requests to the USCIS API. The getAccessToken function handles fetching and caching the access token to ensure that it's reused until it expires.
2. Case Status Lookup
   • The user enters their USCIS receipt number, which is validated and used to make an API request to fetch case status details.
   • If the request is successful, the app displays the status and additional details like the submission date, the last update, and a history of previous case statuses.
   • If the receipt number is invalid or there is an issue with the request, an error message is shown.
3. Staging Section
   • The Staging page displays mock receipt numbers that can be used for testing the API. There are two sections: one for staging numbers with historical case data and one for those without case history.
4. Links Transformation
   • The app sanitizes and transforms any HTML links in the response using DOMPurify and applies additional styling and security attributes (like target="_blank" and rel="noopener noreferrer").

Technologies Used

• React: For building the user interface.
• Vite: For fast development and build setup.
• Tailwind CSS: For utility-first CSS styling.
• OAuth 2.0: For securing API calls using the Client Credentials grant type.
• DOMPurify: For sanitizing HTML content.
• html-react-parser: For converting HTML strings into React components.
• React Router: For routing between different pages (Home and Staging).
• Fetch API: For making API calls to get case status details.