DEV Community: Murtjiz Naqvi

Built a subscription reminder with Next.js and Supabase.

Murtjiz Naqvi — Tue, 17 Mar 2026 19:02:46 +0000

Phase 1: Marketing & Landing Page (The Foundation)

Modular Architecture: Implemented a Marketing Layout to ensure the Header and Footer remain consistent across the Home, About, and Contact pages for better code maintainability.
Premium Hero Section: Designed an eye-catching top fold using high-quality gradients and bold typography to drive "Get Started" actions.
Responsive Features Grid: Developed a benefits-driven section using a flexible Tailwind grid that adapts seamlessly from mobile to desktop.
Native Dark Mode: Integrated built-in dark mode support with smooth transition-colors for a polished, high-end user experience.
Final CTA: Concluded the user journey with a strategic "Call to Action" section to convert scrolling visitors into active leads.

Phase 2: Dynamic Authentication System

Single-Page Auth: Implemented a dynamic login/signup page that switches states without extra routes. It automatically injects or hides the "Full Name" field based on the user's choice.

Enhanced UX: Added an "Eye" icon for password visibility, interactive high-contrast borders on focus, and loading spinners for state feedback.
Supabase Auth Integration: Connected a custom useAuth hook to handle secure registration, session management, and automatic redirection to the /dashboard.
Security & Recovery: Added client-side validation (e.g., 6-character password minimum), error alert cards for failed logins, and a secure "Forgot Password" flow.

Phase 3: The Subscription Engine (Dashboard & Logic)

Subscription Dashboard: Created a unified hub to manage payments, using Supabase RLS to ensure users only access their own data.
Smart Stats Overview: Built four real-time cards tracking Monthly Cost, Active Subscriptions, WhatsApp Success Rate, and Payments Due This Week.

Advanced Calculation Logic: Developed a system that normalizes all costs (Yearly/Weekly) into a monthly average and uses a getDaysUntilPayment utility for accurate countdowns.
Interactive Cards: Designed UI cards that are color-coded by urgency (Red for overdue, Orange for 7-day warnings, Blue for future dates) with instant Pause, Edit, and Delete controls.

Phase 4: Smart Data Entry (The Create Form)

Zod Validation: Built a "Smart Form" that prevents empty names, limits costs to a $999k ceiling, and blocks past dates.
Automated Intelligence: The form automatically calculates the "Next Payment Date" when a user selects a start date and cycle.

UX Optimization: Added auto-capitalization for service names and a "Protocol Fixer" that automatically adds https:// to website URLs.

Phase 5: Meta WhatsApp Integration & Monitoring

Official Meta API: Connected the application to the Meta WhatsApp Business API to send automated, reliable payment reminders.
The Monitoring Hub: Built a notification feed powered by Supabase Real-time. When the Meta API sends a message, the header's notification bell updates instantly without a page refresh.
Status Tracking: Implemented status indicators (Green Check for sent, Red Alert for failure) to log the history, timestamp, and phone number of every WhatsApp reminder.

Phase 6: Global Settings & Personalization

WhatsApp Configuration: Created a secure settings field for users to link their phone numbers using international format validation.

Timezone Calibration: Added a global timezone selector. If a user moves from Asia/Karachi to another region, the app automatically recalibrates all payment and reminder schedules to match their local time.
Profile Sync: All settings are stored in a central user_profiles table, acting as the single source of truth for both the frontend and backend Edge Functions. Phase 6: Infrastructure & Environment To securely connect all these moving parts, the project relies on the following environment configuration:

Link to Github:https://github.com/syedmurtjiz/Socialmedia-whatsapp-reminders-
Link to Spotify-Clone :https://duepilot.vercel.app/
Dedicated to crafting high-quality, user-centric web-applications. Explore my work and learn more about my journey at:
https://syedmurtjizdev.vercel.app/

EmailJS in a Next.js

Murtjiz Naqvi — Fri, 23 May 2025 10:34:33 +0000

(Step-by-Step Guide)

Create an email account on email.js (https://www.emailjs.com)
Sign up and log in to your account
Connect or link your email with email.js
Then the following page will be shown

Click on the Add New Services Button
Then click on Gmail when the services open
Then, click on the Connect Account Button to connect your email. After that, click on the create service button
After creation, you will get service from that
Then Click on Email Template
Then click on the Create New Template Button

Then click on the Create Template button
Then, set the template that you want and click the save button
Then, go back to the Email Template and get your templateId
Then open the account from the left sidebar and get your public key
After that Install EmailJS in Next.js
npm install @emailjs/browser
After that, set them in the .env file of your project
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqj2ii14f0xuft3fffdv.png
After that, use the code below or set up in your code

'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { FaEnvelope, FaMapMarkerAlt, FaWhatsapp, FaSpinner, FaCheck } from 'react-icons/fa';
import Link from 'next/link';
import TypewriterText from '../TypewriterText';
import emailjs from '@emailjs/browser';

export default function ContactForm() {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    defaultValues: {
      firstName: '',
      email: '',
      message: ''
    }
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  const onSubmit = async (data) => {
    if (isSubmitting) return;

    setIsSubmitting(true);
    setIsSuccess(false);

    const templateParams = {
      from_name: data.firstName.trim(),
      from_email: data.email,
      to_email: process.env.NEXT_PUBLIC_EMAILJS_RECIPIENT_EMAIL || 'naqvi@gmail.com',
      message: data.message,
      reply_to: data.email
    };

    try {
      await emailjs.send(
        process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID,
        process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID,
        templateParams,
        process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY
      );

      reset();
      setIsSuccess(true);
      setTimeout(() => setIsSuccess(false), 5000);
    } catch (error) {
      console.error('Email sending failed:', error);
      alert('Failed to send message. Please try again or contact me directly at murtjiznaqvi@gmail.com');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div
      className="p-10 rounded-2xl w-full max-w-6xl mx-auto relative overflow-hidden 
      transform transition-all duration-500 hover:scale-[1.02] border border-gray-200 text-gray-900"
      id="contact"
      aria-labelledby="contact-heading"
      role="region"
    >
      <div className="absolute -top-1/2 -left-1/2 w-[200%] h-[200%] bg-gradient-to-r from-purple-500/10 via-indigo-500/10 to-pink-500/10 opacity-50 blur-3xl rotate-45 -z-10"></div>
      <div className="max-w-6xl mx-auto rounded-xl p-8 md:p-12">
        <div className="absolute inset-0 blur-3xl opacity-40 z-0" />

        <div className="text-center mb-8">
          <TypewriterText text="Get in Touch" id="contact-heading" />
        </div>

        <div className="mb-8 text-center">
          <p className="text-gray-600 mb-4">
            I specialize in crafting elegant, user-focused digital solutions. Let's discuss how I can help bring your ideas to life.
          </p>
          {isSuccess && (
            <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
              <span className="block sm:inline">Message sent successfully! I'll get back to you soon.</span>
            </div>
          )}
        </div>

          <form
            onSubmit={handleSubmit(onSubmit)}
            className="flex-1 space-y-6"
            aria-label="Contact Form"
            noValidate
          >
            <div>
              <label htmlFor="firstName" className="sr-only">First Name</label>
              <input
                id="firstName"
                type="text"
                placeholder="First Name"
                className={`w-full px-4 py-3 rounded-lg border ${
                  errors.firstName ? 'border-red-500' : 'border-gray-300 focus:border-indigo-500'
                } bg-white`}
                {...register('firstName', { required: 'First name is required' })}
                aria-invalid={errors.firstName ? 'true' : 'false'}
                aria-describedby={errors.firstName ? 'firstName-error' : undefined}
              />
              {errors.firstName && (
                <p id="firstName-error" className="text-red-400 text-sm mt-1">{errors.firstName.message}</p>
              )}
            </div>

            <div>
              <label htmlFor="email" className="sr-only">Email Address</label>
              <input
                id="email"
                type="email"
                placeholder="Email Address"
                className={`w-full px-4 py-3 rounded-lg border ${
                  errors.email ? 'border-red-500' : 'border-gray-300 focus:border-indigo-500'
                } bg-white`}
                {...register('email', {
                  required: 'Email address is required',
                  pattern: {
                    value: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
                    message: 'Please enter a valid email address',
                  },
                })}
                aria-invalid={errors.email ? 'true' : 'false'}
                aria-describedby={errors.email ? 'email-error' : undefined}
              />
              {errors.email && (
                <p id="email-error" className="text-red-400 text-sm mt-1">{errors.email.message}</p>
              )}
            </div>

            <div>
              <label htmlFor="message" className="sr-only">Message</label>
              <textarea
                id="message"
                placeholder="Your Message"
                rows={5}
                className={`w-full px-4 py-3 rounded-lg border ${
                  errors.message ? 'border-red-500' : 'border-gray-300 focus:border-indigo-500'
                } bg-white min-h-[150px]`}
                {...register('message', { required: 'Message is required' })}
                aria-invalid={errors.message ? 'true' : 'false'}
                aria-describedby={errors.message ? 'message-error' : undefined}
              />
              {errors.message && (
                <p id="message-error" className="text-red-400 text-sm mt-1">{errors.message.message}</p>
              )}
            </div>

            <button
              type="submit"
              className={`w-full py-3 px-6 rounded-lg font-medium transition-all ${
                isSuccess 
                  ? 'bg-green-600 text-white' 
                  : 'bg-[#0077B5] text-white hover:bg-[#00629c]'
              } flex items-center justify-center gap-2`}
              disabled={isSubmitting}
              aria-busy={isSubmitting}
            >
              {isSubmitting ? (
                <>
                  <FaSpinner className="animate-spin h-5 w-5" />
                  <span>Sending...</span>
                </>
              ) : isSuccess ? (
                <>
                  <FaCheck className="h-5 w-5" />
                  <span>Message Sent!</span>
                </>
              ) : (
                'Submit Message'
              )}
            </button>
          </form>


      </div>
    </div>
  );
}

Link to Github:https://github.com/syedmurtjiz/
Dedicated to crafting high-quality, user-centric web-applications. Explore my work and learn more about my journey at:https://syedmurtjiz-next.netlify.app/

How I made a desktop application for my portfolio using electron JS

Murtjiz Naqvi — Mon, 25 Nov 2024 16:37:28 +0000

1: First of all I am building my react app using npm run build
command.
2: After that I run npm i electron --save-dev command that's
installs Electron as a development need.
3: After that I run npm i cors express --save command that's
installs Express and CORS in your portfolio project.
4: After that i will create a electron-main.js file inside the
root and that's place after the src folder.you can view that
structure in the given image below

5: After that inserting that code -->

const { app, BrowserWindow } = require("electron");
const path = require("path");
const express = require("express");
const cors = require("cors");
const localServerApp = express();
const PORT = 8000;
const startLocalServer = (done) => {
  localServerApp.use(express.json({ limit: "100mb" }));
  localServerApp.use(cors());
  localServerApp.use(express.static('./build/'));
  localServerApp.listen(PORT, async () => {
    console.log("Server Started on PORT ", PORT);
    done();
  });
};

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  mainWindow.loadURL("http://localhost:" + PORT);

}

app.whenReady().then(() => {
  startLocalServer(createWindow);

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

6: After that inserting "electron": "electron ." that command
inside the script and inside the package.json file.you can
view it in the given image below:

7: Ater that inserting the "main" to point the electron-main.js
file in package.json.you can view it in the given image below:

8: After that i am running the electron desktop app by running
the npm run electron command in terminal. and that will show
my portfolio in electron desktop app.You can view it in the
given image below:

SASS in 2024

Murtjiz Naqvi — Mon, 04 Nov 2024 14:42:39 +0000

Why Sass?
Sass is a CSS codegenerator and used for styling and thats allows developers to used thats features which are not avalible in CSS such as variables, nested rules, mixin and functions. That makes code more readable and and easy to maintain.

Advantages:

Saved time and effort, beacaue we don't repeat classes names again and again.
In Saas mixin and partial will allow us to renewable code chunks. 3.In Saas variables allow us to reuse the values from style sheets. 4.In Saas we have generate css easily and quickly beacause its contains less code.

Disadvantages:

1.It is difficult to rectify.
2.The code created by Sass must be compiled into Css, which can take extra development process.

Why Css ?
Css stands for Cascading style sheet and that's used to reshape the unstructured layout into structured layout and make the user interface attractive,for example we have write your name in html and you want to designed it then you can use css and designed your name.

Benifits:

1.Designed user interface attractive and responsive.
2.We can position our webpage with our own aim.
3.Easy to write and understand.

Disadvantages:

1.Apply on each classes or id's partially.
2.It's contains large code.

Final Decree:

This is what I believe after studying Css and Sass:
1.Basically Css not depends on sass beacause we designed the page easily with the knowledge of Css but the peoblem is that we can't use variables, nested rules, mixins, imports, inheritance, built-in-functions in plain css.
2.On the other hand Sass depends on css beacuse we designed the page in sass using css knowledge and its more better than css because in that we use variables, nested rules, mixins, imports, inheritance, built-in-functions through this we can safe our time.

I have done my learning on Css and Sass from codecademy you can see my certifications below:

CSS Certificate:

Sass Certificate

Visit my homepage:https://syedmurtjiz.github.io/

I made Spotify client using react.js

Murtjiz Naqvi — Mon, 07 Oct 2024 15:23:10 +0000

Steps to Create a Spotify Application

Access the Spotify Developer Dashboard:

1.1: Navigate to the Spotify Developer Dashboard to initiate the process of application creation.

1.2: Complete the application setup by providing requisite details, including:

1.2.1: A valid website URL that represents your application.

1.2.2: A redirect URL, which for local development, should be set to localhost:3000 to facilitate authentication.

1.3: Securely copy the Client ID, which serves as a unique identifier for your application within the Spotify ecosystem.

2: Establish a Components Directory:

2.1: Create a components directory within the src folder of your project structure to organize your codebase efficiently.

3: Develop Individual Components:

3.1: Construct the following React components, each serving a distinct purpose in the application:

3.1.1: Login.jsx: Responsible for user authentication and login functionalities.

3.1.2 Navbar.jsx: Contains navigation elements for seamless user interaction.

3.1.3: Sidebar.jsx: Displays important application links and features.

3.1.4: Body.jsx: Houses the main content area, displaying playlists and track information.

3.1.5: CurrentTrack.jsx: Presents details of the currently playing track.

3.1.6: PlayerControls.jsx: Integrates controls for music playback.

3.1.7: Volume.jsx: Enables volume adjustment features for the audio playback.

3.1.8: Footer.jsx: Includes additional components to enhance the user interface.

3.1.9: Spotify.jsx: Serves as the overarching component to manage the application's state and logic.

3.1.10: Reducer.jsx: Implements state management functionalities for effective data handling.

4: Implement the Login Component (Login.jsx):

4.1: Incorporate an aesthetically pleasing image alongside a prominent login button within a styled container to enhance user engagement.

4.2: Implement a handleClick function that triggers the login sequence, facilitating user access to the application.

4.3: Define the client_id, which acts as the application’s unique identifier in the Spotify API.

4.4: Specify a redirect_uri, which directs users back to your application post-authentication.

4.5: Upon the button click event, dispatch a request to the Spotify API, ensuring the inclusion of necessary scopes for user data access.

4.6: Utilize a window function to dynamically generate the authorization URL, allowing for flexible integration of user-specific parameters.

4.7: Apply bespoke CSS styles to elevate the visual appeal of the container, ensuring a cohesive design aesthetic.

5: Construct the Navbar Component (Navbar.jsx):

5.1: Import essential icons and organize them within a sleek, responsive container to facilitate intuitive navigation.

5.2: Import and apply the associated CSS styles, achieving a polished and professional appearance.

6: Develop the Sidebar Component (Sidebar.jsx):

6.1: Prominently showcase the Spotify logo at the top to reinforce brand identity.

6.2: Integrate icons for Home, Search, and Library functionalities to streamline user interaction.

6.3: Create a Playlist section that leverages Axios for efficient playlist management and interactions.

7: Implement the Body Component (Body.jsx):

7.1 Employ the useEffect hook to fetch initial playlist data asynchronously via Axios, ensuring optimal data retrieval.

7.2: Extract and display track titles, album names, and durations from Spotify playlists, providing users with a comprehensive view of available music.

7.3: Implement a msToMinutesAndSeconds function to convert track durations into a user-friendly format, enhancing readability.

7.4: Define a Playlist function that dispatches requests to the Spotify API, retrieving and displaying detailed information for individual tracks.

8: Create the Current Track Component (CurrentTrack.jsx):

8.1: Utilize Axios to retrieve real-time details of the currently playing track from the Spotify API.

8.2: Manage the authentication token and the current playing state using the useState and useContext hooks, ensuring seamless state management.

8.3: Implement robust error handling mechanisms to log any API request failures, facilitating debugging and maintenance.

9: Develop the Player Controls Component (PlayerControls.jsx):

9.1: Integrate intuitive icons for play/pause, next, and back buttons, enhancing user experience through straightforward controls.

9.2: Control music playback by dispatching requests to Spotify using Axios, ensuring responsive interaction with the music player.

9.3: Validate seamless functionality for track changes to provide a fluid listening experience.

10: Implement the Volume Component (Volume.jsx):

10.1: Utilize the useState hook to allow users to control volume levels through a range input slider, providing a customizable audio experience.

11: Construct the Footer Component (Footer.jsx):

11.1: Include CurrentTrack.jsx, PlayerControls.jsx, and Volume.jsx to create a cohesive footer that encapsulates the music player functionalities.

11.2: Apply cohesive styling to unify the design, ensuring consistency throughout the user interface.

12: Develop the Spotify Component (Spotify.jsx):

12.1: Manage user authentication by generating an access token, facilitating secure access to the Spotify API.

12.2: Adjust the navigation and header background color dynamically based on the scroll position to enhance user experience.

12.3: Retrieve the user token utilizing useContext, subsequently dispatching a request to /v1/me to obtain user details.

12.4: Implement comprehensive error handling for token authorization issues, ensuring a smooth user experience.

13: Create the Reducer Component (Reducer.jsx):

13.1: Create a token variable to securely store the user’s authentication token.

13.2: Establish an array dedicated to playlists fetched from the Spotify API for efficient state management.

13.3: Maintain a userInfo variable to hold user-specific details for personalized interactions.

13.4: Track the selectedPlaylistID and selectedPlaylist, facilitating dynamic playlist selection within the application.

13.5: Monitor the playerState for active music player status to enhance playback control functionalities.

13.6: Implement a switch statement to manage various actions effectively:

13.6.1: SET_TOKEN: Updates the user token upon successful authentication.

13.6.2: SET_PLAYLISTS: Updates the application state with fetched playlists.

13.6.3: SET_USER: Updates the user information to reflect current session details.

13.6.4: SET_PLAYLIST: Updates the currently selected playlist based on user interaction.

13.6.5: SET_PLAYING: Reflects the current playback state, indicating whether the music is paused or playing.

13.6.6: SET_PLAYER_STATE: Updates the status of the player, maintaining accurate state representation.

13.6.7: SET_PLAYLIST_ID: Updates the ID of the selected playlist for precise state tracking.

13.7: Store all constants in a dedicated constants.js file for easy reference and maintainability.

14: Overview of App.js Implementation:

14.1: Imports:
Import the Login and Spotify components from their respective .jsx files to ensure functionality.

14.2: Global State Management:
Utilize the custom hook useStateProvider to access and update the global state with the authentication token, promoting state consistency across components.

14.3: Token Extraction:
Extract the access token from the URL following the user’s successful login to facilitate authenticated API interactions.

14.4: Authenticated Requests:
Leverage the acquired token to execute authenticated requests to the Spotify API, ensuring data privacy and security.

Link to Github:https://github.com/syedmurtjiz/spotifyclone
Link to Spotify-Clone :https://spotifyclient.netlify.app
Dedicated to crafting high-quality, user-centric web-applications. Explore my work and learn more about my journey at:https://syedmurtjiz.github.io/