Welcome to the Development Portfolio
Explore a collection of developed apps and websites. By navigating to the "Apps" and "Websites" sections, you can dive deeper into each project to discover the features, technologies, source code and applied problem-solving approaches.
Stay tuned—more innovative projects are on the way, with exciting updates and new developments coming soon. I hope you enjoy exploring my work as much as I enjoyed creating it!
Repositories:
Contact:
Say hello at farirazvan@gmail.com
Macro-Gauge
Macro Gauge is a dynamic web application designed to help users track their meals, nutrient & water intake with ease.
Macro-Gauge
Macro-Gauge is a dynamic web application designed to help users track their meals, nutrient & water intake with ease. It allows users to search for foods, add them to a virtual cart, and view their daily intake through a visually intuitive calendar interface. The application also features animated interactions, real-time notifications, account creation and a full backend setup to save and load data for the user account from the server, so that users can pick up where they left off.
Key Features
- Search Functionality: Quickly search for foods using a food database API.
- Meal Tracking: Add foods to your cart and calendar to track calories, protein, fat, and carbs.
- Water Intake Tracking: Add your water intake and track it in the calendar
- Interactive Calendar: View your daily intake and manage your meals through a calendar interface.
- Monthly Chart: Check your monthly totals with an interactable chart
- Animations: Enjoy a smooth and engaging user experience with animations for adding items to the cart.
- DB & Server storage: Automatically save and load your data, ensuring that your progress is maintained on your account.
- Responsive Design: Fully responsive UI, optimized for desktop, mobile & tablets.
Technologies Used
- Frontend: HTML, CSS, JavaScript
- API: US Gov. Food Data Central API
- Backend: Node.js
- Database: MongoDB
- Hosting: AWS
Support for:
- Desktop
- Mobile
Github Repository:
- Not Available
- test
Project Roadmap
Project Roadmap Tracker is a powerful and flexible tool designed for planning and managing project milestones, deliverables, and tasks.
Project Roadmap
Project Roadmap Tracker is a powerful and flexible tool designed for planning and managing project milestones, deliverables, and tasks. The tool enables users to create columns for different project stages, add categories and tasks, and visually track the progress of each deliverable through an interactive roadmap interface. Users can easily manage their data through a drag-and-drop interface and customize the appearance of the roadmap. The save and load functionality is currently under development, starting with local storage, and will eventually include server-side data persistence.
Key Features
- Column Management: Create, edit, and delete columns representing different stages or phases of your project.
- Category and Task Management: Add categories and tasks under each column, with the ability to edit and remove them as needed.
- Drag-and-Drop Functionality: Easily rearrange columns using a simple drag-and-drop interface.
- Status Tracking: Update the status of each column (TENTATIVE, RELEASED, COMMITTED) and visually track project progress.
- Customizable Settings: Modify appearance settings, such as color schemes and layout preferences, to suit your project's needs.
- Data Persistence (In Progress): Currently being developed, the save and load functionality will initially use local storage and later integrate server and database solutions to maintain your progress.
Technologies Used
- Frontend: HTML, CSS, JavaScript
- Backend (Planned): Node.js
- Database (Planned): MongoDB
- Hosting (Planned): AWS
Support for:
- Desktop
Github Repository:
- Available
2D Solar System Explorer
Interactive 2D web application that allows users to explore the solar system in an educational 2D version.
2D Solar System Explorer
2D Solar System Explorer is an interactive 2D web application that allows users to explore the solar system. The app provides detailed information about the Sun, planets, moons, and the asteroid belt, all presented with engaging visuals and a smooth user experience.
Features
- Educational Solar System:
- Explore the solar system by clicking on celestial bodies to learn more about them.
- Detailed descriptions include key facts such as age, mass, gravity, and atmospheric composition.
- Sidebar Information Panel:
- A sidebar opens when a celestial body is selected, displaying relevant information and an image of the selected object.
- The sidebar can be closed to return to the main view.
- Hover Effects:
- Celestial bodies and moons have subtle hover effects, enhancing the interactive experience.
- The selected body is highlighted with a "grow" effect to focus attention.
- Starry Background:
- A dynamic starry background creates an immersive space environment with twinkling stars.
- Explore in 3D:
- A link to explore the solar system in a 3D view is provided, offering a more immersive experience. The 3D view essentially takes you to the 3D Solar System Project. For more solar systems, visit the Star Cluster project.
How It Works
- Select a Celestial Body: Click on any celestial body to open the sidebar with detailed information.
- Close the Sidebar: Click the "X" button on the sidebar to close it and return to the main view.
- Hover Over Elements: Hover over planets or moons to see them grow slightly, indicating they can be selected for more information.
- Explore in 3D: Use the provided link to explore the solar system in a 3D interactive environment.
Visual Design
- Celestial Bodies:
- Each planet and moon is represented with an image. The Sun is prominently displayed as the first celestial body, followed by all planets from left to right in order. Vertically listed below each planet are their most known moons.
- Special attention is given to size and scale, with larger celestial bodies like Jupiter and Saturn appearing more substantial.
- Sidebar:
- The sidebar is styled with a dark theme to match the overall space environment, displaying information in a structured and readable format.
- Starry Background:
- The starry background is animated, with stars twinkling softly to enhance the space ambiance.
Technologies used:
- Frontend: HTML / CSS / JS
Support for:
- Desktop
- Mobile
Github Repository:
- Available
3D Solar System
Simulation of our solar system complete with planets, moons, asteroids, and dynamic events. Navigate a flying saucer and explore celestial bodies.
3D Solar System
Welcome to the 3D Solar System project! This simulation uses Babylon.js to render a 3D representation of our solar system complete with planets, moons, asteroids, and dynamic events. Users can explore the system by navigating the flying saucer and interacting with celestial bodies.
NOTE: This is the standalone version of the SOL solar system, which is part of the Star Cluster project. The Star Cluster project includes multiple solar systems, besides SOL.
Features
- Interactive Solar System: Navigate through a realistic solar system with planets, moons, and other celestial bodies.
- Dynamic Events: Experience dynamic solar flares and comets passing by, with realistic effects and animations.
- Planetary Information Popups: Click on planets and moons to discover detailed information about each celestial body, including age, mass, atmosphere, diameter, and gravity.
- Asteroid Belts: View and animate two asteroid belts—between Mars and Jupiter and the Kuiper Belt beyond Neptune.
- Artificial Satellites: Launch and animate satellites orbiting Earth.
- Voyager Probe: Locate and interact with the Voyager spacecraft, featuring a unique lens flare effect.
- Lens Flare Effects: Dwarf planets and Voyager feature blinking lights to simulate lens flare effects.
- Adjustable Simulation Speed: Use the slider to adjust the simulation speed for a faster or slower exploration experience.
- Collision Detection: Enabled collision detection for realistic interactions between objects.
- Sidebar Discovery List: Track discovered celestial bodies in the sidebar, automatically updated as you explore.
- Comprehensive UI Controls: Interactive UI for speed adjustment, simulation controls, and navigation.
- Background with Twinkling Stars: Immerse yourself in a starry background with a realistic twinkling effect.
- Sun Rays and Glow Effects: Experience enhanced visuals with glow layers and volumetric light scattering effects around the sun.
- Planetary Orbits: View planetary orbits and toggle their visibility for a clear understanding of each planet's path.
- Welcome Popup: Initial overlay and welcome popup with navigation instructions for new users.
- Screenshot: Screenshot functionality that hides the UI elements and allows you to save a snapshot of the system from your desired angle and position.
Technologies used:
- Frontend: HTML / CSS / JS
- Library: Babylon.JS 3D rendering engine (WebGL based)
Support for:
- Desktop Only
Github Repository:
- Available
Star Cluster
Simulation of multiple known solar systems. Explore the available systems in a 3D fashion via navigation of a flying saucer.
Star Cluster
Welcome to the Star Cluster roject! This simulation uses Babylon.js to render a 3D representation of many known solar systems, including our solar system, complete with planets, moons, asteroids, and dynamic events. Users can explore the system by navigating the flying saucer and interacting with celestial bodies.
NOTE: This includes the 3D solar system project which is the most complete. Some solar systems are still in an early alpha or beta phase and may miss features that are present in the Sol solar system.
Features
- Interactive Solar System: Navigate through a realistic solar system with planets, moons, and other celestial bodies.
- Dynamic Events: Experience dynamic solar flares and comets passing by, with realistic effects and animations.
- Planetary Information Popups: Click on planets and moons to discover detailed information about each celestial body, including age, mass, atmosphere, diameter, and gravity.
- Asteroid Belts: View and animate two asteroid belts—between Mars and Jupiter and the Kuiper Belt beyond Neptune.
- Artificial Satellites: Launch and animate satellites orbiting Earth.
- Voyager Probe: Locate and interact with the Voyager spacecraft, featuring a unique lens flare effect.
- Lens Flare Effects: Dwarf planets and Voyager feature blinking lights to simulate lens flare effects.
- Adjustable Simulation Speed: Use the slider to adjust the simulation speed for a faster or slower exploration experience.
- Collision Detection: Enabled collision detection for realistic interactions between objects.
- Sidebar Discovery List: Track discovered celestial bodies in the sidebar, automatically updated as you explore.
- Comprehensive UI Controls: Interactive UI for speed adjustment, simulation controls, and navigation.
- Background with Twinkling Stars: Immerse yourself in a starry background with a realistic twinkling effect.
- Sun Rays and Glow Effects: Experience enhanced visuals with glow layers and volumetric light scattering effects around the sun.
- Planetary Orbits: View planetary orbits and toggle their visibility for a clear understanding of each planet's path.
- Welcome Popup: Initial overlay and welcome popup with navigation instructions for new users.
- Screenshot: Screenshot functionality that hides the UI elements and allows you to save a snapshot of the system from your desired angle and position.
Technologies used:
- Frontend: HTML / CSS / JS
- Library: Babylon.JS 3D rendering engine (WebGL based)
Support for:
- Desktop Only
Github Repository:
- Available
Space Dodger
Action-packed browser-based game where players navigate a spaceship through a field of asteroids, avoiding collisions and collecting power-ups.
Space Dodger
Space Dodger is an action-packed browser-based game where players navigate a spaceship through a field of asteroids, avoiding collisions and collecting power-ups. The game features progressively challenging levels, various power-ups, and a leaderboard to track your high scores.
Gameplay
In Asteroid Dodger, you control a spaceship using your mouse, moving it around the screen to dodge incoming asteroids. The goal is to survive as long as possible while collecting power-ups that enhance your abilities or provide additional points. The game becomes more difficult over time, with increased asteroid speed and spawn rates.
Features
- Power-Ups: Enhance your spaceship with various power-ups, including:
- Shield: Gain temporary invulnerability against asteroid collisions.
- Pulse Wave: Clear all asteroids on the screen with a powerful energy wave (note: this also removes all incoming on-screen power-ups, so choose wisely when to activate it!).
- Magnetize: Attract nearby power-ups for a limited time and increase power-up spawn chance.
- Extra Life: Gain additional lives to extend your playtime.
- Bullet Upgrade: Increase your firepower with more bullets and faster shooting rates.
- Difficulty Levels: The game ramps up in difficulty as time progresses, introducing faster asteroids, different asteroid directions, and more challenging obstacles.
- Leaderboard: Track your performance with the built-in leaderboard, which saves your top 10 high scores locally.
- Sound and Music: Sound effects and background music enhance the gameplay experience. You can adjust or mute the sound through the options menu.
Controls
- Movement: Move your spaceship by moving your mouse. The ship follows the cursor around the screen.
- Shooting: Click or hold the left mouse button to fire bullets at incoming asteroids (if bullets power-up was picked up).
Options Menu
The options menu allows you to customize sound volumes and clear the leaderboard:
- Sound: Toggle all sounds on or off.
- Background Music: Adjust the volume of the background music.
- FX Sounds: Adjust the volume of sound effects.
- Controls: Review the controls for movement and shooting.
- Clear Leaderboards: Reset the leaderboard data.
Leaderboards
The leaderboard displays your top 10 high scores, including the date and time of each run. Scores are saved locally, so you can always see your best performances on future re-visits.
Technologies used:
- Frontend: HTML / CSS / JS
Support for:
- Desktop Only
Github Repository:
- Available
Sticky Notes
The Sticky Notes App allows users to create and manage digital sticky notes on a virtual board.
Sticky Notes
The Sticky Notes App allows users to create and manage digital sticky notes on a virtual board. This application is designed to mimic the behavior of physical sticky notes, making it intuitive for organizing tasks, notes, and reminders. Users can add, move, and delete notes, as well as customize text and include hyperlinks.
Features
- Create Sticky Notes: Click on a blank area of the board to add notes.
- Drag and Drop: Rearrange notes on the board by dragging them to different positions.
- Edit Content: Edit the text within sticky notes. Formatting options include fonts, colors, and hyperlinks.
- Persistence: Notes are saved locally in your browser, allowing you to close the tab and return without losing your data.
- Share Functionality: [BETA] Generate a shareable URL to collaborate with others (Note: Large content may result in URLs that exceed typical length limits for browsers).
- Date & Tag settings: You can assign a date range (from - to) as well as a "tag" for each individual sticky note
- Filter: : Filtering by date range and tag is possible using the filter toolbar.
Technologies used:
- Frontend: HTML / CSS / JS
Support for:
- Desktop
- Mobile
Github Repository:
- Available
Journal App
Personal journal application designed to help users capture and document their daily experiences, thoughts, and memories.
Journal App
Journal App is a personal journal application designed to help users capture and document their daily experiences, thoughts, and memories. The app allows users to create, edit, and delete journal entries while providing options to add moods, weather conditions, locations, dates, cover images, and even emojis to make each entry unique and personalized.
Features
1. Create and Manage Entries
- Users can create new journal entries with ease.
- Each entry can include a title, text content, mood, weather, location, and date.
- Entries are displayed in a list format, allowing easy access and management.
2. Rich Text Editing
- Entries support rich text formatting, including bold, italic, underline, bullet points, and numbered lists.
- Users can adjust font size and font family for text within an entry.
- A custom color picker allows users to change text color, providing further customization.
- Entries support text alignment to left, right, or center.
3. Mood and Weather Tracking
- Users can select a mood for each entry, represented by an emoji.
- Weather conditions can also be documented, with temperature selection available in degrees Celsius.
4. Location and Date
- Document the location where the entry is being made.
- Select or modify the date for each entry, helping keep the journal organized chronologically.
5. Cover Images
- Add a cover image to each journal entry, with the ability to view it in a lightbox for an immersive experience.
- Cover images are also shown in the entry summary in the entry list dashboard.
6. Emoji Support
- An emoji picker is available for users to insert emojis directly into their journal entries.
7. Editing and Deletion
- Entries can be edited at any time, with the option to enable or disable editing mode.
- Deleting an entry is made secure with a confirmation prompt to prevent accidental deletions.
8. Data Persistence
- The app automatically saves entries to local storage, ensuring that no data is lost even if the page is refreshed or closed.
- Users can clear all stored data with a simple action, and the app will reflect the changes immediately.
9. User-Friendly Interface
- The app features a clean and intuitive interface, designed to provide a seamless journaling experience.
- Help and instructions are easily accessible within the app to guide new users.
Planned Features
- Entry Export: Future versions may include the ability to export individual entries in various file formats such as PDF or Word.
- Audio/Video Attachments: Possibility to attach and playback audio or video files within an entry.
Technologies used:
- Frontend: HTML / CSS / JS
Support for:
- Desktop
- Mobile
Github Repository:
- Available
Expense Tracker
User-friendly web-based tool designed to help you manage your finances by tracking your monthly income, expenses, and savings.
Expense tracker
Expense Tracker is a user-friendly web-based tool designed to help you manage your finances by tracking your monthly income, expenses, and savings. The application provides an easy-to-use interface for data entry and a dynamic chart to visualize your financial data over time.
Usage
In the Expense Tracker, you can input your monthly income and expenses, which automatically calculates your savings. The data is then visualized in a chart that tracks these variables over the course of the year. You can also export your data as a PDF or CSV file for further analysis or record-keeping.
Features
- Dynamic Input Table: Enter your financial data for each month, including:
- Monthly Income: Input your monthly earnings.
- Monthly Expenses: Input your monthly expenditures.
- Savings Calculation: Automatically calculates and displays your savings as the difference between income and expenses.
- Interactive Chart:
- Visualizes your financial data over the year, with lines representing income, expenses, and savings.
- The chart updates in real-time as you enter or modify your data.
- PDF Export:
- Save a snapshot of your financial table and chart as a PDF file.
- Ideal for sharing or printing your financial summaries.
- CSV Export:
- Export your financial data to a CSV file, which can be opened in spreadsheet software for further analysis.
- Random Data Population: Automatically populate the table with random income and expense values for testing or demonstration purposes.
- Clear Data: Quickly clear all entered data and reset the chart to start fresh.
Controls
- Update Chart: Click the "Update" button after entering or modifying data to refresh the chart.
- Clear Data: Click the "Clear" button to erase all inputs and reset the chart.
- Random Data: Click the "Random" button to fill the table with random data for quick testing.
- Export to PDF: Click the "Save as PDF" button to generate a PDF of your table and chart.
- Export to CSV: Click the "Export to CSV" button to download your data in CSV format.
Data Visualization
The app presents your financial data in a clear, easy-to-read format:
- Monthly Income: Displayed in blue on the chart.
- Monthly Expenses: Displayed in red on the chart.
- Savings: Displayed in green on the chart.
Technologies used:
- Frontend: HTML / CSS / JS
Support for:
- Desktop
- Mobile
Github Repository:
- Available
Calculator
Responsive, browser-based calculator that offers a simple and intuitive interface for performing arithmetic operations.
Calculator
Web Calculator is a responsive, browser-based calculator that offers a simple and intuitive interface for performing basic arithmetic operations. It also includes a history feature to keep track of your calculations.
Features
- Basic Arithmetic Operations:
- Perform addition, subtraction, multiplication, and division.
- Supports decimal numbers and operations up to 16 digits.
- Interactive History:
- Displays your last 10 calculations in a scrollable list, allowing you to track your recent operations.
- Automatically updates with each calculation.
- Responsive Design:
- Fully responsive layout that adapts to various screen sizes, making it usable on both desktop and mobile devices.
- Keyboard Support:
- Supports keyboard input for numbers, operations, and special keys such as Enter, Backspace, and Escape.
Controls
- Buttons:
- Click the buttons on the calculator to input numbers and operations.
- Use the "AC" button to clear all input, the "DEL" button to delete the last digit, and the "=" button to compute the result.
- Keyboard Shortcuts:
- Numbers (0-9) and the decimal point (.) can be entered directly from the keyboard.
- Operations (`+`, `-`, `*`, `/`) can be input using their respective keys (`/` becomes `÷`).
- Press `Enter` or `=` to compute the result, `Backspace` to delete the last digit, and `Escape` to clear the current input.
Layout
- Calculator Grid:
- The main interface consists of a 4x5 grid with large, easy-to-click buttons.
- The output screen shows the current and previous operands and the selected operation.
- History Section:
- A side panel displays a scrollable list of the last 10 calculations.
Styling
- Clean and Modern Design:
- Uses a soothing gradient background and semi-transparent buttons.
- The output display is designed with high contrast for better readability.
- Responsive design adjusts the layout and button sizes for smaller screens.
Technologies used:
- Frontend: HTML / CSS / JS
Support for:
- Desktop
- Mobile
Github Repository:
- Available
Coming Soon
Exciting updates and enhancements are on the way as apps are continuously improving with new features, refining user experiences, and optimizing performance.
Coming Soon
Exciting updates and enhancements are on the way as apps are continuously improving with new features, refining user experiences, and optimizing performance. Be on the lookout for brand-new applications that will bring innovative solutions and fresh, creative ideas to further enrich your digital journey. Stay tuned for more updates as we continue to expand and elevate our product offerings!
Stay Tuned, grab the code, reach out!
- Stay tuned by visiting and following the Github Account here.
- Some of the apps are open source and free for anyone who wants to grab the code and make their own version or further develop it
- Have any ideas, feedback or issues? Get in touch at farirazvan@gmail.com.
- test
Leadership Training Company
Designing and developing a fully custom WordPress website tailored for a leadership training company.
Leadership Training Company
SLA Leadership is a custom-built WordPress website developed for a leadership training company. The primary goal was to promote leadership development programs and resources through engaging content and intuitive navigation. The website was designed to provide a seamless user experience and encourage visitors to explore the company's offerings.
Key Features
- UI/UX Design: Focused on providing a clean, modern interface to make navigation easy and enhance user engagement. The website’s structure guides visitors to explore leadership programs, resources, and blog content.
- Responsive Design: Optimized for a smooth browsing experience across all devices, including desktops, tablets, and mobile phones.
- Program Listing & Signup: A dedicated section was created for showcasing leadership programs, complete with course details, dates, and an easy-to-use registration form.
- Content Management: Integrated with WordPress’s CMS, allowing the company to independently manage blog posts, program updates, and other content.
- SEO Optimized: Enhanced search visibility with on-page SEO techniques, meta tags, and structured content for better rankings.
Skills & Tools Used
- WordPress Website Design & Development
- Custom Theme Development
- UI/UX Design
- Content Management System (WordPress CMS)
- Responsive & SEO Optimization
Outcome
The website significantly improved the company's online presence, offering a professional and user-friendly platform to promote their leadership programs and resources. This resulted in increased engagement and a higher number of program sign-ups.
Github Repository:
- Not Available
- test
Wrought Iron Presentation
Professional WordPress website designed to showcase the craftsmanship and quality of custom wrought iron products.
Wrought Iron Presentation Website
Fariwoodart is a professional WordPress website designed to showcase the craftsmanship and quality of custom wrought iron products. The website highlights the artisan's portfolio through high-resolution imagery and well-organized galleries, allowing potential clients to explore the range of services offered. The site serves as both a showcase for the client’s expertise and an effective lead generation tool by providing multiple contact forms for inquiries.
Key Features
- Professional Presentation: The website was designed to reflect the craftsmanship and attention to detail that goes into each wrought iron product, with a strong emphasis on visual appeal.
- High-Resolution Imagery: Showcasing products with high-quality images and before-and-after galleries of wrought iron restoration projects, offering visitors a clear understanding of the quality and variety of work.
- Portfolio Galleries: Multiple galleries organized by product category (gates, fences, furniture, etc.) to allow visitors to easily browse and appreciate the range of designs and restoration work.
- Contact Forms for Inquiries: Integrated forms across the site to allow potential clients to easily get in touch for custom projects or inquiries about restoration services.
- Responsive Design: The website is fully responsive, ensuring a seamless browsing experience across all devices, including desktops, tablets, and smartphones.
Skills & Tools Used
- WordPress Website Design & Development
- Responsive Web Design
- Graphic Design (for image optimization and gallery presentation)
- Content Management (using WordPress CMS for easy updates)
Outcome
This project resulted in a visually stunning website that not only showcases the artistry of wrought ironwork but also serves as an effective lead generation tool. With its user-friendly galleries and contact forms, the website successfully captures inquiries from potential clients and showcases the range of services provided, from new custom creations to restoration projects.
Github Repository:
- Not Available
- test
Wrought Iron E-Commerce
Full-featured e-commerce platform developed using WooCommerce for a company specializing in wrought iron products.
Wrought Iron E-Commerce Website
Fariwoodart shop is a full-featured e-commerce platform developed using WooCommerce for a company specializing in wrought iron products. The goal was to enable the company to sell their handcrafted products online with ease. The website offers a smooth shopping experience through product categorization, intuitive filters, a streamlined checkout process, and secure payment gateways.
Key Features
- WooCommerce Integration: Seamless integration of the WooCommerce platform to manage product listings, handle customer orders, and facilitate secure payments.
- Product Categorization & Filtering: Organized product categories (e.g., gates, railings, outdoor furniture) and robust filtering options, allowing users to sort by price, popularity, and other attributes.
- Secure Payment Gateways: Integrated secure payment options (e.g., credit cards, PayPal) to ensure customer confidence during the purchase process.
- Seamless Checkout Process: A simplified and user-friendly checkout experience, featuring options like guest checkout, coupon code integration, and automatic tax/shipping calculations.
- Mobile-Optimized Design: Fully responsive and optimized for mobile users, ensuring a smooth shopping experience across all devices, including smartphones and tablets.
Skills & Tools Used
- WooCommerce Integration (for product and order management)
- Payment Gateway Integration (for secure transactions)
- E-commerce Development (with custom features for product comparison and reviews)
- Responsive Web Design
Outcome
This project resulted in a fully functional and professional e-commerce platform that allows the wrought iron company to showcase and sell their products online. The combination of intuitive product categorization, a seamless checkout process, and enhanced features like product comparison and customer reviews contributed to an increase in customer engagement and sales.
Github Repository:
- Not Available
- test
UTM Tracking Plugin For WordPress
UTM Tracking Plugin is a fully developed WordPress plugin available for free. This plugin simplifies UTM parameter tracking, enabling website owners to effectively monitor their marketing campaigns. It captures UTM parameters from incoming URLs and ensures they are retained throughout the user’s session.
UTM Tracking Plugin For WordPress
UTM Tracking Plugin is a fully developed WordPress plugin available for free. This plugin simplifies UTM parameter tracking, enabling website owners to effectively monitor their marketing campaigns. It captures UTM parameters from incoming URLs and ensures they are retained throughout the user’s session.
Key Features
- UTM Parameter Storage: Automatically captures UTM parameters from the URL and stores them in the browser's local storage for seamless tracking.
- Parameter Propagation: Appends stored UTM parameters to all internal links, ensuring campaign attribution data persists across user navigation.
- Dynamic URL Updates: Dynamically updates the current URL with stored UTM parameters for consistent tracking without altering user experience.
- Customizable Parameters: Allows users to define which UTM parameters to track via the plugin settings.
- Seamless Integration: Designed to integrate easily with any WordPress website, enhancing marketing analytics without affecting performance.
- Compatibility: Designed to be compatible and avoid conflicts with WordPress builders like Elementor,Thrive Architect,Guttenberg and others.
- Lightweight: The plugin is very lightweight, contains only 3 files, one for WP Settings page, one for JS and one for PHP with minimal code.
Skills & Tools Used
- WordPress Plugin Development: Leveraging PHP and JavaScript to build and integrate the plugin.
- JavaScript Logic: Dynamic tracking and manipulation of UTM parameters in the browser.
- LocalStorage API: For efficient and persistent client-side storage of UTM data.
- Custom WordPress Settings: Options page for defining UTM parameters to track.
Outcome
The UTM Tracking Plugin provides website owners with a simple yet powerful tool to enhance their campaign tracking capabilities. By retaining and propagating UTM parameters, it ensures accurate attribution of marketing efforts and improves the reliability of analytics data.
Github Repository:
- Available
- test
Coming Soon!
Exciting updates and new websites are on the way! We are currently working on a range of website projects, each tailored to offer unique solutions and enhanced user experiences.
Coming Soon!
Exciting updates and new websites are on the way! Under development are a range of website projects, including e-commerce platforms, portfolio sites, and more, each tailored to offer unique solutions and enhanced user experiences.
Stay Tuned, grab the code, reach out!
- Stay updated by visiting and following the Github Account here.
- Some of the websites will be open source and free for anyone interested in grabbing the code to build upon or further develop their own versions.
- Have any ideas, feedback, issues or in need of a website? Feel free to reach out at farirazvan@gmail.com.
- test