codeyu / Flashcard-Generator-App

This project is a Flashcard Generator App that allows users to create and manage flashcards in groups. It is a frontend application built using HTML, CSS, JavaScript, React JS, React Redux, Formik, and Tailwind CSS.

Flashcard Generator App Click here

Project Description

Flashcard Generator App is a frontend application for creating and managing flashcards. It allows users to create multiple flashcards within a group. The application consists of three main pages:

1. Create New Page:
   This page enables users to create a new flashcard. It contains two forms: one for entering the name and description of the flashcard, and another for adding individual card names and descriptions. The dynamic form is implemented using Formik. After clicking the Create button, the flashcard will be created.

2. My FlashCard Page:
   On this page, users can view all the created card groups. Each group is displayed with a heading, description, total number of cards in the group, and a button for viewing the cards on the next page.

3. FlashCard Details Page:
   This page allows users to view the created flashcards. Users can navigate between different flashcards by clicking on the sidebar terms associated with each card group. Additionally, they can share, print, and download the flashcards.

Features

● Implemented agile methodology for designing, analyzing, and developing the frontend project. The entire project was planned out as a single sprint of 2 weeks.

● This application helps to create new flashcards and access created flashcards.

● Utilized React, React-Redux, and localStorage to manage data, React-router for routing, and Tailwind CSS for component development and responsive design.

● Improved the project’s efficiency by implementing validation using Formik.js on all the existing input fields, and extensive testing was carried out, reducing the project’s time complexity by 20%.

Technology Used

Frontend: HTML, CSS, JavaScript, React JS, React Redux, Formik, Tailwind CSS

Run Locally (Frontend)

1. Clone the project:

   git clone https://github.com/mayuryalij/Flashcard-Generator-App.git

2. Navigate to the project directory:

   cd Flashcard-Generator-App

3. Install dependencies:

   npm install

4. Start the server:

   npm run start

Deployment

This project is live at: https://flashcard-generator.onrender.com/

---