A simple image upload and annotation app. Made with ReactJS and Parse Server.
App built and tested on Firefox, Chrome and Edge (Windows 10).
- Ensure MongoDB Server v5.0.5+ is installed and running on default port
27017. - Ensure NodeJS v16+ is installed.
- To install all app dependencies, open a Command window andexecute the following command:
$ npm install
- Start the server by double-clicking the
run-server.batfile.- Alternatively, open a Command window and execute the following command:
$ cd src/server $ node .
- Alternatively, open a Command window and execute the following command:
- Start the client hosting service by double-clicking the
run-client.batfile. A browser window will open and the client page will load, indicating the hosting service is running correctly.- Alternatively, open a Command window and execute the following command:
$ npm start
- Alternatively, open a Command window and execute the following command:
- A live view of the database can be accessed via
parse-dashboard - To install
parse-dashboard, open a Command window and execute the following command:$ npm install -g parse-dashboard - Before running the dashboard, first ensure the server script is running. (See above: Host and run app)
- Navigate to the
src/serverfolder and double-click onlaunch-dashboard.bat- The dashboard can be accessed on localhost:4040
First-time visitors to the app will greeted by the registration page.
Enter your desired username (alphanumeric characters only) and password.
Re-enter your password to confirm it.
Click on the Register Me button to complete the registration. If successful, you will be brought to your personal projects page.
First-time visitors to the app will greeted by the registration page.
Click on the Login button to navigate to the user login page.
Enter your username and password.
Click on the Login button to complete the login. If successful, you will be brought to your personal projects page.
If your user credentials are incorrect, simply re-enter the correct credentials.
If you are logged in, the Logout button can be found on the top navigation panel.
Click on the Logout button to logout.
If you are logged in, the + Create New Project button can be found below the My Projects page title.
Click on the button and a page prompt will appear. Type in your desired project title and click OK.
A new project will be created and you will be brought to the empty project page.
If you are logged in, the buttons for your existing project can be found below the My Projects page title.
Click on your desired project button and you will be navigated to that project's page.
If you are logged in and have created at least one existing project, the + Upload New Images button can be found below the My Projects page title.
Click on the button and an upload window will appear. Select the images you want to upload to the project and click Open.
If successful, new images will be displayed automatically. Otherwise, re-click on the project button to refresh the page.
If you are logged in, have created at least one existing project, and have uploaded at least one image, the images for the currently selected project will be displayed.
Click on an image you desire to annotate. A full-sized image will pop up.
Click and drag across a feature of the image. A dropdown menu will appear. Select the category that best represents the feature.
Once complete, the feature will be labelled on the image.
Annotated images can be identified by a solid yellow border. Non-annotated images have dashed white borders.
Select an annotated image and click on the Download CSV button at the bottom of the full image to download the annotation coordinates.
The downloaded CSV file is structure as follows:
You can also download the entire projects' annotation data by clicking on the Download CSV [ All Images ] button the project's page.
The .env file encapsulates the port used for the app. Note that the default address is localhost:3000.
If you prefer not using the default create-react-app CD/CI hosting service, you can build the app by executing the command:
$ npm run build
Client-side source files will be compiled and a build folder will be created / updated with the current version of the app. Test for the correctness of the app by opening the build/index.html file in a new browser window.
The following NodeJS libraries were used to support the functions of the app: