👍🎉 First off, thanks for taking the time to maintain! 🎉👍
The following is a set of guidelines for maintaining iCanSort. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
- Maintenance Guide to iCanSort
You can download the software directly here.
We also provide you a User Manual here.
- 2GB RAM minimum
- 300MB disk space minimum
- 1024 x 768 monitor resolution minimum
- Internet connection for visiting GitHub
- This software requires operating system (low configuration tested):
- Windows: Windows 10 20H1 x64
- macOS: macOS Mojave 10.14.6
- The software needs a 64-bit Operating System
- The software needs to call the device's default browser; Microsoft Edge (new), Google Chrome, Safari or Firefox are preferred.
- You’ll need to have
[email protected]with[email protected]but NO later version on your local development machine.
The software iCanSort is a learning tool to help students study and visualise sorting algorithms and their correctness available on Windows and macOS. This project i-can-sort is built with React and Electron based on NodeJS with npm.
You can follow the link below to download for Windows and Mac. Note that npm will be downloaded and installed together with Node, so here we only provide you the link to download Node.
For Windows 64-bit, you can download and install:
For Mac, you can download and install:
Or you can find downloads that fits your system here by yourself:
Now you shall be able to execute node -v in your terminal and see v14.15.3
For clone the project, you can use both HTTPS or SSH. Please make sure you have configured SSH in your machine and GitHub if you want to use SSH.
- Clone via HTTPS:
git clone https://github.com/team10nb/i-can-sort.git - Clone via SSH:
git clone [email protected]:team10nb/i-can-sort.git - Download ZIP: Click_To_Download
In the project directory, you should run following command in your terminal in order to configure the dependencies.
Goes to the directory which is the root of this project folder you downloaded
npm install -g [email protected]
To install the specific npm version 6.14.9
Make sure that you see 6.14.9 in your terminal.
To ensure that you install the specific npm version 6.14.9.
Installs all the development dependencies.
If this step took more than 10 minutes, you shall consider to connect to eduroam or open a VPN and set proxy for npm.
npm config set proxy http://server:port
npm config set https-proxy http://server:port
Note that using a mirror may result in some error for some reason. Please use official registry.
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
Now you shall see iCanSort in your browser.
Note that using broswer view the app does not utilise electron features, 'view Group's website' and 'export note' functions cannot work. The performance is somehow reduced either due to the browser.
Launches the test runner in the interactive watch mode. See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
See the section about deployment for more information.
Builds the app and launch electron to hava a development view of this app.
Builds the app and create an installer for Windows to the dist folder.
Builds the app and create an installer for Mac to the dist folder.
Launch a web view of the Style Guidist.
This will build JavaScript Doc in each folder and display them in a webpage.
iCanSort
├── src
│ ├── index.js
│ ├── components
│ └── scenes
│ ├── mainPages
│ └── subPages
└──
Each component in components folder has five files. The component itself, its documentation, test, test log, test plan. Please follow the style as the example below.
InputBar
├── InputBar.jsx
├── InputBar.md
├── InputBar.test.jsx
├── TestLog_InputBar.md
└── TestPlan_InputBar.md
In source code like InputBar.jsx, please write your name and purpose as follow.
/*
Author: Your Name
Introduction and purpose
External Library used
*/In documentation like InputBar.md, please follow the guide in JavaScript Documentation Styleguide.
In test file like InputBar.test.jsx, please write your name as follow.
/*
Author: Your Name
*/In TestLog and TestPlan， please follow the sample in src/TestLog and src/TestPlan
All JavaScript code is linted with Prettier.
-
Download the folder from the following website to check the documentation for iCanSort.
https://github.com/team10nb/i-can-sort/blob/main/styleguide/ -
Or click link below to see the web documentation if you are the marker of GRP who downloaded documentation we uploaded through moodle/MS Form
-
The styleguide configuration file can be found in:
https://github.com/team10nb/i-can-sort/blob/main/styleguidist.config.js -
Open the source code and find the related Markdown file to edit the documentation.
Example: edit the documentation of the component AlgorithmButton in the
src/components/AlgorithmButton/AlgorithmButton.mdfile. -
For more information about the styleguide, please visit the official website of Styleguide (hugeinc.github.io)
Use angular style.
<type>(<scope>): <subject>
docs(README): fix grammar
fix(Main): fix function call
The styleguide in the previous chapter includes our coding convention. We follow the guide we defined, which makes the structure clear and code clean.
The team has two members who are mainly responsible for UI design, and they are also responsible for quality assurance.
The two members monitored coding process of the project, including structure, testing, documentation.
They also conducted Release Testing and Acceptance Testing by their own. They checked whether the system worked as the plan expected and remind technical team if there is anything wrong.
The team did peer programming for each piece of code. Each component we built was coded by two people. One would be monitoring while the other was coding. That is an effective method to advoid problems, such as wrong naming, missing semicolon, and no comments.
The team utilised StyleGuidist for documentation. Each component and main scenes are documented carefully for maintenance purpose.
If you have downloaded the whole project, you can view the web through JavaScriptDoc.
The whole folder is in https://github.com/team10nb/i-can-sort/blob/main/styleguide/
For each component and three main pages, unit tests and integration tests are written. The tests will be automatically conducted by script npm test.
Our quality assurance team conducted release testing after all the necessary features were done. Our stakeholders participated in the acceptance testing.
A CI server on GitHub is utilised to conduct tests every time there is a push request. The team will receive email from GitHub if tests failed and will fix problems at once.
View CI server by: https://github.com/team10nb/i-can-sort/actions
The team utilised Issues and kanban to track tasks and report bugs.
Issues are available in https://github.com/team10nb/i-can-sort/actions
Kanban is available in https://github.com/team10nb/i-can-sort/projects/1
To see the user manual, check out the User Manual.