My first production-ready React application.

The Ups and Downs

The features I built and the technical issues I faced taught me a lot about AntDesign, React state manipulation, and what not to do when passing down state and functions from component to component. Some of the features and components I built are:

  • UI components for the User Profile Page
Pet Express— My Profile — User View
  • Groomer Business (Profile) Page — gives flexibility to each groomer by allowing them to add unique content and promote their business in their own way. The slider, text, and services can be changed/added to fit the groomer's needs.
Groomer Business Page — Section 1
Groomer Business Page — Section 2
  • Groomer Services Page — allows groomers to display more information about each of their services to the client. This is an important marketing feature because it gives the client a comparison of every groomer's services. It also provides them with additional information about specific groomers’ services included in each grooming session.
  • Appointment Calendar — This feature allows customers to book grooming appointments for their pets. As a dog owner, I know how important it is to go on my favorite groomers website and book a grooming appointment for my pet. This saves me lots of time and frustration by not making any phone calls and waiting in line to book an appointment. I can go on the website and pick the available date and time, which fits my schedule.
Schedule Appointment Screen
  1. Create a state for the data you are looking to store — in my case:
const [businessProfileData, setBusinessProfileData] = useState([]);const [businessName, setBusinessName] = useState();
const getBusinessData = async () => {  const businessData = await getBusinessProfileData(authState, id);  setBusinessProfileData(businessData.services);  setBusinessName(businessData.business_name);};
useEffect(() => {  getBusinessData();}, []);
useEffect(() => {setAppointment({ ...appointment, service_provider_name: businessName });}, [customerPet, businessName]);

Final Thoughts

Our team had to work through many back-end and front-end tasks while working on this project. Some of the backend tasks include: creating directories, models, seeds, middleware, migration files, and tests. On the front-end, we created many responsive UI components with CRUD functionality that help users and groomers fully manage their profiles and a new navigation bar that turns into a hamburger menu on smaller screens. We also implemented the MapBox API — this allows customers to find groomers in their area using their address.

Home
Customer Profile Page Functionality
Find and select a Groomer, Pick a Service, and Book an Appointment.
Marketing Page to get Groomers to sign up

The Future of Pet Express

The future of this app is very bright. This app will have a lot more built-in features like allowing customers to review groomers and purchase a service with their credit card directly on the website. These two features are important because they will make the platform very competitive for groomers and make the service booking appointment much easier and worry-free. Some challenges I foresee during the implementation of the rating system are filling in the star icons depending on which rating the user picks and displaying an average rating for the groomer. As for the credit card implementation, I think that the documentation may be poor. This will depend on the type of payment processor the developer chooses to implement. If that’s the case , it may be very challenging, especially for someone who never implemented the option to pay with a credit card.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store