/AlmaBetter_Flashcard_Capstone_Project-master

Primary LanguageJavaScript

AlmaBetter's Capstone Project - Flashcard Generator

Deployment Link

Click on the link below to open the flashcard app:

https://transcendent-kitten-6d66d8.netlify.app

Run Locally

Clone the project

  git clone https://github.com/imvivekanand/AlmaBetter_Flashcard_Capstone_Project.git

Go to the project directory

  cd AlmaBetter_Flashcard_Capstone_Project

Install dependencies

  npm install

Start the server

  npm start

About the flashcard app:

A flashcard generator web application created using ReactJs.

What is a flashcard?

  • A flashcard or flash card is a card bearing information on both sides, which is intended to be used as an aid in memorization.

  • It is also known as an index card.

The flashcard app contains mainly 3 pages:

1) Create Flashcard Page
2) My Flashcard Page
3) Flashcard Details Page

Steps to create a flashcard using the app.

  • This App allows the user to generate a flashcard.
  • Users have to click on "Click New" to open a form for the creation of a new flashcard.
  • Create Group input box is used to add the title.
  • Add description is used to describe the flashcard.
  • After that user has to add a new term and define the term.
  • User can add more terms by clicking on "Add More".
  • Finally to create the flashcard, click on create button.

Q. How to view the recently created flashcard?

  • Click on "My Flashcard" to view the flashcard.

Q. How to view the card details?

  • Open the "My Flashcard" page.
  • Click on "View Card".

Features

  • Create a flashcard
  • Add terms to that flashcard
  • View all flashcards
  • View the details of the selected flashcard
  • Share your flashcard

Tech Stack

React, Redux, TailwindCSS, React-Redux, Formik, React-Icons, React-Router-DOM

1) React - We have created this project using ReactJs and its dependencies.
2) Redux / React-Redux - We have used Redux for state management. React components read data from the redux store, and dispatch the actions to the store to update the app state.
3) Tailwind CSS - It is used for the styling of our web pages.
4) Formik - Formik is used to create forms for user input.
5) Formik library - For form validation and submission.
6) React-Icons - It is used to add icons to our project.
7) React-Router-DOM - The React-router-dom is used for navigating routes between different pages.

Authors

🛠 Skills

ReactJs, Javascript, HTML, CSS