Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dpvasani/flashcardgenerator
Problem Statement for the Flashcard Details Page:To design a Flashcard Generator Web Application with primarily 3 pages, Flashcard Details Page , My FlashCard Page , Flashcard Page to Create
https://github.com/dpvasani/flashcardgenerator
formik hactoberfest hactoberfest2023 reacticons reactjs reactpdf redux redux-toolkit tailwindcss yup
Last synced: about 2 months ago
JSON representation
Problem Statement for the Flashcard Details Page:To design a Flashcard Generator Web Application with primarily 3 pages, Flashcard Details Page , My FlashCard Page , Flashcard Page to Create
- Host: GitHub
- URL: https://github.com/dpvasani/flashcardgenerator
- Owner: dpvasani
- Created: 2023-10-02T17:35:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-02T19:00:11.000Z (over 1 year ago)
- Last Synced: 2024-01-27T12:12:23.548Z (12 months ago)
- Topics: formik, hactoberfest, hactoberfest2023, reacticons, reactjs, reactpdf, redux, redux-toolkit, tailwindcss, yup
- Language: JavaScript
- Homepage: https://flash-card-generator-56.vercel.app/
- Size: 214 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Certainly! Here's an updated and more attractive README file with added emojis:
# 🚀 Flashcard Generator
## Introduction
Welcome to the Flashcard Generator website! 📚 This platform has been developed with the purpose of creating and customizing flashcards for various educational, professional, or personal uses.
[](https://choosealicense.com/licenses/mit/)
## ✨ Features
- **Card Creation:** On the "Create FlashCard" page, users can craft personalized flashcards by creating distinct "MainGroups" and "TermGroups." The "MainGroup" section allows users to name the group, upload images, and add descriptions. The "TermGroup" section permits the input of term details, image selection, and dynamic addition of term groups using the "Add Term" button. The "Create Card" button generates a flashcard incorporating all provided data.
- **Display of Cards:** Transition to the "My FlashCards" page to encounter a summarized card view, showcasing main group particulars. This includes the group name, description, and the count of associated flashcards. Clicking the "View Cards" button allows users to access a detailed term group view. Created flashcards can also be removed if they are no longer needed.
- **View, Export, and Sharing:** Users can view and interact with each flashcard, utilizing the "Share," "Download," and "Print" buttons. Thanks to the react-pdf library, downloading and printing have been made possible by converting the flashcard blob into a PDF.
- **Responsive Design:** The project is designed to work seamlessly across various devices and screen sizes, including desktop computers, tablets, and smartphones.
- **Clean and Efficient UI / UX:** The user interface has been tailored according to pre-determined criteria. We've ensured a clean UI and incorporated some out-of-the-box approaches to enhance User Experience, including alert messages and frame motion animations at every step of flashcard creation, exportation, or deletion.
## 💻 Tech Stack
- React
- Tailwind CSS
- Redux Toolkit
- React-Hook-Form
- React-pdf
- Formik
- Yup
- React Icons
## 🏃♂️ Run Locally
1. Clone the project
```bash
git clone https://github.com/dpvasani/FlashCardGenerator.git
```
2. Go to the project directory
```bash
cd FlashCardGenerator-Almabetter
```
3. Install dependencies
```bash
npm install
```
4. Start the server
```bash
npm run start
```
## 🤝 Contributors
- Darshan Vasani [GitHub](https://github.com/dpvasani) | [LinkedIn](https://www.linkedin.com/in/darshan-vasani-3299ba245/)
- Krupali Desai [GitHub](https://www.github.com/dkrupali56) | [LinkedIn](https://www.linkedin.com/in/krupali-desai-17269a235/)
## 🌐 Deployed Website
[Visit the website](https://flash-card-generator-56.vercel.app/) 🌐