Reactive Ticket App: Seamlessly Track Network Metrics
Tags: githubhack23, react, vercel, github
Published: 2023-05-23 19:07:12

###&nbsp;:rocket:&nbsp;What I built

I just built a React app called "Reactive Ticket App" that allows users to generate virtual tickets and displays the current IP address, network status code, and the user agent for each unique visitor. It's a simple yet useful tool that can be used in various scenarios where user identification is required.

###&nbsp;:dart:&nbsp;Category Submission: 

DIY Deployments

###&nbsp;:link:&nbsp;App Link: 

[Reactive Ticket App](https://reactive-ticket-app.vercel.app/)

###&nbsp;:dart:&nbsp;Screenshots:

- **Desktop&nbsp;:point_down:**

![Reactive Ticket App Screenshot Desktop](https://github.com/foss2cyber/reactive-ticket-app/assets/78159236/b887b2c3-1f7a-4727-843f-0bbd0ea422cc)

- **Tablet&nbsp;:point_down:**

![Reactive Ticket App Screenshot Tablet](https://github.com/foss2cyber/reactive-ticket-app/assets/78159236/cc7930ae-1428-4e85-a7db-958239759d0b)

- **Mobile&nbsp;:point_down:**

![Reactive Ticket App Screenshot Mobile](https://github.com/foss2cyber/reactive-ticket-app/assets/78159236/909f7b82-997d-4872-bb66-4d2b063531ec)

###&nbsp;:dart:&nbsp;Description

The app utilizes React for the frontend, Axios for fetching data from the API endpoint, and Tailwind CSS for styling the user interface. The IP address, network status code, and user agent data are fetched from the API endpoint at `https://ipapi.co/json/` using Axios. The UI is designed using Tailwind CSS, which provides a flexible and responsive styling framework.

To ensure a seamless development process, I integrated the app into a CI/CD pipeline using GitHub Actions. This allowed me to automate the build, test, and deployment processes, ensuring that the app remains up-to-date and bug-free. Whenever changes are pushed to the main branch of the repository, the CI/CD pipeline triggers the necessary steps to build and deploy the app.

After completing the development and testing phases, I deployed the app to Vercel, a popular platform for hosting and deploying web applications. Vercel provides an easy-to-use interface for deploying React apps and offers various optimization features to ensure optimal performance.

###&nbsp;:link:&nbsp;Link to Source Code

You can find the source code for the "Reactive Ticket App" on GitHub: [GitHub Repository](https://github.com/foss2cyber/reactive-ticket-app)

###&nbsp;:dart:&nbsp;Permissive License

The app is released under the [MIT License](https://opensource.org/licenses/MIT), which allows for free use, modification, and distribution.

##&nbsp;:camera:&nbsp;Background

I decided to build this app as a solution to a common need in various web applications: identifying and tracking users. Many applications require some level of user identification, and displaying relevant information about the user can be helpful for analytics, troubleshooting, and security purposes.

I was inspired by the idea of creating a simple and lightweight tool that could generate virtual tickets and provide information about the user visiting the app. This could be useful in scenarios where user support is required, as the generated tickets could serve as unique identifiers for tracking and resolving user issues.

##&nbsp;:toolbox:&nbsp;How I built it

To build the "Reactive Ticket App," I utilized the power of React, a popular JavaScript library for building user interfaces. React's component-based architecture allowed me to create reusable and modular UI elements, making the development process efficient and scalable.

For fetching the user data, I used Axios, a widely used JavaScript library for making HTTP requests. I leveraged Axios to send a request to the API endpoint at `https://ipapi.co/json/` and retrieve the IP address, network status code, and user agent information for each visitor. Axios simplified the process of making asynchronous requests and handling the received data.

To style the user interface, I employed Tailwind CSS, a highly customizable CSS framework that provides utility classes for rapidly building responsive designs. Tailwind CSS allowed me to quickly apply styles to various UI components and create a visually appealing and user-friendly interface.

Throughout the development process, I utilized GitHub Actions, a powerful CI/CD tool provided by GitHub. By creating a CI/CD pipeline in the repository's workflow configuration, I automated the build, test, and deployment processes. This helped streamline development and ensure that the app remained in a deployable state at all times.

While working with GitHub Actions, I learned how to configure workflows, define custom actions, and integrate with various external services. It was an enriching experience that deepened my understanding of continuous integration and deployment practices.

###&nbsp;:dart:&nbsp;Additional Resources/Info

- [React Documentation](https://reactjs.org/docs)
- [Axios Documentation](https://axios-http.com/docs/intro)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [GitHub Actions Documentation](https://docs.github.com/en/actions)
- [Vercel Documentation](https://vercel.com/docs)

> **_By combining the power of React, Axios, Tailwind CSS,and Vercel, I was able to build a practical and efficient app that generates virtual tickets and provides insightful information about the user. It was a rewarding experience, and I hope this tool proves useful to others as well._**
>
> [Give it a try and let me know what you think!]()