Cardley is a modern flash card app made for people who like to learn. It incorporates modern scientific findings on how people learn to help you learn effectively.
There is a sister repo for the Cardley API.
We have some sample users that you can use to play around with the site, and you can also create your own account.
| password | |
|---|---|
| [email protected] | password |
| [email protected] | password |
| [email protected] | password |
| [email protected] | password |
- Creating a deck. You can edit decks you own but you can't create new ones yet so you will need to use one of the above accounts if you want to try and edit cards.
- Lots of other things, several buttons don't take you where they should for example! (use the menu!)
- Minutes are actually seconds in the timer settings!
To set up the frontend locally run the following commands in your terminal git clone <front-end-repo-url>, cd, npm i, npm start.
(frontend repo url: https://github.com/fac19/Cardley.git)
(To run the tests on the front end, run npm run test instead of npm start).
One thing to be aware of is the backend URL. In the production repo the URL of the backend is live. To truly run the project locally (strongly recommended for development):
- run the API server locally by
git clone <back-end-repo-url>,cd,npm i,npm run dev. (backend repo url:https://github.com/fac19/Cardley---backend.git) - Set up databases as instructed here
- Make sure the backend is running on
localhost:3001 - change the URL the frontend uses to access the API, found at
Cardley/src/utils/fetchData/backend-url.jsto
// const url = 'https://cardley-api.herokuapp.com/';
const url = 'http://localhost:3001/';
export default url;
// make your choiceThis is a React project with a number of libraries:
| Library | Purpose |
|---|---|
| React-router-dom | page-routing |
| proptypes | type-checking |
| Library | Purpose |
|---|---|
| Material-UI | Component library for UI elements |
| clsx | styling utility |
| styled-components | styling utility |
| react transition-group | animations |
| react flash message | temporary components, used for error messages |
| react card-flip | a card-flip effect |
| react-confetti | a confetti effect |
| Library | Purpose |
|---|---|
| react-quill | text editor that creates html-formatted strings |
| html-to-react | parse html strings to React components |
Note: the editor is subject to change. Changes to the editor would mean changes in the component CardEditor at Cardley/src/components/cards/CardEditor.js and would entail corresponding changes to the display in CardFace at . Cardley/src/components/cards/cardFace.js
This is an open source project. We love contributors, so get involved! (not actually true yet, we need to add a license)
- Roger-Heathcote
- VatsKan (Vatsal Kanoria)
- Ivo-Evans
- Tacotoemeck (Tom Wagner)
We tested and adjusted our Figma prototypes after doing user surveys. Planned detail user flows and used several agile methadologies in the design stages.
The backend is a RESTful API, for more info on the routes, see the backend repo.
We use Github's issue tracker to track issues, and we assign labels for priority and estimates.
Priorities range from P1-P4, where P1 is the most urgent and P4 the least. Estimates start and E1 and go up, where a single E unit represents an hour of one person's time, or half an hour of pair-programming.
If you make an issue, you should give it E and P labels. When you complete an issue you should give it an A label, to indicate how long the issue actually took. A labels use the same scale as E labels.
We use the Airbnb linting config, which is run with husky on commit. We ask that you don't git commit --no-verify.
You can find the docs for Material UI components here
The project is written with React hooks in a largely functional style.