CardMaker is a Vite + React application designed to provide users with a platform to create and customize digital profiles. The application offers a wide array of customization options, allowing users to personalize their profiles to their liking.
This application allows users to create and customize digital profiles. Users can personalize their profile pictures, backgrounds, basic information, and styling options including font size-color, icon size-color, and border size-color-radius. The application also provides an option to export the customized profile as a PNG.
- Profile Customization: Users can upload and adjust profile pictures and background images, and edit basic personal information.
- Styling Options: The application provides extensive styling options, including adjustable font size and color, icon size and color, and border size, color, and radius.
- Real-Time Preview: Changes made by users are reflected in real-time on a styled card.
- Export Functionality: Users can export their customized profile as a high-quality PNG image.
- Clone the repository to your local machine using the command:
git clone https://github.com/rohanvron/CardMaker.git - Navigate to the project directory:
cd CardMaker - Install the necessary dependencies using npm or yarn:
npm installoryarn install
The project uses the following dependencies:
- Vite + React
- react-dom
- react-icons
- dom-to-image
Install dependencies: Run the following command to install all the dependencies
Run: npm install react-dom react-icons dom-to-image
Install Vite globally if you haven't already: npm install -g create-vite@latest or yarn create vite@latest
- React
- JavaScript (jsx)
- Html
- Css
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
if you’re looking to enhance it, here are a few suggestions:
Functionality Enhancements:
- Social Media Integration: Allow users to directly share their created profiles on social media platforms. This could increase user engagement and reach.
- Templates: Provide pre-designed templates for users who want to quickly create a profile.
- Drag and Drop Interface: Implement a drag-and-drop interface for an even more user-friendly experience.
- Editable Text Fields: Consider allowing users to add custom text fields beyond the basic information (name, email, etc.) to cater to a wider range of profile customization needs (e.g., skills, experience, portfolio links).
- Shape Overlays: Provide options for users to add different shaped overlays (e.g., circles, squares, stars) on top of their profile pictures or backgrounds for a more unique look.
UI/UX Improvements:
- Themes: Implement different color themes or a dark/light mode switch.
- Animations: Add subtle animations.
- Responsive Design: Ensure your application is responsive and looks good on all device sizes.
- Guided Tour: Provide a guided tour or tutorial for first-time users to help them understand how to use the application.
This project is licensed under the MIT License. See the LICENSE file for more details.
Check Out the DEMO