Almabetter-Flashcard-Generator

Develop By.

i] Zulfiqar Shaikh

This is a Flashcard Generator frontend capstone project that Almabetter has provided.

Deployment

Visit my website for a flashcard maker by clicking the link.

https:

Watch Explanation video

• [video link]

Run Locally

Clone the project

bash git clone https:

Install dependencies

bash npm install

Start the server

bash npm run start

Tech Stack

• Reactjs( React Router ),
• Redux & Redux Toolkit,
• TailwindCSS,
• React-icons,
• React Formik & Yup,

About The Project (Flashcard )

Reactjs was mostly used to develop this project, which primarily consists of three pages. bash

1. create Flashcard page
2. My Flashcard page
3. Flashcad Details page with share page

• create fashcard page: We created input boxes for the create Flashcard page using Formik, and we utilised Yeah for the validation.

• My Flashcard page: We created the My Flashcard UI component specifically for the My Flashcard page, mapped the UI, and inputted data into My Flashcard.

• FlashcardDetails page : We designed a share popup slide with all social media links and coded the page to display the number of cards and their details.

How To Use

1. Launch the flashcard maker by clicking the deployment link

2. Click the "create New" link, complete all the input fields accurately, and then press the "create" button.

3. in order to see Clicking the "My flashcard" link will display all of the flashcards you've recently generated.

4. If you click the "view card" button on the flashcard, the specifics of the flashcard, the number of cards, and a description of each card will be displayed. You can also click the "share" button to copy the link, and all social network icons and links will function.

Features

• Add More Input Box (Button)

• Delete button (Button)

• Edit Input box (Button)

• View cards (Button)

• Upload Image (Button)

• Share (Copy Clipboard button)

• See all (Button)

• Back Button

• close button for closing share page

🛠 Skills

Javascript, HTML, CSS, Reactjs...