SmartType is a powerful browser extension that allows users to create custom commands to automate repetitive typing tasks. With SmartType, you can save time and enhance your productivity by easily expanding predefined text snippets with just a few keystrokes.
- Intuitive dashboard for managing commands and their expansions, making it easy for users to create, edit, and delete commands.
- Define shortcuts to trigger the expansions and save time.
- Import and export functionality to easily share commands with others.
- Compatible with popular browsers like Google Chrome, Opera, Safari, and more.
- Fully responsive design with support for accessibility tags and night mode.
During the development of Text Expander, I gained valuable experience and knowledge in the following areas:
- Browser extension development using React and JavaScript.
- Creating reusable components and implementing routing.
- Utilizing object-oriented programming (OOP) in JavaScript.
- User interface design and creating an intuitive experience.
- Parsing and replacing text within input fields.
- Cross-browser compatibility and testing.
- React - Used to build the user interface, routing, and components.
- JavaScript - The main language used in the development of the extension.
- Sass - Used to apply styles.
- TypeScript - Added to provide static typing and object-oriented programming features to the project.
- Vitejs - Employed to improve the performance and efficiency of the project.
react-hook-form- library for building flexible and performant forms in React.react-hot-toast- library for displaying notifications in React.react-icons- a collection of popular icons for React applications.react-router-dom- a routing library for React applications.sass- popular CSS preprocessor that enhances the styling capabilities of CSS.autoprefixer- plugin for Sass that automatically adds vendor prefixes to CSS rules.
In the future, the Weather App will include the following additions:
- Upload to Chrome Extension: The extension will be made available on the Chrome Web Store for easy access and installation by Chrome users.
- Bug fixing: Ongoing efforts will be made to identify and resolve any errors or issues encountered while using the extension, improving its overall stability and performance.
- Support for Firefox: A version of SmartType will be developed to be compatible with the Firefox browser, expanding its accessibility to Firefox users.
To run this application locally, you'll need to have Node.js and npm installed on your machine. Once you've cloned this repository, navigate to the project directory and run the following commands:
npm i th3-smart-type
npm run build-sassThese commands will install the necessary dependencies and start a local development server.
Alternatively, you can clone this repository using the following command:
git clone https://github.com/th3alexdev/smart-type.gitOnce you have executed npm run build-sass, follow these steps to load the extension in a Chromium-based browser:
-
Open the Chromium-based browser (e.g., Google Chrome).
-
Go to the extensions section in the browser settings.
-
Enable "Developer Mode" at the top right of the page.
- Click on the "Load unpacked" button and select the dist folder from the project.
This will load the SmartType extension in the browser, and you can start using it to automate your typing tasks.
I hope this helps! If you have any other questions, feel free to ask.
To use the SmartType extension, follow these steps:
- Load the extension by following the installation steps. The SmartType icon will appear in the search bar.
- Click on the icon to access the command dashboard, where you can manage shortcuts.
In the "Your shortcuts" section, you can add new shortcuts by clicking "Add new shortcut" and specifying:
- Name
- Description
- Expansion text
You will see a sorted list of the shortcuts you have added. You can modify or delete them by clicking on a card and using the provided buttons. Additionally, you can view the last usage date and usage count for each shortcut in the dashboard.
You can test your shortcuts in the "Test your shortcuts" section or use them on various web pages. Simply type the specific shortcut name along with the shortcut command. For example, you can try typing the default shortcut "/testing".
Adjust additional settings in the dashboard, including the ability to export or import shortcuts. You can also enable the dark mode for a more comfortable experience.
Make the most of SmartType's capabilities to streamline your typing tasks and enhance productivity!
I accept contributions in the form of bug fixes and code improvements. If you want to contribute, simply fork the repository, make your changes, and submit a pull request. 🤘
My name is Alexander Pérez and I am the creator of this app. I am a web developer with a passion for creating fun and interactive experiences for users. If you have any questions or suggestions about the app, please don't hesitate to contact me through my social networks: