This repository contains the source code for web application built with React JS + Vite, allowing users to create characters by selecting its features, with the option to save the image file to the device via html2canvas.
Deploy link: https://theavatarmaker.vercel.app/
avatarmaker-video.mp4
- Easy and user-friendly way to create different characters in a practical way with global states managed via Redux.
- Give your character a name by typing in the input field. That name displays under the character and will be set as the image file name when saved.
- Switch between light and dark themes, made possible with Styled-Components' Theme Provider.
- Make instant random character with one click/tap.
- Highly responsive behavior, adapting to desktop, tablet and smart phone, providing the best user's experience.
- Available in different languages, which can be switched without page reload, with i18next.
- React JS
- Vite
- TypeScript
- Redux
- Styled-Components
- i18next
- html2canvas
- Clone the repository
git clone https://github.com/oliveira-victor/avatar_maker.git
- Navigate to the project directory
cd avatar_maker - Install dependencies
npm install
- Start the development server
npm run dev
- Open your browser: Navigate to http://localhost:5173.
The image files must be placed in their specific folders, separated by layers of characters. They must have the same proportions and follow the same name pattern.
- The full image (that will be used as a layer of the character) should be named the same as the containing folder, plus a two-digit number (e.g., skin/skin01.png), following the numbers sequence.
- The thumbnails should be placed in the same folder as the layers, but named as thumb + the two-digit number sequence (e.g., skin/thumb01.png).
- The image layers are in vertical 4:3 proportion.
Redux layers slice will expect the images to be named as such, so it can handle the layers properly.
- Fork the project
- Create a new branch
- Make your changes
- Submit a pull request