User Manual
Network is our web application created for our capstone project. It was done using a React JS frontend, a Node JS backend, and a MongoDB database. You can view the application at: Network - A Personal Network Tracker. However, before you go, it might be helpful to read this manual to have an idea of what our application does, and how you can use it. This manual will serve as a guide in case of confusion while perusing our application.
Upon landing on the application (use the hyperlink above), you have the option to log in or register as a new user. If you have used the application before you can skip this step. As a new user you can sign up by clicking the Create New Account button. Once clicked, a modal will appear that allows for you to enter your first name, last name, email, desired username, and desired password; all fields must be filled. After you register then you will be routed to the homepage.
| Landing page | Sign up |
|---|---|
 |
 |
Upon landing on the application (use the hyperlink above), you have the option to log in or register as a new user. If you are a registered user, then you can enter your login credentials (username, password) and either click the Login button or press the enter key on your keyboard. Once your login credentials are verified you will be routed to a loading page while your saved contacts are being fetched. The homepage will appear soon after, thus allowing you access to your personal network.
| Login fields | Click login |
|---|---|
 |
 |
From here you are able add a contact, change how you view your contacts, filter your contacts, modify a contact, delete a contact, and sign out. Continue reading to learn more about what you can do in the application.
When you wish to add a new contact, you can do so by clicking the Add Contact button. Once clicked a pop-up modal will appear that has various input fields for the contact you want to add. Note: you do not need to fill all fields, only fill in what you want; we assume the user will update the information later or only wants to basic information on people within their personal network. After filling in the information you have on the contact, click the Save Contact button. This sends the "add" request to our database. If the add was successful then you will get an alert that says "New contact added to your network!". To close the alert and get back to the homepage click OK.
| Click add contact | Add contact clicked |
|---|---|
 |
 |
| Click save changes | Successful add |
|---|---|
 |
 |
When you wish to edit the information you have on a contact, you can do so by first clicking on the contact you wish to change. This will expand the contact which allows you to start the editing process, to actually start the process click the pencil icon and you will enter editing mode. Upon entering editing mode, change the information as desired, click the Save Changes button to save changes and close the modal. The contact will be reverted to list format and you will be able to see the updated contact entry. Note: in some cases you may need to refresh the page to get the updated contact, and contact modification is only allowed in list format.
| Expand a contact | Click pencil icon |
|---|---|
 |
 |
| Editing modal | Save your changes |
|---|---|
 |
 |
Updated contact
If it's time to burn bridges, or you and a specific contact are drifting apart, then feel free to remove any contact you desire. You can do so by first clicking on the contact you wish to delete. This will expand the contact which allows you to click the pencil icon to enter editting mode, from there you can click the Delete Contact button to delete it. Note: you cannot retrieve the contacts you delete, make sure you are deleting the correct contact.
| Expand a contact | Click pencil icon |
|---|---|
 |
 |
| Delete contact | The contact is no more |
|---|---|
 |
 |
When it comes to viewing your contacts, you have options. You can sort your contacts in alphabetical or reverse alphabetical order by their names (first or last), role, company. The first viewing option we will show you is the grid versus list format viewing of contacts. Upon your entrance into the application you will see the default method of viewing your contact is in list format. However, should you wish to change that you can click the Grid Format button to swap over to grid view. To switch back simply click the List Format button, and the contacts will be displayed in list format.
| Click grid format | Grid format active |
|---|---|
 |
 |
| Click list format | List format active |
|---|---|
 |
 |
The second viewing option we will show you is the "Order By" format viewing of contacts. Upon your entrance into the application you will see the default order of your contacts is alphabetical order according to the contacts' first name. To change the order, click the Order By button. This is open a drop-down menu where you can choose how you want to sort; you can choose to sort by first name, last name, role, and company in alphabetical or reverse alphabetical order.
| Click Order by | Order by clicked |
|---|---|
 |
 |
Order by results
When you don't feel like scrolling through all your contacts you can quickly bypass the struggle by using the search bar. The search bar dynamically updates the contacts listed to align with your search term. This allows you to find a specific contact or find contacts that have a specific role, name, company, etc.
| Search bar | Search results |
|---|---|
 |
 |
When you're done viewing, modifying, and adding to your personal network you can easily click the Sign Out button which takes you back to the login page.
| Click sign out | Back to the drawing board |
|---|---|
 |
 |
There are threee methods of building this application: by script, manually, and automatically; we deployed our application with Heroku and utilze Travis CI to automatically deploy after it passes our unit tests, which will be explained shortly.
If you wish to save yourself some effort you can use the shell script "build.sh" (found in the main folder of this repository) to start the application via an IDE or CLI. All you need to do is ensure you are in the main folder, type ./build.sh, and you should see a message stating "Node.js server is running on port 4001." And you're done!
If you wish to manually build and run the application via IDE or CLI you can take the following steps:
- Ensure you are in the repository (/4)
- In the main folder, type
node app.jsin the command line. This will start the server vialocalhost:4001in your browser. - Navigate to the "frontend" folder, then type
npm run buildin the command line. This will create an optimized build of the frontend files.- If you only wish to develop within the frontend directory without re-building every change you can simply type the command
npm startin the command line. If you do this, you do not need to re-start the server.
- If you only wish to develop within the frontend directory without re-building every change you can simply type the command
- Open your browser and type
localhost:4001in the search bar and press enter. You should see the application up and running.
Common errors occurring during the build process can be solved in the following steps:
- In the main folder, type
rm -rf /node_modulesin the command line. - Then type
rm package-lock.json(DO NOT DELETEpackage.json!) - Finally type
npm install. This will update the dependencies and will likely solve compilation problems.
If you wish to build the code automatically all you need to do is either commit code to the repository and a Travis CI build will start automatically; should the code pass our pre-defined unit tests, then the code will be deployed thanks to the deployment components of the .travis.yml file. If you do not have code to commit then you can navigate to Travis CI, and given you have access to the repository, you will be able to restart the build and the process will then be the same as stated previously.
Erynn Phan
Gabriella Long
Kian Nizrad
Matt Dalton
Saumya Dedhia
Summer Farren