My first production-ready React application.
Following the AntDesign documentation, we continued implementing responsive components and functionality to our capstone project as a team. Our goal was to help connect local pet owners and professional grooming businesses that love making pets look great. The most important feature of this app was to give customers the ability to book their pets’ grooming services - online. My main concern before starting to work on this project was getting my hands dirty with AntDesign, and the fact that a team we didn’t know started the project — and looked horrible all-round.
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
- 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 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.
While working on the appointment scheduling feature, I came across a technical issue that made me go back and read up on the React component lifecycle. I encountered an issue while manually overriding my appointment state by setting one of its properties values to an object that was being returned from an API call. After reading up on the React lifecycle, I reminded myself that I should treat the state as immutable and that I should only be using setState whenever I manually update the state.
Another problem that I encountered was part of the above technical issue. While making an API call and updating the state, the component state would be in its old state because my API call function was not asynchronous, and it wouldn’t return the data before the state updated. So I wrapped my API call function in a useEffect() hook and made the function asynchronous, which resulted in a successful state update with the data I was expecting. I was able to troubleshoot this by console logging my state and the API call response as soon as the component mounted. It gave me clues that the API call is not returning data in time before the state updates — which helped me resolve this issue.
The solution to my problem:
- Create a state for the data you are looking to store — in my case:
const [businessProfileData, setBusinessProfileData] = useState([]);const [businessName, setBusinessName] = useState();
2. Create an asynchronous function that will make an API call, and update the state:
const getBusinessData = async () => { const businessData = await getBusinessProfileData(authState, id); setBusinessProfileData(businessData.services); setBusinessName(businessData.business_name);};
3. Use the useEffect() hook to call the above function as soon as the component mounts.
useEffect(() => { getBusinessData();}, []);
4. Create another useEffect() hook to update your component state or its property with the value that came back from the API call.
useEffect(() => {setAppointment({ ...appointment, service_provider_name: businessName });}, [customerPet, businessName]);
Now, your local component state will successfully update.
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.
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.
I received some valuable feedback regarding the use of some of the AntDesign components and how I pass down state and functions down to child components. I incorporated this feedback by coming up with a main “controller” component that will handle all state management and functions, which I will later pass down to components and back up after the state updates. It will keep my code organized and will store only local state and functions in the child components. This style of keeping my code organized will help me avoid bugs related to state and component re-renders — and make my code much easier to work with.
This project furthers my career goals by allowing me to learn a new React library — AntDesign. I look forward to working with AntDesign and learning more about its functionality and components in the future.
