Intlle (derived from INTeLLigencE; read as intel but the l is soft like it can be heard in French) is a software aimed to synthesize learning benefits of mind maps and flash cards into a single package.
This project tries to leverage a range of small dynamic adjustments between its two main counterparts (i.e. mind map and flash cards) to provide more seamless and engaging studying experience.
-
Mind map environment
- Node management powered by the ReactFlow library
- Individual nodes' background, text color, and size customization
- Each node is complimented with its description, mapped to a corresponding flash card
- The nodes grow as they gain more connections to represent their significance in the network
- Nodes gain opacity as the user learns them in flash cards environment
- Nodes gradually start glowing more as the user accesses them to represent relevance
-
Flash cards environment
- Cards are parsed automatically from the mind map
- Ability to study map nodes in Anki-inspired way
- Connected nodes' titles are shown at the top to express relations between the concepts
- Time-based forgettance system
- Statistics panel depicting how rememberance of the whole network has changed over time
-
Mind maps up to 1Mb in size can be saved on the server by a unique ID
Live preview of the latest build on Frontend/main is available through Github Pages here
Ever needed to learn a complex subject with many interconnected definitions? Does it sometimes feel difficult even to just wrap your head around the ideas of some study?
Intlle tries to solve two problems when it comes to learning:
- Getting all the details right
- Seeing the big picture behind the separated concepts
The application approaches these problems with its dualistic design, featuring flash cards to nail down the data and a mind map editor to structurize and organize it in your mind beforehand. The main assumption of Intlle project is that this approach will boost one's learning rate beyond what is possible with only flash cards.
The general workflow is loosely as follows (feel free to explore the program to find your own approach):
- Create nodes corresponding to distinct ideas the knowledge you want to learn can be split up into (e.g. arithmetic operations, (which can be split up into) addition, subtraction, multiplication, division).
- Define and create meaningful connections between the nodes (e.g. arithmetic operations -> addition, arithmetic operations -> subtraction, addition -> multiplication etc.).
- Add descriptions to each node to explaining things in their title.
- Style the nodes and/or rearrange them to better understand how concepts are related and to structurize the knowledge in a useful way (so you can remember it easier and find interesting relations; for instance, you could connect division and multiplication to signify they are inverse operations to each other, or that they are both more complex than addition and subtraction - what suits your mind the best).
- To go to the learning menu, press the expand button at the bottom right of the contextual panel
- Once you feel ready, start learning your network in the form of flash cards.
You are shown only a card's title first so you would try to remember its contents. After doing so, click the card to reveal its description and choose the button that aligns with how much you remembered the most. To help you remember the right descriptions and build stronger connections between the concepts, cards' relations are shown at the top, so you can always navigate to connected ideas quickly and see the bigger picture.
RMB - Create a node
Drag with LMB pressed - Pan
Shift + Drag with LMB pressed - Multiselection (select by rectangle)
LMB pressed on a node - Select a node
LMB click on a connection - Select a connection
LMB + Drag from node's connection point - Begin a connection (release LMB on another connection point to make a connection)
Backspace - Remove the selected items
LMB = Touch
RMB = Touch & hold
multiselection features are not supported
Intlle uses Vite development environment as a base for React application coupled with ReactFlow library. Additionally, Recharts is used for statistics panel and uuid.js library provides unique identifiers for the nodes.
Download project's files either by cloning the repository or by navigating to Code > Local > Donwload ZIP at the top of this page and extracting the archive to a preferred folder.
Make sure Node.js is installed and configured on your system.
Next, open the system terminal and move to the project's directory, which is usually achieved by means of the cd (change directory) command, e.g.:
cd C:\Projects\Intlle
After that, install project's dependencies:
npm install
The project is now installed and ready to be used in development.
To build a static webpage from the source files, use:
vite build
To launch the local development server for the project, use:
npm run dev
To launch the local production server for the project, use:
npm run prod
The website's favicon is stored inside the public/ folder (as per Vite's default intialization process).
The source code is stored inside the src/ folder, where:
assets/contains all vector graphics used in the app;components/has every React component stored in a folder corresponding to its name alongside its dedicated stylesheet;pages/has every React component representing a whole website page in a folder corresponding to its name alongside its dedicated stylesheet.
main.jsx - Root wrapper module containing the Reactflow's Router element.
App.jsx - Main React application module including some high-level functionality, global variables' initialization, and defining application's main two Routes.
Context.jsx - A simple placeholder for React's ContextAPI.
Card.jsx - The main component for the flashcards.
Learning.jsx - The central part of the flashcards menu with studying-related buttons and learning logic.
Statistics.jsx - Small popup window depicting how rememberance of the whole scheme has changed over time (figure rendering is powered by recharts library).
Nodes.jsx - The main component for the mindmap.
CardPage.jsx - Module representing the 'front' side of the contextual menu (nodes' editing).
NodeEditor.jsx - Module representing the 'back' side of the contextual menu (nodes' styling).
ControlPanel.jsx - This module defines main menu and tutorial buttons (in mindmap mode).
Notification.jsx - Simple notification popup to provide visual feedback for backend/local storage interactions.
CustomNode.jsx - Reactflow-specific styling for the nodes in the mindmap.
CustomEdge.jsx - Reactflow-specific styling for the edges connecting the nodes in the mindmap.
You can create an issue in this repository marked as a bug to report a problem to the other contributors. Ensure you have provided enough information for other people to reproduce the issue and understand it.