vaishnavi-3969/web-componentify

✨ Web Componentify is an open-source repository dedicated to simplifying web development by providing a collection of reusable components. Whether you're building a website, web application, or mobile app, you'll find a wide range of components, from headers and footers to buttons and dropdowns, available in various popular frameworks and language

web-componentify's Issues

Star the Repository 🌟

🌟 If you've found this project helpful and valuable, please consider giving it a star!

⭐️ Your support means a lot to us.

🚀 Feel free to share this repository with fellow contributors, so they can also benefit from it and join our community!

Add: Template for a simple ToDo Web App

Modal Box

Modal Box can provide additional context or details without navigating away from the current page or screen. This is especially useful when you want to display information related to a specific element on the page without losing the user's place.

We can implement it to show the instruction for contribution.

Update workflows

Add a build and test workflow.

Adding a build and test workflow in a project streamlines development by automating tasks like code compilation and testing. It ensures code quality and aids in deploying error-free applications efficiently.

Create Header

1. Language/Framework
2. Screenshot(Optional)

Re-Defining the website

Redefine the whole website using contributed components and andding new ones so that website looks better.

New Component Suggestion - Interactive Button

New Component Suggestion

Description:

I would like to suggest the addition of a new interactive button component with a cool animation to the Web Componentify project. This component would enhance the user experience by providing an eye-catching and interactive element that can be easily integrated into web applications.

Component Details:

• Component Type: Interactive Button
• Animation: The button features a hover animation that includes a change in background color, text color, scaling, and rotation.
• Purpose: This component is designed to provide an attractive and interactive button that can be used for various call-to-action (CTA) elements in web applications.

Implementation Ideas:

The provided component code already includes the necessary structure and styling for the interactive button. To integrate this component into the project, follow these steps:

1. File Placement: Place the Button.js file in an appropriate directory within the project structure.

2. Component Props:

   • label: The text to be displayed on the button.
   • iconURL (optional): An optional URL for an icon to be displayed next to the label.
   • backgroundColor: Background color of the button.
   • textColor: Text color of the button.
   • borderColor: Border color of the button.
   • fullWidth (optional): A boolean prop to make the button stretch to full width.

3. Styling Customization: Developers can customize the button's appearance by passing appropriate values for the backgroundColor, textColor, and borderColor props.

4. Animation: The component already includes a hover animation that changes the background color, text color, and triggers scaling and rotation. No additional implementation is required for this animation.

5. Code Snippet

<Button label="Shop Details" iconURL={arrowRight} />

Additional Information:

This interactive button component would be a valuable addition to the Web Componentify project, as it can be used to create engaging and visually appealing user interfaces.

Create basic website

File structure

The file structure of the project is not right

Wanted to change Layout of website

Hey @vaishnavi-3969 i want to change website layout for improved user experience. Adjusting spacing, and element positioning can enhance readability and overall aesthetics, resulting in a more user-friendly design."
after changes website look like this Here
mobile layout :Here
you can assign me i am already working on this

Add: An online web form using Google Firebase Realtime Database

Template for an online web form using Google's Firebase Realtime Database

Fork the Repo 🍴

🚀 Important: Please Fork this main repository before contributing! 🍴

Creating a Fork is the first step to getting involved. 🤝 Without forking the repo, please refrain from creating a pull request. ✋

Let's make the contribution process smooth and enjoyable for everyone! 😊

Contribute to this Repository 💡

Come join us and contribute to this wonderful repository! 🌟 Your contributions will not only help improve this project but also give you a chance to dive into the world of Open Source on Github. Let's work together to make this project even better! 💪❤️

Implement Footer Component

Issue: Implement Footer Component

Description

Summary:

Create and implement a Footer component for the website to enhance user experience and provide social media links.

Details:

We need to add a footer component to the website. The footer should include social media icons with captivating hover animations and links to our social media profiles.

Requirements:

• Create a new Footer.jsx component.
• Style the footer using Tailwind CSS.
• Add social media icons using FontAwesome icons.
• Implement hover animations for the icons.
• Add links to social media profiles (e.g., Twitter, Facebook, Instagram, LinkedIn).

Additional Information:

• Please refer to the design guidelines for the styling and layout of the footer.
• Make sure the footer is responsive and works well on different screen sizes.
• Test the hover animations to ensure they provide a delightful user experience.

Expected Output:

A fully functional and styled footer component that includes social media icons with hover animations and links to our social media profiles.

Package Dependencies

We will be using FontAwesome icons for this task. To get started, please install FontAwesome by adding it to the dependencies in your package.json file:

npm install --save @fortawesome/fontawesome-free

Hacktoberfest:

To make this issue eligible for Hacktoberfest, please label it as:

• hacktoberfest
• hacktoberfest-accepted

Feature: Add Animation Effects for Accordion Open/Close

Description: I would like to propose adding animation effects to the accordion component in order to provide a more visually appealing user experience. Currently, the accordion opens and closes abruptly, which can be jarring for users.

I suggest implementing a smooth animation transition when the accordion is opened or closed. This could involve using CSS transitions or JavaScript animations to gradually expand or collapse the accordion content.

Benefits:

Improved User Experience: Animation effects will make the accordion open and close more smoothly, providing a more polished and intuitive user experience.
Visual Feedback: Animations will provide visual feedback to users, clearly indicating the state change of the accordion.
Modern and Engaging: Adding animation effects will make the accordion feel more modern and engaging, enhancing the overall aesthetics of the application.
Possible Implementation:

Utilize CSS transitions to smoothly animate the expansion and collapse of the accordion content.
I am willing to contribute to this feature implementation and would appreciate any guidance or feedback from the maintainers on the best approach to take. Thank you!

Online-Shopping-Website

Modal and website layout not responsive getting scrollbar in bottomch

https://webcomponentify.design/Modal this URL when i clicked on the click on the instrucation button the modal size is oversized and it's impacting user exprience

here is the issue : https://i.imgur.com/ozQRNPZ.png

i will work on this issue

Add A Navigation menu for different components

A navigation menu to navigate through several components on the hompage, also the list of components should be mentioned.

Add: Template for a Online Form

A template for a generic online web form that has fields for most commonly needed/asked information in online web forms like name, email, phone etc.

Footer styling needs correction in home page.

The styling of the footer on the home page is not optimal. it needs some responsive CSS and also alignment.

I want to work on this issue. Please assign me and mark it as hacktoberfest.

thank you.

Click outside of Modal to close Modal

Hi,

I found that for the modal component.
When I click outside of the modal, it will not close the modal.
Could I try to create a PR to improve this experience?

Thanks.

Accordion

Accordions are versatile and help maintain a clean, organized user interface, particularly when dealing with content that can be logically grouped or when you want to present information in a hierarchical manner, making it easier for users to access what they need without overwhelming them.

We can use it to answer some frequently asked questions

Customized Bottom navigation Bar

In Single Page Applications, to navigate across the pages , a customized bottom navigation bar is helpful in creating nice user experience.

Add dependabot

To add Dependabot to a project, create a dependabot.yml file in project root. Configure it to check for updates in project's dependencies, and set up notifications for automated pull requests. Dependabot will then help keep dependencies up-to-date, enhancing project stability and security.