Projects - Pedro Sorrentino

Stuff I’ve Built with Love ❤️

$ cat projects.txt

VideoStats

~/projects/videostats:

A YouTube analytics platform providing creators with in-depth insights into channel performance, audience engagement, and content optimization.

Technologies: Next.js, Turso, Redis, Clerk, Shadcn/ui, Chart.js

URL: https://videostats.vercel.app/

Screenshot of VideoStats

~/project/challenges:

  • Challenge: Efficiently handling large volumes of data from the YouTube API.
    Solution: Implemented a two-tiered caching system using Redis for frequently accessed data and Turso (SQLite) as the primary database. This reduced calls to the YouTube API by approximately 60% and improved the application's average response time by around 45%. Additionally, I used Web Workers to process data ingestion in the background, preventing UI freezes.
  • Challenge: Implementing secure and scalable authentication.
    Solution: Integrated Clerk for complete user lifecycle management, including registration, login, password recovery, and two-factor authentication (2FA). This not only enhanced security but also allowed me to focus on the core business logic of the application, reducing development time by roughly 20%.
  • Challenge: Intuitive and customizable data visualization.
    Solution: Developed a series of custom visualization components using Chart.js, integrated with Shadcn/ui styles. These components allow users to visualize key metrics such as views, watch time, subscribers, and engagement, with filtering options by time period and metric type. Clarity and ease of data interpretation were prioritized.
  • Challenge: Database scalability.
    Solution: By using Turso, the database automatically scales to handle user and data growth, ensuring consistent performance even with a large number of concurrent users.

~/project/results:

  • The platform is currently in beta and is used by over 50 YouTube creators to analyze their channel performance.
  • Users report an improved understanding of their audience and an easier time identifying content growth opportunities. Early feedback indicates that users find the platform's insights helpful in making data-driven decisions.
  • The application's architecture, based on Next.js and Vercel, allows for efficient horizontal scaling to handle traffic spikes and future growth.

Snapcraft

~/projects/snapcraft:

An online media editor allowing users to customize images and videos with watermarks, text overlays, and stickers, accessible from any device.

Technologies: Astro, React, Konva.js, Clerk, Shadcn/ui, ffmpeg.wasm

URL: https://snapcraft.site/

Screenshot of Snapcraft

~/project/challenges:

  • Challenge: Client-side video processing to reduce server costs and improve privacy.
    Solution: Implemented `ffmpeg.wasm`, a version of FFmpeg compiled to WebAssembly. This allows users to edit videos directly in their browsers, without needing to upload files to a server. This client-side architecture significantly reduces infrastructure costs and enhances user privacy, as video data never leaves the user's device.
  • Challenge: Creating an intuitive drag-and-drop editing interface.
    Solution: Utilized Konva.js, a JavaScript library that provides a high-level API for manipulating graphical elements on an HTML5 canvas. Konva.js facilitated the implementation of features such as drag-and-drop, resizing, rotating, and applying styles to images, text, and stickers. A smooth and responsive user experience was a key priority.
  • Challenge: Cross-browser and cross-device compatibility, and performance optimization.
    Solution: Performed extensive testing across a wide range of browsers (Chrome, Firefox, Safari, Edge) and devices (desktop, tablets, mobile) to ensure a consistent user experience. Optimized application performance using techniques such as lazy loading of images, code minification, and optimization of Konva.js operations to minimize browser resource usage.
  • Challenge: Application state management for media editing.
    Solution: Utilized Zustand for efficient and predictable application state management. Zustand enabled centralized management of the state of editor elements (images, text, stickers, etc.), facilitating the implementation of features like undo/redo and synchronization between different parts of the interface.

~/project/results:

  • Snapcraft allows users to edit videos and create visual content without the need for specialized software, directly in their browser.
  • The client-side architecture has proven to be highly scalable and cost-effective, requiring minimal server resources.
  • Users consistently praise the application's ease of use and responsiveness, even on lower-powered devices. Initial user testing indicates high satisfaction with the editing tools provided.

Roast My Website

~/projects/roast_my_website:

A community-driven platform where website owners can receive constructive feedback on their design and performance.

Technologies: Astro, Preact, Tailwind CSS, SQLite, Grok AI

URL: https://roastmyweb.site

Screenshot of Roast My Website

~/project/challenges:

  • Challenge: Implementing a real-time feedback system.
    Solution: Utilized Server-Sent Events (SSE) to send notifications to users in real-time when they receive new comments on their websites. SSE provides a persistent, unidirectional connection from the server to the client, making it ideal for this type of functionality. This implementation enhanced the platform's interactivity and encouraged greater user engagement.
  • Challenge: Integrating AI to provide automated and objective improvement suggestions.
    Solution: Integrated the Grok AI API, a language model with web analysis capabilities. Grok AI analyzes the HTML, CSS, and JavaScript code of websites provided by users and generates suggestions for improvement in areas such as accessibility, performance, SEO, and design. This functionality adds significant value to the platform, providing instant and objective feedback.
  • Challenge: Community building and content moderation.
    Solution: Implemented a user registration and login system using Clerk. Developed a reporting system that allows users to flag inappropriate or abusive comments. Clear community rules were established, and a moderation system was implemented to ensure a respectful and constructive environment.
  • Challenge: User Interface Design.
    Solution: Used Tailwind CSS to create a clean, modern, and responsive user interface. Simplicity and ease of use were prioritized, allowing users to submit their websites and receive feedback quickly and intuitively.

~/project/results:

  • Roast My Website facilitates the review of over 150 websites, providing users with actionable feedback to improve their online presence.
  • The platform fosters a growing community of developers and designers who share knowledge and provide constructive criticism.
  • The integration of Grok AI has proven effective in identifying common design and performance issues, offering valuable insights alongside community feedback.

Expired Domain Finder

~/projects/expired_domain_finder:

An SEO tool to discover valuable expired domains, providing detailed analytics to identify potential opportunities.

Technologies: Astro, Preact, Turso, Tailwind CSS, Node.js

URL: https://expireddomain.site

Screenshot of Expired Domain Finder

~/project/challenges:

  • Challenge: Efficiently collecting and processing large amounts of expired domain data.
    Solution: Developed a custom scraper in Node.js using libraries such as `axios` for making HTTP requests and `cheerio` for parsing the HTML of data sources. Implemented responsible web scraping techniques, including respecting `robots.txt` and implementing delays to avoid overloading target servers. The collected data is efficiently stored and processed using Turso (SQLite).
  • Challenge: Analyzing the quality and value of expired domains.
    Solution: Integrated the Ahrefs and Majestic APIs to obtain key SEO metrics such as Domain Rating (DR), URL Rating (UR), number of backlinks, referring domains, and estimated organic traffic. Developed a custom scoring algorithm that combines these metrics to assess the potential value of each expired domain, enabling users to quickly identify promising opportunities.
  • Challenge: Presenting results in a clear and useful way, with filtering and sorting options.
    Solution: Designed an interactive user interface with Preact and Tailwind CSS. The interface allows users to search for expired domains by keyword, filter by SEO metrics (DR, UR, backlinks, etc.), and sort the results according to different criteria. Speed and ease of use were prioritized, enabling users to efficiently find domains that meet their requirements.

~/project/results:

  • Expired Domain Finder provides users with a streamlined way to discover potentially valuable expired domains for SEO purposes.
  • The tool aggregates data from multiple sources, offering a comprehensive view of each domain's key metrics.
  • The user-friendly interface and filtering capabilities allow for efficient identification of relevant domains based on specific criteria.

Fly Fast

~/projects/fly_fast:

A flight booking platform offering real-time flight data, price comparisons, and a seamless booking experience.

Technologies: Next.js, Tailwind CSS, MongoDB, AMADEUS API

URL: https://fly-fast.vercel.app/

Screenshot of Fly Fast

~/project/challenges:

  • Challenge: Integration with the Amadeus API for real-time flight data.
    Solution: Utilized the official Amadeus SDK for Node.js to interact with the Amadeus API. Implemented authentication, error handling, API limit management (to avoid exceeding quotas), and conversion of API data to a consistent and easy-to-use format within the application. Robust error handling and retry mechanisms were implemented to ensure data reliability.
  • Challenge: Creating an efficient, responsive, and user-friendly flight search interface.
    Solution: Utilized Next.js to build a fast and SEO-friendly user interface. Leveraged Next.js's Server-Side Rendering (SSR) and Static Site Generation (SSG) capabilities to optimize loading times and the overall user experience. The interface was designed using Tailwind CSS, with custom components for date selection (using a date picker), airport selection (with autocomplete), passenger selection, and for displaying search results (with filtering and sorting options).
  • Challenge: Secure payment handling and compliance with PCI DSS regulations.
    Solution: Integrated Stripe as the payment gateway. Stripe provides a secure and easy-to-use API for processing credit and debit card payments. Utilized Stripe Elements, pre-built UI components, to ensure compliance with PCI DSS (Payment Card Industry Data Security Standard), as sensitive card data never reaches the application's servers. Implemented additional security measures, including server-side data validation and protection against Cross-Site Request Forgery (CSRF) attacks.

~/project/results:

  • Fly Fast offers a streamlined and intuitive flight search and booking experience.
  • The integration with the Amadeus API provides access to a comprehensive range of flights and fares from various airlines.
  • The platform adheres to industry-standard security practices for payment processing, ensuring the safety of user data.

$

$ Explore my work:

~/about - About me

~/projects - Projects I've worked on

~/resources - Resources I've used

~/docs - My last blog posts

~/contact - Contact me

~/gitHub - Visit my GitHub profile