Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/milindkusahu/dynamic-cards
https://github.com/milindkusahu/dynamic-cards
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/milindkusahu/dynamic-cards
- Owner: milindkusahu
- Created: 2024-10-21T14:56:35.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T15:11:30.000Z (2 months ago)
- Last Synced: 2024-10-22T00:57:01.058Z (2 months ago)
- Language: JavaScript
- Size: 103 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dynamic Cards
Dynamic Cards is a React application that allows users to create and manage user cards dynamically. Users can add new cards with personal information and remove existing cards as needed.
## 🚀 Features
- Add new user cards with name, email, and image URL
- Display user cards in a responsive grid layout
- Remove individual cards
- Scrollable card container for a large number of cards
## 🛠️ Technologies Used
- React
- Vite
- React Hook Form
- Tailwind CSS
## 📦 Installation
1. Clone the repository:
```
git clone https://github.com/milindkusahu/Dynamic-Cards.git
```
2. Navigate to the project directory:
```
cd Dynamic-Cards
```
3. Install dependencies:
```
npm install
```
## 🚀 Usage
1. Start the development server:
```
npm run dev
```
2. Open your browser and visit `http://localhost:5173` (or the port specified by Vite).
3. Use the form at the bottom of the page to add new user cards.
4. Click the "Remove It" button on a card to delete it.
## 🧱 Project Structure
- `src/App.jsx`: Main component that manages state and renders Cards and Form components
- `src/components/Cards.jsx`: Component that renders the list of user cards
- `src/components/Card.jsx`: Individual card component displaying user information
- `src/components/Form.jsx`: Form component for adding new user cards
## 🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check [issues page](https://github.com/milindkusahu/Dynamic-Cards/issues).
## 📝 License
This project is [MIT](https://opensource.org/licenses/MIT) licensed.
## 👤 Author
**Milind Kumar Sahu**
- GitHub: [@milindkusahu](https://github.com/milindkusahu)
## 🙏 Acknowledgements
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [React Hook Form](https://react-hook-form.com/)
- [Tailwind CSS](https://tailwindcss.com/)