Video Demo: CS50x Final Project - Laggy or not
Laggy or Not is a web application that allows users to easily test their network latency and ping times. The application provides a simple and intuitive interface for initiating a ping test and displaying the results in a visually appealing way
The Laggy or Not application includes the following key features:
-
One-click start to begin pinging: Users can quickly start a ping test with a single click of the "Start Pinging" button.
-
Graph showing ping over time: The application displays a graph that visualizes the user's ping times over the course of the test.
-
Average, minimum, and maximum ping times: In addition to the graph, the app provides numerical metrics for the average, minimum, and maximum ping times recorded during the test.
The Laggy or Not project was built using the following technologies:
-
Astro: A modern, fast, and secure static site generator for building websites and web apps. Astro's focus on performance and developer experience made it an ideal choice for this project.
-
Tailwind CSS: A utility-first CSS framework that enabled rapid development of the application's custom design and user interface.
-
TypeScript: The inclusion of TypeScript provided type safety and better tooling support, which was particularly beneficial for the more complex parts of the codebase.
-
Chart.js: A popular open-source data visualization library that was used to create the ping time graph, allowing for clear and informative display of the test results.
1.Clone the project repository:
git clone https://github.com/dot-tsu/laggy-or-not.git
2.Install the dependencies:
cd laggy-or-not
npm install
3.Start the development server:
npm run dev
To use the Laggy or Not application, simply click the "Start Pinging" button to begin checking your ping and network latency. The application will display a graph showing your ping times over time, as well as the average, minimum, and maximum ping times recorded during the test.
Contributions are welcome! If you'd like to contribute to the project, please follow these guidelines:
-
Fork the repository
-
Create a new branch for your feature or bug fix
-
Make your changes and commit them
-
Push your changes to your fork
-
Submit a pull request
This project is licensed under the MIT License.
I would like to thank my friend Guro for the idea and name of the project. The inspiration for this application came from the need to quickly and easily test network performance, especially when dealing with potential lag or connectivity issues.
The development of Laggy or Not was a great learning experience for me, as it allowed me to explore the use of Astro, Tailwind CSS, TypeScript, and Chart.js. I debated several design choices throughout the project, such as the layout and styling of the application, the choice of visualization library, and the overall user experience.
Ultimately, I decided to prioritize simplicity and ease of use, which led me to choose a minimalist design and a straightforward user flow. The use of Astro allowed me to build a fast and lightweight application, while Tailwind CSS provided a solid foundation for the styling and UI components.
I'm proud of the end result and hope that Laggy or Not can be a useful tool for anyone looking to quickly test their network performance. If you have any feedback or suggestions for improvements, please don't hesitate to contribute to the project.