Giter Site home page Giter Site logo

satinto / memry Goto Github PK

View Code? Open in Web Editor NEW
4.0 2.0 0.0 1.66 MB

A flash-card app created using ReactJS on top of Ionic + Capacitor

License: Creative Commons Zero v1.0 Universal

HTML 1.12% TypeScript 6.73% CSS 10.64% JavaScript 79.22% Java 2.29%
reactjs ionic-framework ionic-capacitor flashcards automation android ios cross-platform web desktop nodejs

memry's Introduction

Memry

Flash Card, Quiz based cross-platform app created by ReactJS on top on Ionic + Capacitor Framework

Project Status

Comming soon

Table of contents

  1. Setup and Contribution Guidelines
  2. Versioning Guidelines
  3. Commit Conventions
    1. Format of commit message
    2. Definitions
    3. Examples
  4. PR Conventions
    1. PR Description format
  5. File structure
  6. License

Setup and Contribution Guidelines

The following are the rules and guidelines to follow when contributing to this project.

  1. Create your own branch or fork.
  2. Do not directly commit to the basic branches of the projects namely, master, dev, unit.
  3. PRs should be merge to the dev branch.
  4. To avoid conflict when a new feature has to be added to the pre-approved branch, compile it as an issue.
  5. Automate the closing of a project card by adding Closes #[Issue no.] footer on a commit.
  6. Use dev branch as the base branch for your new branch when using git checkout
  7. Do not forget to git pull origin dev before submitting a PR or re-executes when a conflict occur to fix it on your local machine.
  8. Do not fix conflicts on github platform. Practice doing it on your local machine.

Versioning Guideline

The versioning will be generated automatically. This section is for reference only.

Format: MAJOR.MINOR.PATCH >>> (e.g. 10.2.41)

The commit contains the following structural elements, to communicate intent to the consumers of your library:

  1. fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in semantic versioning).
  2. feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in semantic versioning).
  3. BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in semantic versioning). A BREAKING CHANGE can be part of commits of any type.
  4. types other than fix: and feat: are allowed, for example @commitlint/config-conventional (based on the the Angular convention) recommends build:, chore:, ci:, docs:, style:, refactor:, perf:, test:, and others.
  5. footers other than BREAKING CHANGE: may be provided and follow a convention similar to git trailer format. Additional types are not mandated by the conventional commits specification, and have no implicit effect in semantic versioning (unless they include a BREAKING CHANGE).

Commit Conventions

You can also use tool such as Commitizen for generate the commit for you need. Commitizen is a tool that enables to enforce a commit message format using the command line:

Format of commit message

<type />(<scope />): <subject />

<body />

<footer />

Definitions

Type Description
chore updating grunt tasks etc; no production code change. "grunt task" means nothing that an external user would see
ci to identify development changes related to the continuous integration and deployment system - involving scripts, configurations or tools
docs to identify documentation changes related to the project - whether intended externally for the end users (in case of a library) or internally for the developers.
feat to identify production changes related to new backward-compatible abilities or functionality
fix to identify production changes related to backward-compatible bug fixes
perf to identify production changes related to backward-compatible performance improvements
refactor to identify development changes related to modifying the codebase, which neither adds a feature nor fixes a bug - such as removing redundant code, simplifying the code, renaming variables, etc.
style to identify development changes related to styling the codebase, regardless of the meaning - such as indentations, semi-colons, quotes, trailing commas and so on.
test to identify development changes related to tests - such as refactoring existing tests or adding new tests.

Examples

Commit message with description and breaking change footer

feat: allow provided config object to extend other configs
BREAKING CHANGE: `extends` key in config file is now used for extending other config files

Commit message with ! to draw attention to breaking change

refactor!: drop support for Node 6

Commit message with both ! and BREAKING CHANGE footer

refactor!: drop support for Node 6

BREAKING CHANGE: refactor to use JavaScript features not available in Node 6.

Commit message with no body

docs: correct spelling of CHANGELOG

Commit message with scope

feat(lang): add polish language

Commit message with multi-paragraph body and multiple footers

fix: correct minor typos in code

see the issue for details

on typos fixed.

Reviewed-by: Z
Refs #133

PR Conventions

  1. The PR should always have descriptive summary of the content
  2. The PR should have detailed PR Description of its content

PR Description format

#### What does this PR do?

#### Description of Task to be completed?

#### How should this be manually tested?

#### Any background context you want to provide?

#### What are the relevant pivotal tracker stories?

#### Screenshots (if appropriate)

#### Questions:

File Structure

The file structure follows the basic ReactJS File structure. Any customization will be documented here in the future.

License

This project is licensed under the CC0-1.0 - see the LICENSE file for details.

memry's People

Contributors

lluprisinglll avatar kimjayluta avatar

Stargazers

Positron avatar  avatar  avatar

Watchers

James Cloos avatar  avatar

memry's Issues

App Optimization

Optimize after the development of Set items and Play Section to reuse components

The item list does not re-render when adding new one

Si component mong ItemList dae nagrere-render kapag nag add item ka gamit ang CrudCard. Para i-solve ni, ang gagamiton mong state sa ItemList saka CrudCard parahas (possible sa pag gamit kang Context API as state)

Collection Page Functionality

The functionality or logic of the work-space system is very similar to the existing one.

The difference is that, in order to create multiple collections containing multiple cards. We have to create a unique LocalStorage key for every collection to contain cards instead of hardcoding the "item" as the key for our cards.

That means, we will have multiple LocalStorage rows here: (Please see attached image)
image.png

Revision of the Reset Workspace functionality

  • When Deleting all workspace it should also remove from the local storage all Cards data.
  • When Deleting an specific workspace it should also remove the cards from that workspace.

Add a Confirm Alert box in Delete buttons using ionic Alerts

Description:
Alert should prompt when user tapped the Delete button in CrudCard page and DeleteAllitem button in SetItems page. The current functionality deletes directly the items when tapping the buttons.

Sample Image:
image.png

  • Confirm Alert in SetItems page
  • Confirm Alert in CrudCard page

Link of the Docs:
Ionic Alert Docs

**Initial Documented Guidelines on MD**

  • Introduction
  • Table of Contents
  • Setup Guidelines
  • Contribution Guidelines
  • Semantic Versioning (specify that this is for reference only and will be automated)
  • Semantic Commit and PRs guidelines
  • File structures
  • Changelog
  • License

Collection | Collection Title overlaps

Current Behavior:
When adding a long Collection title, the text overlaps through its container.

Expected Result
The title font size should adjust when it is long engouh to be in the new line.

Important UI Challenges to overcome.

Let's get straight to the point. There are times that our UI will be broken either intentionally or unintentionally by the users. Here are the following UI challenges we will overcome to minimize the chances of this from happening.

  • The workspace's card (A collection card) must have an ellipsis effect when its title overflows.
  • The number in indicators must be in simplified formatted. For instance; use 1k instead of 1000, use 1M instead of 100000, use 14.3K instead of 14300, etc.
  • Responsive Title. By default use a large title for every card item, but decrease its font size with respect to its character length. After hitting the minimum allowed font size, use the ellipsis effect to handle the overflowing title.

`Play` Section Page UI/Component

Play Section - Front Card

image

Play Section - Back card

image

Play Section Results

image

This Requires the following

  • Interactive UI/UX Components
  • Storage Implementation with data from #15 Issue.
  • Route back to the homepage

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.