The application allows users to create and share flashcards with a front side (prompt) and a back side (answer).

Flashcards are organized into "decks" which contain a similar topic or theme. Users can review decks, which will present flashcards that are new or are due for review.

A user can view a list of decks, which are paginated. The user can see how many cards are within the deck, how many subscribers the deck has. They can view the deck, subscribe/unsubscribe to the deck (which acts as a favourites feature, and allows the user the visit a list of only subscribed decks), or create a new deck.
When they select a deck, they are presented with a page showing details about the deck such as the cards within it, a button to "review" the deck which takes them to a full window modal user interface, or if the user is the one who created the deck then they have the option to edit/delete the deck or the cards within the deck.

The system implements a spaced repetition based algorithm which shows users cards that are either new (never reviewed before) or due for review, and lets them know when they have finished reviewing all the cards in a deck.

The next review time of a flashcard is calculated based on how difficult it was for the user to remember the flashcard. After a flashcard's answer is shown, the user selects easy, normal, or hard as the difficulty. The flashcard is due sooner if the user selects 'hard', and is due later if the user selects 'easy'.

The application is made of a REST API backend in Django, and a separate React.js frontend. The project is different and more complex than previous projects because of the following reasons:

1. Backend: The backend logic is more complex than previous projects. The application requires more advanced queries, and working with timestamps (UTC) in the database to determine the status of a flashcard to categorize it as either:

   • New: A flashcard which the user has never seen before
   • Due: A flashcard which is one that the user has reviewed before, and enough time has past that it should be reviewed by the user again
   • Early: A flashcard which has been reviewed by the user but is not yet due for review, and is only shown when there are no more "new" or "due" cards in a deck.
   • To accomplish this, I made use of values_list to return only the card id and the due date for cards within a deck. This was done so that a model object would not be created for each instance, and to make it easier to use a set within python to divide the cards into groups or 'new', 'due' and 'early'. This is more efficient than retrieving the models for all of the cards within the deck because the content is only needed from the card randomly chosen from either the 'due' set, 'new' set, or 'early' set (listed in priority order).

2. Frontend: The frontend uses React (utilizing create-react-app), and is designed to be served statically without the use of Django templates as a SPA (Single Page Application).

   • It utilizes react-router to make it appear as though there are different pages. This provides the illusion of multiple separate pages while not requiring page loads.
   • All data is fetched from the Django REST API, ensuring that the csrf token is obtained from the backend, and that it is sent in requests as part of the header (limited to same origin to prevent leakage).
   • The js library react-bootstrap is used to be able to use bootstrap components within JSX which makes the Javascript code more easily readable and clean.

• frontend/ - this directory contains the react frontend. The react frontend was initialized using create-react-app, which generates the toolchain required for react development including babel for transpiling javascript for the final build, webpack, and npm scripts to run a development server (npm start) and to produce a build ready to deploy on a server (npm build). All files under this directory, except for some files under the src/ directory are auto generated by create-react-app.

• frontend/package.json - This file has the required npm packages and config for the react app. The setting "proxy": "http://localhost:8000" was added to allow requests (during development) to be proxied from http://localhost:3000, which is the url and port used when running the frontend with npm start, to http://localhost:8000 which is the url and port used by the Django backend. The proxy config ensures the frontend and backend appear like they are on the same domain.

• frontend/src/App.js - This file contains the App react component and was modified to add react-router routes for major logical pages within the app such as /login, /register, /decks. It also handles fetching the user login data using the Django REST API. The REST API uses session based (cookie) authentication, and also ensures the csrf cookie is set in its responses.

• frontend/Pages.js - This new file provides react components which serve as top level pages, such as login page, register page, decks page, 404 page. These are used within App.js along with react-router to render various pages at different url paths.

• frontend/src/index.css - This file contains the CSS styling for the react app and was modified to customize the CSS styles for the application.

• frontend/src/FetchHelper.js - This file contains helper functions used to fetch data in multiple react components. It ensures the csrf token, read from the csrf cookie, is provided in request headers. It also adds the 'mode: same-origin' header to ensure the csrf token won't be sent to other domains.

• frontend/src/components/Deck.js - This file contains the react component which renders a Deck. It is used to show a deck that has been selected by a user, and allows users to review the cards within the deck, add/edit/delete the deck or cards for the deck (if the user owns the deck).

• frontend/src/components/DeckFormModal.js - This file contains the react component which renders the modal form dialog for creating, updating/editing, deleting decks.

• frontend/src/components/DeckList.js - this file contains the react component which renders the list of decks. It is used to show the user a list of decks to choose from. It handles pagination of the decks (pagination is done on the backend REST API, and the frontend requests the page to get data for)

• frontend/src/components/DeckReview.js - this file contains the react component which renders the UI when the user is reviewing cards in a deck. It gets a card (randomly ordered) to review from the backend REST API. The progress of the review of cards in the deck is shown via a progress bar that shows how many cards are left to review (new vs due vs done).

• frontend/src/components/Flashcard.js - this file contains the react component to render a table of flashcards (used when viewing a deck), and also the react component to render the flashcard when the user is reviewing the cards in a deck; either the front or back of the card is shown, and controls change depending on the side shown. When the front of a card is shown, the user has an option to flip it to show the back. When the back of a card is shown, the answer is also shown, and the user has an option to enter the difficulty of remembering the answer (as easy, normal, or hard) which will be send to the REST API backend to schedule the next review of the card.

• frontend/src/components/FlashcardFormModal.js - this file contains the react component which renders the modal form dialog for creating, editing and deleting flashcards.

• frontend/src/components/Login.js - this file contains the react component which renders the login form.

• frontend/src/components/NavHeader.js - this file contains the react component which renders the navigation header bar. It makes use of bootstrap via the react-bootstrap library. The Navigation is mobile responsive.

• frontend/src/components/Paginator.js - this file contains the react component which renders the pagination controls used for the deck list. It provides next/prev buttons that are only enabled when there is a next or prev page respectively.

• frontend/src/components/Register.js - this file contains the react component which renders the register page, used by a user to sign up to the application.

• flashcards/views.py - this file contains the REST API view handler functions. The frontend uses these to get data from the backend, and to update or create data in the backend.

• flashcards/urls.py - this file contains the routes configured for the REST API backend.

• flashcards/tests.py - this file contains unit tests for testing the REST API backend.

• flashcards/models.py - this file contains the Django Model classes which represent the backend data model. The models for cards, reviews, decks, and users are defined here.

• flashcards/admin.py - this file has configuration for the /admin page of Django.

• requirements.txt - this file has python dependencies required for the application.

Install dependencies

1. For react: cd frontend && npm install
2. For python: pip3 install -r requirements.txt
3. Run migrations: python3 manage.py migrate

To run the application (for development) there are two steps:

1. Start the backend: python3 manage.py runserver

2. start the frontend development server: cd frontend && npm start

The following npm modules were installed in the frontend react application, and are part of the package.json configuration:

• react-bootstrap (https://www.npmjs.com/package/react-bootstrap)
• react-router-dom (https://www.npmjs.com/package/react-router-dom)
• js-cookie (https://www.npmjs.com/package/js-cookie)

create-react-app was used to generate the build toolchain and starting files for in the frontend/ directory. The default react logo, icon, .gitignore, and other boilerplate files created by create-react-app are left unchanged; these came from react and have not been changed. These generated files include frontend/public/*, frontend/src/index.css