Memory Deck aims to help elderly individuals and those with memory loss retain valuable information through interactive flashcards. This is the frontend of Memory Deck — a useful tool designed to help users (especially the elderly or those with memory challenges) retain information through interactive decks of flashcards. The app emphasizes simplicity and clarity, enhancing its usability for its target audience.
- Next.js (React framework)
- TypeScript
- CSS
- Vercel (for deployment)
Here are the core parts of the application:
- Decks Home Page: Lists all available decks of the logged-in user. Users can view, edit, or delete a deck.
- Flashcard Editor: Allows users to create or modify flashcards inside a deck.
- Add Deck & Flashcard Forms: Simple forms for adding new revision content.
- AI Flashcard Generator: AI-powered, quick and easy deck generation functionality based on the topic and prompt provided.
- Single-Player Quiz Page: Single-player quiz mode to self-test with a time constraint and scoring.
- Multi-Player Quiz Page: Multi-player quiz mode to self-test and compete live with another user with a time constraint and scoring.
- Performance and Statistics: Displays the performance metrics of the user over the past quizzes over the chosen time period.
- Support and FAQs: A tutorial and FAQ page aiming to guide users through the platform and answer all the possible questions.
To get started with the frontend locally:
git clone https://github.com/your-username/MemoryDeck-Client.git
cd MemoryDeck-Client
npm install
npm run dev
Make sure the backend API is running locally on http://localhost:8080.
This project is deployed using Vercel.
To deploy:
Push changes to the main branch (Vercel automatically deploys it). The project can be accessed through the URL: https://sopra-fs25-group-40-client.vercel.app/
Here is a quick and simplified user flow of the app:
Begin by creating an account or logging in from the homepage. Once logged in, the user will end up on the decks homepage where they can access their previously created decks.
They can start by creating a "memory deck" and adding flashcards manually or using the AI-assisted option for automated and quick deck creation.
Manage these decks by editing or deleting cards as needed.
To review, initiate a quiz by selecting the deck, setting a time limit, and choosing the number of questions. Complete quizzes individually or invite another online user for a multiplayer session.
Track your quiz outcomes through performance summaries and detailed statistics provided at the end.
Use the available tutorials and FAQ section if further guidance is required.
Here are some possible features new contributors could add (includes the optional user story we did not implement):
- Search and Filter Decks: Implement a search bar or filter tags to allow users to easily find specific decks.
- Flashcard Enhancements: Support rich content in flashcards, such as audio clips or formatted text.
- Scheduled Test Reminders: Implement a scheduling and automated email reminder system that will notify a user to take their daily test at a previously scheduled reminder time.
This project is licensed under the MIT License. See the LICENSE file for details.
This project has come to life thanks to the members of Group 40 of the SoPra module: Melih Serin (melih.serin@uzh.ch), Sarah Nabulsi (sarahosama.nabulsi@uzh.ch), Nicola Luder (nicola.luder@uzh.ch), Shaurya Kishore Panwar (shauryakishore.panwar@uzh.ch), and Leyla Khasiyeva (leyla.khasiyeva@uzh.ch). If you have any questions or comments, you can reach out to us at any of the mentioned email addresses.
This project uses
next/font
to automatically optimize and load Geist, a new font
family for Vercel.