DEV Community: BasitJawad

GitHub 2FA Issue Solved

BasitJawad — Mon, 10 Feb 2025 13:43:55 +0000

📌 GitHub 2FA Issue Solved – Fix "Two-Factor Code Verification Failed"

🚀 If you're unable to verify your GitHub 2FA (Two-Factor Authentication) code, the issue might be caused by incorrect time settings on your mobile device.

This guide will help you fix it in seconds! ⏳

❌ Problem: GitHub 2FA Code Not Working

When setting up GitHub Two-Factor Authentication (2FA), you may see this error:

"Two-factor code verification failed. Please try again."

This happens when the time on your phone is out of sync with GitHub’s servers. Since authenticator apps (Google Authenticator, Authy, Microsoft Authenticator) generate time-based one-time passwords (TOTP), even a small time difference can cause verification failures.

✅ Solution: Set Your Device Time to Automatic

📱 On Android:

Open Settings.
Go to Date & Time.
Enable Set time automatically or Use network-provided time.

📱 On iPhone (iOS):

Open Settings.
Go to General > Date & Time.
Toggle Set Automatically ON.

🔄 Final Steps:

Restart your phone after updating the time settings.
Open your Authenticator app and enter a newly generated 2FA code.
It should now work perfectly! 🎉

💡 Additional Tips:

Save your GitHub recovery codes in case you lose 2FA access.
If the issue persists, try removing and re-adding GitHub in your authenticator app.
Use Authy instead of Google Authenticator to enable cloud backups.

🌟 Was This Helpful?

If this guide helped you, consider starring ⭐ this repo and sharing it with others! 🚀

Vite Breeze (Automating React Project Structure Development With TailwindCSS)

BasitJawad — Sun, 09 Feb 2025 10:46:24 +0000

Vite Breeze

A simple CLI tool to quickly generate a React project using Vite, React Router, and a pre-configured context folder. It also sets up Tailwind CSS, along with auto-created pages and components folders.

Note

Do not use ( npm i vite-breeze ) as it will not work because its a Cli-tool not a package.

🚀 Installation

Instead of installing globally, you can use npx to run the CLI directly:

npx vite-breeze

Why `npx`?

Using npx vite-breeze is recommended because:

✅ No Global Installation: Avoids version conflicts.
✅ Always Up-to-Date: Ensures you're using the latest version.
✅ Quick & Easy: Runs instantly without installation.

🔧 Usage

Once you run the command, you'll be prompted to enter a project name:

📛 Enter project name: my-react-app

vite-breeze will then:

Create a new directory with the specified name.
Initialize a new Vite React project.
Install dependencies including React Router, Axios, and Tailwind CSS.
Configure Tailwind CSS automatically.
Create the following folder structure in src/:
- context/ - For React Context API files (AppContext.js included).
- components/ - For reusable components.
- pages/ - For page components.

✅ After setup, follow these steps:

cd my-react-app
npm run dev

📌 Features

⚡ Vite-Powered: Super-fast project setup.
🎨 Tailwind CSS: Pre-configured for styling.
🌍 React Router: Automatically installed.
🛡️ Axios: Automatically installed.
🏗 Organized Structure: Creates a clean project layout.
🔧 Context API Setup: Adds a ready-to-use AppContext.js.

🤝 Contributing

Contributions are welcome! Open an issue or submit a pull request on GitHub.

📜 License

Commercial License (for companies, SaaS, and proprietary products). Contact muhbasit235@gmail.com for details.
License Purchase If you need a license visit this link: https://basitwave1.gumroad.com/l/bkhhk

👨‍💻 Author

Basit Jawad

Cli-Tool for Automating basic Folders Configuration for React based Project.

BasitJawad — Sat, 01 Feb 2025 11:55:53 +0000

Generate-React-Structure

A simple CLI tool to quickly generate a React project using Vite, React Router, and a pre-configured context folder, auto-creation of Page and Component folder.

Note

Do not use npm i react-gen-structure as it will not work because its a Cli-tool not a package.

Installation

Instead of using npm i react-gen-structure, you can use the following command to directly run the CLI tool without installation:

npx react-gen-structure

Why `npx`?

npx is a package runner that comes with npm. It allows you to use packages without installing them globally. This is the recommended way to use react-gen-structure because:

No Global Installation: Avoids potential conflicts with other globally installed packages.
Latest Version: Ensures you always use the latest version of react-gen-structure.
Easy to Use: Simple and convenient way to run the CLI.

Usage

After running the npx command, the CLI will prompt you to enter a project name:

📛 Enter project name: my-react-app

react-gen-structure will then:

Create a new directory with the specified name.
Initialize a new Vite React project within that directory.
Install the necessary dependencies.
Create the following folder structure within the src directory:
- context: For React Context API files (a sample AppContext.js is created).
- components: For reusable React components.
- pages: For React page components.

Finally, you'll be provided with instructions on how to start your development server:

✅ Project setup complete! Run:
   cd my-react-app
   npm run dev

Features

Vite: Uses Vite for fast and efficient development.
React Router (Planned): Future versions will include React Router setup.
Context API: Sets up a basic context folder and provides a sample AppContext.js file.
Organized Structure: Creates a clean folder structure for your components and pages.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

ISC

Author

Basit Jawad

How to Access Your Local Development Server on Any Device Using Vite

BasitJawad — Tue, 16 Jul 2024 06:39:19 +0000

*Accessing your local development server on any device is essential for thorough testing and debugging. *
Here’s a step-by-step guide on how to make your Vite server accessible from any device on your local network.

1. Step 1: Configure Vite to Listen on All Network Interfaces

First, you need to configure your Vite development server to listen on all network interfaces. This allows other devices on your local network to access the server.

Open your vite.config.js file and add the server configuration with the host set to 0.0.0.0:

Step 2: Find Your Computer’s IP Address

Next, you need to find your computer’s IP address on the local network. Here’s how you can do it:

Windows:

Open Command Prompt.
Type ipconfig and press Enter.
Look for the IPv4 Address under your active network connection.

macOS:

Open Terminal.
Type ifconfig and press Enter.
Look for the inet address under your active network interface (usually en0 for Wi-Fi).

Linux:

Open Terminal.
Type ifconfig or ip addr and press Enter.
Look for the inet address under your active network interface.

Step 3: Start Your Vite Development Server
Make sure your Vite development server is running. You can start it by running:

npm run dev

Step 4: Access the Server on Your Mobile Device

Now, on your mobile device, open a web browser and enter your computer’s IP address followed by the port number your Vite server is running on. For example, if your computer’s IP address is 192.168.1.10 and the Vite server is running on port 5173, enter:

http://192.168.*.*:5173

By following these steps, you can easily access your local Vite development server from any device on your local network, allowing you to test your website or web application on different devices and screen sizes.

Happy coding!

DEV Community: BasitJawad

GitHub 2FA Issue Solved

📌 GitHub 2FA Issue Solved – Fix "Two-Factor Code Verification Failed"

❌ Problem: GitHub 2FA Code Not Working

✅ Solution: Set Your Device Time to Automatic

📱 On Android:

📱 On iPhone (iOS):

🔄 Final Steps:

💡 Additional Tips:

🌟 Was This Helpful?

Vite Breeze (Automating React Project Structure Development With TailwindCSS)

Vite Breeze

Note

🚀 Installation

Why npx?

🔧 Usage

✅ After setup, follow these steps:

📌 Features

🤝 Contributing

📜 License

👨‍💻 Author

Basit Jawad

Cli-Tool for Automating basic Folders Configuration for React based Project.

Generate-React-Structure

Note

Installation

Why npx?

Usage

Features

Contributing

License

Author

Basit Jawad

How to Access Your Local Development Server on Any Device Using Vite

1. Step 1: Configure Vite to Listen on All Network Interfaces

Step 2: Find Your Computer’s IP Address

Step 4: Access the Server on Your Mobile Device

Why `npx`?

Why `npx`?