Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jlee55504/flashcard-o-matic-project-qualified-version
An application that allows users to create, add, edit, and delete decks and cards in the decks used for studying.
https://github.com/jlee55504/flashcard-o-matic-project-qualified-version
bootstrap css git gitbash github html jest react react-hooks react-router react-router-dom reactjs software-engineering study web-application web-development
Last synced: 11 days ago
JSON representation
An application that allows users to create, add, edit, and delete decks and cards in the decks used for studying.
- Host: GitHub
- URL: https://github.com/jlee55504/flashcard-o-matic-project-qualified-version
- Owner: jlee55504
- Created: 2025-01-03T06:45:08.000Z (30 days ago)
- Default Branch: jl--flashcard-project-version-to-pass-cheggskills-test
- Last Pushed: 2025-01-13T05:39:01.000Z (20 days ago)
- Last Synced: 2025-01-13T06:26:42.717Z (20 days ago)
- Topics: bootstrap, css, git, gitbash, github, html, jest, react, react-hooks, react-router, react-router-dom, reactjs, software-engineering, study, web-application, web-development
- Language: JavaScript
- Homepage: https://flashcard-o-matic-project-qualified.onrender.com
- Size: 232 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flashcard-O-Matic Project
An application built without React Bootstrap that allows users to create, add, edit, delete decks, and delete cards in the decks used for studying.
## Features
- **Decks of Cards Management:** Creates, edits, and deletes card decks.
- **Card Management:** Creates, edits, and deletes the cards in the decks.
- **Study Ability:** Memorize the answers to the problems on the cards to prepare for tests.
- **User-friendly Interface:** Simple structured layout for easy navigation.
## Technologies Used
* **React:** Core programming language (React 18.2.0)
* **CSS:** Provides visual styling for the application
* **HTML:** Visually displays the content of the application
* **Jest:** Unit testing framework
## Screenshot
## Getting Started
### Prerequisites
- Node Package Manager (NPM)
### Installation:
1. Clone the repository:
```
git clone https://github.com/jlee55504/flashcard-o-matic-project-qualified-version.git
```
2. Navigate to the project directory:
```
cd flashcard-o-matic-project-qualified-version
```
3. Build the project:
```
npm install
```
4. Run the application:
```
npm start
```
## Usage
Upon running the application, you'll be presented with the options to:
1. Create a new card deck
2. View a deck of cards
3. Study a deck of cards
4. Delete a deck of cards
Navigate through the options by clicking the corresponding buttons.
## Code Structure
- ``src/Layout/index.js:`` Main application entry point
- ``src/decks/CreateDeck.js:`` Creates new card decks
- ``src/decks/Deck.js:`` Allows a deck to be edited, studied, or deleted. New cards can also be added
to the deck the current cards being displayed can be edited or deleted
- ``src/decks/EditDeck.js:`` Allows the name and description of a deck to be edited
- ``src/cards/Study.js:`` Displays the front and back of every card in the deck to prepare for tests
- ``src/cards/AddCard.js:`` Allows new cards to be added to decks
- ``src/cards/EditCard.js:`` Allows the front and back of every card to be edited
- ``src/Layout/style.css:`` Handles the visual styling for the application
## Acknowledgments
- This project was built for the Chegg Skill's software engineering program
- This project taught me how to use the "useEffect" React.js hook to
immediately update the information displayed on the web page which was extremely helpful
in furthering my software engineering career