office-spaces-crud

Build a CRUD office spaces application

Criteria:

• System should allow for users to create and manage office spaces.
• Home page should display all offices and a brief summary of occupants.
• User should be able to CRUD workers/staff memebers.
• User should be able to CRUD Offices.
• User needs to be able to search for workers within a office.
• Mobile responsiveness is a must.

How to run the application:

• Download/close the repository.
• Run "yarn" to ensure all dependencies are installed locally.
• Run "yarn start" to start the react server.

How to test the application:

• After you start the server, you should go to port 3000 or whichever one you have setup.
• You should land on the home view which will prompt you to add an office.
• After you have added an office, you should be able to view the newly created office from the home screen.
• Click anywhere above the border/underline to take you to the spefic office page.
• Click on the "More info" button underneath the border to view more information on the office.
• Once on the office view, you can select the top pen icon to "edit" your office
• From the edit view, you should be able to update the office and delete the office.
• Once back at the office view, you can click on the same button at the bottom right corner of screen to add a new staff member.
• Once clicked, you should be able to fill in a 2 step form that includes the names of the user and the avatar you would like to select for the staff member.
• Once staff member is created, you should be able to edit staff member by clicking on the icon to the right of the staff member.
• You are also able to delete the staff member from the edit view.
• Once back in the office view, you can search for a specific user and the result will be filtered to match the name.
• If no results appear on search, you can clear the search and search again or create a new staff member.
• You can repeat the above a few times to test different offices to ensure that they only have their users displayed when you view the office.
• Note: If you delete an office, all users are also removed (I assumed they would also want the users removed if the office is removed)

Deployed Link:

https://giordi-office-spaces-crud.vercel.app/

Technologies Used:

• CSS
• Javascript
• ReactJS
• Material UI
• Typescript
• Dexie (a light-weight wrapper on top of indexedDB)
• React Router

By:

Giordi Fungula