The organization I worked with while working on Express Groomer SPA project is called Lambda Labs. The Lambda Labs is the final unit in the Lambda School Full-stack Web Developer track that I am currently enrolled. Lambda Labs is comprised of seven teams from A-G with several team members on each team working on the same product. I was assigned to team B and was fortunate to have a very diverse and talented group of developers.
The Express Groomer SPA is a single page application that connects groomers and clients. This allows for groomers to meet at the clients residence or allows the clients to meet at the groomers. Clients will have the ability to safely schedule an appointment and groomers can grow their business.
Our team will be building an app for groomers and pet owners. The client will also be able to search for a groomer, schedule appointment, receive acknowledgment of the appointment, see the groomer’s location, once the service is complete the user can rate their experience.
I think one of the worst fears that any project could possibly face is to lose some of it’s members. This fear came true for our team as we lost two team members during the planning phase of the project which caused the remaining members myself included to assume the extra work-load. This challenge also increased our product cycle time which caused a delay in the product being shipped.
Lambda Labs authorized specific resource tools to implement the project. To create a roadmap we used a program called Whimsical Flowcharts to create our architecture diagram .
We also used Whimsical to make note of our technical decisions on what programing stack to use in this case web tech: PostgreSQL, Node.js, React, Map Box SDK, AWS S3, AWS Amplify, and Heroku. Whimsical was also used to create a wire-frame our Front End dashboard for the groomer so we could use it as a guide to code the components for the app.
Another authorized tool the teams used to create user stories and assign task is called Trello Boards. This application was instrumental in organizing the development work-flow of our product because we were able to create user stories for example “As a groomer, I want to be able to set up a profile with contact information, services, location, hours/days available” through this user story we created a task list that would allow me to create a groomer profile page component. BTW I was assigned the task to create the groomer profile page.
The image below shows the user story card where a list of task were created and once the task were completed I would put a check mark next to the task to show the task was completed.
The image below shows the groomer profile page card ready for stakeholder review after all task on the checklist have been completed.
Work Flow
I think what makes a good work flow is a team that can communicate well with each other, in the two months that our team worked on this project I do not recall one instance of non-communication we were always in meetings on zoom which helped us to work through the challenges together as a team. Lambda Labs provided the team with a skeleton code-base scaffold built with our tech stack in place.
I was tasked with creating the groomer profile page, this was the landing page that upon groomer account creation would login and view and edit the account. This would require the groomer account information to be pulled from the database and be rendered to the page. Since the file structure was already determined by the organization our challenge was to add our components to the already existing code-base. This also included the code-base for the back end server where we would create the end points to connect the database and the front end so the data can be manipulated and rendered to the pages.
We installed a Docker container to host our PostgreSQL database.
I recall during the installation the team and myself experience some difficulties at first because this was the first time any of us used this tech so it was a real good learning experience for the team to figure out how to connect the database to our back ends by locating the login credentials in the Docker admin panel we were able to get started with adding our features to the app.
The creation of the groomer profile page required creating a route path to the page by use of the React router.
The next step was to create the groomer profile page files to house all the functions and components that make up the groomer profile page.
The finished product
Login page for groomer and user
Groomer profile page
After eight weeks of product cycle development my team has delivered a product ready to be shipped to the stakeholder. Here is the list of team b Labs PT 12 (deliverables)
- Account creation and login Release 1: Users are able to create an account based on their persona. Account type for the groomer and a separate account type for the client.
- Search Groomer Database Release 1: Groomers able to set up profile. Based on the groomer profile, users will be able to search groomers.
- User Profile Release 2: Users are able to create a profile for themselves and their pets. Users are able to upload pets picture, tag any health issues, and identify if their shots are up to date.
- Appointments/ Scheduling Release 2: Groomers are able to manage the request from users, schedule appointments, and have a way to manage their appointments
In future releases the Express Groomer app will have the following features added for enhanced user experience.
- Enhanced Groomer Search Release 2: Using the mapbox API, provide a way for users to search within an area. The user should be able to enter an address, provide a search radius, and the output will be a list of groomers based on the criteria entered. The user should also be able to pin the groomers or save for later.
- Payment Services Release 3: Payment integration with Stripe. This will allow users pay for their services.
- Groomer Rating System Release 3: Users will be able to rate groomers based on the experience they had. This rating should be 1–4 stars and an option for the user to provide comments based on their experience.