-
Deployed Client: SpaceSaver Client
-
Repository: github.com/Space-Saver-Bookings/space-saver-client
-
Deployed Server: SpaceSaver Server
-
Repository: github.com/Space-Saver-Bookings/Space-Saver-Server
- Repository: github.com/Space-Saver-Bookings/Space-Saver-Docs
SpaceSaver is a web application designed to streamline office space bookings and enhance communication about room availability within an office space. Our goal is to simplify the process of reserving rooms and signal their availability to others.
- Deployed Client and Repository
- Deployed Server and Repository
- Part A Documentation
- Installation
- API Documentation
- Testing
- Libraries and Dependencies
- Project Management
- User Stories
- Retrospective
To use the production app, please visit https://space-saver.netlify.app/ and create an account. To use the app locally, please follow the below instructions.
Requirements:
- Node.js 18.17
- MongoDB. If you do not have MongoDB installed, please follow the installation instructions here and make sure that Mongo is running locally.
Server:
- Create a directory on your machine named SpaceSaver and navigate into it.
- While in the SpaceSaver directory, from the command line, clone the server repo:
git clone https://github.com/Space-Saver-Bookings/Space-Saver-Server.git. - Navigate into the Space-Saver-Server folder:
cd Space-Saver-Server. - Install npm packages with:
npm install. - Make sure that Mongo is running.
- Seed the Mongo database with the following command:
npm run seed-devto view dummy data in your local application. - From the command line, run:
npm start-devto start the local server. - The server will run on localhost port 3000.
Client:
- From the command line, navigate into the SpaceSaver root directory and clone the client repo:
git clone https://github.com/Space-Saver-Bookings/space-saver-client.git. - Move into the space-saver-client folder:
cd space-saver-client. - Install npm packages with:
npm installoryarn install. - Make sure that your local server is still running on port 3000.
- From the command line, run:
npm run devoryarn run devto start the local client. - The server will allow requests from localhost 3000.
- A browser window will open.
Details for how to use the API for the local or deployed server can be found in the SpaceSaver Server repository
This application underwent thorough testing, primarily in Chrome Version 119.
Our user testing process was comprehensive, ensuring a smooth and reliable experience for end-users. We conducted extensive testing sessions to validate the application's usability, functionality, and overall performance.
The client benefits from a robust automated testing framework implemented through Github Actions. Leveraging the power of Vitest and the React Testing Library (testing-library.com/docs/react-testing-library/intro/), our client-side testing ensures the functionality and integrity of the application.
On the server side, automated testing is seamlessly integrated into our development workflow through Github Actions. The testing suite incorporates Jest for comprehensive testing capabilities and Supertest to facilitate API endpoint testing. This ensures the reliability and stability of the server components.
The project utilises a variety of libraries and dependencies to enhance functionality, styling, testing, and development workflow:
Dependencies:
-
@emotion/react (^11.11.1): Provides CSS-in-JS styling for React components.
-
@emotion/styled (^11.11.0): A utility for styling React components with Emotion.
-
@fullcalendar/core, @fullcalendar/daygrid, @fullcalendar/react, @fullcalendar/timegrid (^6.1.10): Offers a feature-rich calendar component for React applications.
-
@mui/icons-material, @mui/material (^5.14.19, ^5.15.0): Material-UI components and icons for React applications.
-
@mui/x-date-pickers (^6.18.4): Extension package for Material-UI, providing additional date picker components.
-
axios (^1.6.2): A promise-based HTTP client for making requests to a server.
-
dayjs (^1.11.10): A lightweight and modular JavaScript date library for parsing, validating, manipulating, and formatting dates.
-
jwt-decode (^4.0.0): Decodes JWT tokens, useful for extracting information from tokens.
-
prop-types (^15.8.1): Runtime type checking for React props.
-
react, react-dom (^18.2.0): Core libraries for building React applications.
-
react-hook-form (^7.49.2): A library for managing forms in React applications.
-
react-hot-toast (^2.4.1): Lightweight and customisable toasts for React applications.
-
react-router-dom (^6.20.1): Declarative routing for React applications.
-
zustand (^4.4.7): A small, fast, and scalable state management library for React.
DevDependencies:
-
@testing-library/react (^14.1.2): Testing utilities for React applications.
-
@types/react, @types/react-dom (^18.2.37, ^18.2.15): TypeScript type definitions for React and React DOM.
-
@vitejs/plugin-react (^4.2.0): Vite plugin for React support.
-
@vitest/coverage-v8 (^1.1.0): Code coverage tool for V8 JavaScript engines.
-
autoprefixer (^10.4.16): PostCSS plugin to parse CSS and add vendor prefixes.
-
eslint (^8.53.0): Linter for identifying and fixing problems in JavaScript code.
-
eslint-config-prettier (^9.1.0): Shareable ESLint configuration that disables rules that conflict with Prettier.
-
eslint-plugin-react (^7.33.2): Additional ESLint rules for React.
-
eslint-plugin-react-hooks (^4.6.0): ESLint plugin for React hooks.
-
eslint-plugin-react-refresh (^0.4.4): ESLint plugin for React Fast Refresh.
-
jsdom (^23.0.1): A JavaScript implementation of the DOM and HTML standards for use with testing.
-
postcss (^8.4.32): A tool for transforming CSS with JavaScript plugins.
-
prettier (^3.1.0): Code formatter to ensure consistent code styling.
-
prettier-plugin-tailwindcss (^0.5.8): Prettier plugin for Tailwind CSS.
-
tailwindcss (^3.3.6): Utility-first CSS framework for rapidly building custom designs.
-
vite (^5.0.0): A next-generation frontend tooling.
-
vite-plugin-eslint (^1.8.1): ESLint integration for Vite.
-
vitest (^1.1.0): A lightweight testing library for Vite.
Dependencies:
-
bcryptjs (^2.4.3): A library for hashing and salting passwords, enhancing security.
-
cors (^2.8.5): Middleware for enabling Cross-Origin Resource Sharing (CORS) in the Express.js framework.
-
dotenv (^16.3.1): A zero-dependency module for loading environment variables from a
.envfile intoprocess.env. -
express (^4.18.2): A fast, unopinionated, minimalist web framework for Node.js, used for building server-side applications and APIs.
-
helmet (^7.1.0): A collection of middleware functions to help secure Express.js applications by setting various HTTP headers.
-
jsonwebtoken (^9.0.2): A library for creating and verifying JSON Web Tokens (JWTs), commonly used for authentication.
-
mongoose (^8.0.2): A MongoDB object modelling tool designed to work in an asynchronous environment. It provides a straightforward schema-based solution to model application data.
DDependencies:
-
jest (^29.7.0): A JavaScript testing framework for Node.js applications. Jest provides a test runner, assertion library, and other testing utilities.
-
nodemon (^3.0.2): A utility that monitors for changes in files and automatically restarts the Node.js application when changes are detected. It's commonly used during development to streamline the testing and debugging process.
-
supertest (^6.3.3): A library for testing HTTP assertions, often used in conjunction with Jest to test API endpoints and HTTP requests.
Reflecting on our project journey, it's clear that our initial planning methodology provided a solid foundation for our MERN stack application development. As we progressed, we encountered the need to make decisions and adjustments based on the realities of our timeline and resources.
One significant adaptation was the decision to streamline our efforts by dividing tasks into frontend and backend development, aligning them with our team members' skill sets and interests. This pragmatic approach allowed us to leverage individual strengths, enhance productivity, and maintain a focus on delivering a quality product within our constraints.
While this division of labour proved effective and contributed to the project's success, we acknowledge that given more time, we could have delved deeper into certain areas. The constraints of time prompted us to make thoughtful trade-offs and prioritise essential functionalities, sacrificing in-depth exploration of certain features.
In retrospect, the collaborative and adaptive nature of our team played a crucial role in overcoming challenges and finding innovative solutions. The use of Trello, the adoption of agile methodologies with sprints, and the integration of collaborative tools like Discord for pair programming facilitated efficient communication and coordination despite geographical differences.
Moving forward, we recognise the value of continuous improvement and learning from our experiences. While we celebrate our achievements within the given constraints, we also acknowledge the areas where additional time and exploration could have enhanced the overall project. This reflection serves as a valuable lesson for future endeavours, emphasising the importance of balancing scope with available resources and making strategic decisions to ensure successful project outcomes.
SpaceSaver's user stories outline a comprehensive set of features and functionalities aimed at creating a Minimum Viable Product (MVP) for efficient space management within office spaces. The core aspects include an account system, space management, user access management, booking management, and a central dashboard:
-
Account System (Feature 1):
- Implemented a user account system for login functionality.
- Stored essential user data for various application features.
- Integrated JWT-based authentication for security.
-
Space Management (Feature 2):
- Enabled users to create and join spaces with flexible permissions.
- Facilitated space and room creation, allowing admins to manage spaces effectively.
-
User Access Management (Feature 3):
- Provided users with access to information about others in the same space.
- Allowed non-admin users to invite others to a room.
- Gave admin users full control over user access management within a space.
-
Booking Management (Feature 4):
- Implemented a robust booking management system.
- Users could create, view, update, delete, and invite others to bookings.
- Integrated calendar overview for visualising space bookings.
-
Dashboard (Feature 5):
- Created a central hub for users and admins with a user-friendly interface.
- Included sections like headers, sidebars, and main content areas.
- Featured sub-sections for user details, calendar access, room availability, and quick booking.
While the primary features were successfully addressed, it's noted that certain "nice-to-have" or optional features, such as additional authentication methods, robust user access management, notifications for bookings, and analytics in the dashboard, were not fully implemented due to time constraints.
Edward and Jordan take immense pride in the successful completion of this project. Their dedication and hard work not only met their own high standards but also left the client, thoroughly satisfied. Throughout the journey, they operated seamlessly as a team, supporting each other through challenges and maintaining a positive spirit, even in the face of unexpected bugs.
Despite the challenge of coordinating work across different continents, with Edward based in Europe and Jordan in Australia, they faced a critical bug the day before the handover with humour and resilience. Navigating through the debugging process together, they demonstrated exceptional teamwork and adaptability, overcoming the obstacle despite the geographical distance.
The client expressed such satisfaction with the final product that discussions for potential future projects are already underway. Discussions already for the additional functionality of a tablet display which would work in tandem with the current SpaceSaver application.