Coder Social home page Coder Social logo

flashcards's Introduction

Flash Cards

Flash card app built as part of the Thinkful software engineering curriculum.

This app is designed to help the user study for upcoming exams.

The user can:

  • Create flash card decks
  • Add cards to the decks
  • Remove cards from the decks
  • Study the decks, wherein the card will first display the front, and then the back
  • Delete decks that are no longer needed

The app begins at the home page. From here, the user sees a list of all decks, and either create, study, view, or delete a deck.

Alt text

When viewing a deck, all of the cards contained within that deck are listed.

Alt text

When editing the deck, the user is brought to the "Edit Deck" form. Upon form submission, the user is brought back to the deck view page.

Alt text

When adding a card, the user is brought to the "Add Card" form. Upon form submission, the user is brought back to the deck view page.

Alt text

When editing a card, the user is brought to the "Edit Card" form, which is pre-filled with the card text. Upon form submission, the user is brought back to the deck view page.

Alt text

When studying, the user first sees the front of the the card. Upon clicking "flip", the card flips around and displays the back of the card. The user can click "next" to see the next card in the deck. If at the end of the deck, the user will get the option to re-start the deck, or return home.

Front of card Back of card
Alt text Alt text

This is the first Thinkful project where the app framework was not pre-built in the curriculum. I built this flash card app using React, and styled it using Bootstrap. The app routing utilizes React Router, and all interactivity is written with JavaScript. This app is my first implementation of the useEffect() hook, which is responsible for the API fetches throughout the app.

flashcards's People

Contributors

adrienesmith avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.