This is a simple React-based web application that provides a user-friendly interface for encoding and decoding text to and from Base64 format. The app utilizes the btoa() and atob() JavaScript functions for the core encoding and decoding operations.
- Toggle between Encode and Decode modes: A visually appealing toggle switch allows users to seamlessly switch between encoding and decoding functionalities.
- Real-time input and output: The app provides instant feedback, displaying the encoded or decoded result as the user types or pastes their input.
- Loading indicator: A loading animation provides visual feedback during the encoding/decoding process, enhancing the user experience.
- Error handling: The app gracefully handles invalid Base64 input during decoding, displaying a clear error message.
- Responsive design: The app is designed to work well on various screen sizes, ensuring accessibility across different devices.
-
Clone the repository:
git clone https://github.com/idcesares/Base64-Encoder-Decoder.git
-
Install dependencies:
cd base64-encoder-decoder npm install -
Run the development server:
npm run dev
-
Open in your browser:
The app should now be running at
http://localhost:3000.
- Select mode: Choose whether you want to encode or decode text using the toggle switch.
- Enter input: Type or paste your text or Base64 string into the input area.
- Click the button: Click the "Encode" or "Decode" button to perform the desired operation.
- View the result: The encoded or decoded output will be displayed in the result area.
- React: The core JavaScript library for building user interfaces.
- @radix-ui/react-switch: A library providing accessible and customizable switch components.
- lucide-react: A collection of beautifully simple icons.
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
This project is licensed under the MIT License.