Logo Express - A Logo Making React App 🔗

A React based logo creation tool using Shadcn-UI for UI components, and lucide icons for customizable icon selection. Integrated html-to-image for exporting and downloading logos.

Features

• Icon Resizing: Adjust the size of icons to fit different components and layouts seamlessly.
• Icon Rotation: Rotate icons to the desired angle for better visual alignment and design consistency.
• Color Adjustments: Change the color of icons to match your application's theme and style.
• Padding Customization: Modify the padding around icons to ensure proper spacing and alignment within the UI.
• Border Rounding: Customize the border radius of icons to create smooth, rounded edges for a modern look.
• Background Color: Set and customize the background color of icons to enhance visibility and contrast.

Live Link

https://logomaker2024.netlify.app/

Screenshots

Run Locally

Clone the project

  git clone https://github.com/Adnan7209/LogoMakerApp

Go to the project directory

  cd LogoMakerApp

Install dependencies

  npm install

Start the server

  npm run dev

Open your browser and go to http://localhost:5173

Tech Stack

• 

• 

• 

• 

• 

Dependencies

Key libraries and packages used in this project:

• UI Components & Modals: @radix-ui/react-hover-card , @radix-ui/react-separator , @radix-ui/react-slider , @radix-ui/react-slot
• Classname Manipulation: class-variance-authority , clsx
• HTML to Image Conversion: html-to-image
• Icons: lucide , lucide-react
• React Libraries: react , react-dom
• Color Picker: react-best-gradient-color-picker
• Animation for Tailwind CSS: tailwindcss-animate

Development Tools

• Vite: Modern frontend build tool enabling fast refreshing and optimized builds.
• ESLint: Ensures code quality and consistency across the project.
• CSS and PostCSS: For processing CSS with Tailwind CSS and Autoprefixer.
• React Refresh: Hot reloading during development. Included via Vite and ESLint configurations.

Acknowledgment

YouTube Reference: This project was inspired by a tutorial on creating logo maker apps. Watch the reference video here.

Lessons Learned

• React Syntax: Deepened my understanding of React syntax and code structure.

• Context API: Gained proficiency in managing global state with React's Context API.

• Shadcn-UI Components: Became adept at using Shadcn-UI for UI development.

• TailwindCSS: Enhanced my skills in responsive and utility-first CSS with TailwindCSS.

• Search Functionality: Implemented a case-insensitive search filter to improve data retrieval and user experience.

Challenges and Solutions

• State Management: Implemented React's Context API to handle application's states more efficiently.

• UI Component Mastery: Overcame initial hurdles with Shadcn-UI by engaging with its documentation and examples.

• Responsive Design: Utilized TailwindCSS's utility classes for responsiveness in the app's design.

• Search Functionality: Dealing with case sensitivity and filtering logic for the search functionality posed challenges. Resolved it by developing a case-insensitive search feature, with the help of GPT, to enhance usability and filter accuracy.

• Miscellaneous Issues: Addressed various coding and implementation challenges by reviewing code, consulting tutorial videos, and leveraging GPT assistance for quick and effective solutions.

Author

• @Adnan7209

License

This project is licensed under the MIT License - see the LICENSE file for details.