Skip to content

Home

Jump to bottom
dionisggr edited this page Feb 27, 2021 · 1 revision

LangCards: Spaced-Repetition Capstone

A simple Spanish language trainer app for anyone that uses the spaced repetition revision technique for a more effective learning experience.

USER STORIES:

  • As a prospective user:
    • I can register an account so that I can login and use the application
      • I'm directed to a registration page
      • On that page, I can enter my name, username, and password
      • If all of my information is correct, upon clicking the submit button, I'm redirected to my dashboard
      • If any of my information is incorrect, I'm given an appropriate error message and the option to correct my information
  • As a registered user:
    • I can navigate to the "login" page
    • I can login to the application so that I can begin learning
    • I can navigate back to the registration page
    • I can enter my username and password
    • If my submitted username and password are incorrect, I'm given an appropriate error message so that I can attempt to login again
    • If my submitted username and password are correct, the app "logs me in" and redirects me to my dashboard
  • As a logged in user:
    • The application remembers that I'm logged in and doesn't redirect me to the registration page
    • I'm directed to a dashboard where I can see my progress learning my language
    • The app displays my name and presents a logout button
    • The application refreshes my auth token so that I can remain logged in while active on the page
    • The app gets my language and words progress from the server
      • I'm shown my language
      • I'm shown the words to learn for the language
      • I'm shown my count for correct and incorrect responses for each word
      • I'm given a button/link to start learning
      • I'm shown the total score for guessing words correctly
    • I can learn words using spaced repetition
      • The app gets my next word to learn details from the server
      • I'm shown the word to learn
      • I'm shown my current total score
      • I'm shown the number of correct and incorrect guesses for that word
      • I'm presented an input to type my answer/guess for the current words translation
    • I can see feedback on my submitted answers.
      • The app POSTs my answer for this word to the server
      • The server will update my appropriate scores in the database
      • After submitting, I get feedback whether I was correct or not
      • After submitting, I'm told the correct answer
      • My total score is updated
      • I'm told how many times I was correct and incorrect for the word
      • I can see a button to try another word
    • I can learn another word after receiving feedback from my previous answer
      • I'm presented with a button that I can click to learn another word
      • When clicking on the button I see the next word to learn

Technology

  • Front-End: React.js, CSS3, HTML5, Javascript, Cypress, API fetch
  • Back-End: Javascript, Node.js, Express.js, Knex.js, PostgreSQL, Mocha, Chai, Supertest, Nodemon, Postgrator, Dotenv, JWT, Bcrypt, Morgan, XSS, CORS, Helmet, HTML5, CI scripts
  • Development Environment: Vercel, Heroku, DBeaver, Postman

Functionality

The app's functionality includes:

  • Any User
    • May create an account
  • Registered User
    • User lands on Dashboard with words and total score information
    • May begin quiz and see next words to answer based on previous history
    • Is provided correct or incorrect feedback based on answer

Front-End Structure

  • Index.js - (stateless)
    • App.js - (stateful)
      • Header.js - (stateless)
      • DashboardRoute.js - (stateful)
      • LearningRoute.js - (stateful)
        • LoginForm.js - (stateful)
          • Label.js - (stateless)
          • Input.js - (stateless)
          • Button.js - (stateless)
      • RegistrationRoute.js - (stateless)
        • RegistrationForm.js - (stateless)
          • Required.js - (stateless)
          • Label.js - (stateless)
          • Input.js - (stateless)
          • Button.js - (stateless)
      • LoginRoute.js - (stateless)
      • NotFoundRoute.js - (stateless)
      • Footer.js - (stateless)

Back-End Structure

  • User (database table)
    • id (serial, primary key)
    • username (unique text, not null)
    • password (text, not null)
    • name (text, not null)
  • Language (database table)
    • id (text, primary key)
    • name (text, not null)
    • total_score (smallint, default 0)
    • user_id (integer, foreign key [user.id])
  • Word (database table)
    • id (serial, primary key)
    • original (text, not null)
    • translation (text, not null)
    • memory_value (smallint, default 0)
    • correct_count (smallint, default 0)
    • incorrect_count (smallint, default 0)
    • language_id (text, foreign key [language.id])
    • next (integer, foreign key [word.id])
Clone this wiki locally