Do you want to learn what it takes to build a real app with React Native?
Following my “Building a React Native app from scratch.”, I wanted to show you an overview of the whole project and tell you the story behind it.
Storytime
Back in 2015, I had never been to a barbershop before in my entire life. After doing some research, I found a well-rated barbershop near my office in Buenos Aires, Argentina. I booked my appointment through an app that let me choose the barber. I randomly picked one, and that’s how I met @pepshc.
Fast-forward to today, Andres (a.k.a “Pepe”) has not only been my barber for the last six years, but he has also become a great friend with a lot of projects in common.
In 2020, Pepe decided to open his own Barbershop in Buenos Aires, and he called it “Formal.” and he recently asked me to help him build an app so their clients could book an appointment with him.
Project Overview
I wanted to keep the app simple so that it could be released as soon as possible. That’s why I thought about the main problem I wanted to solve: Clients should be able to book new appointments with a few taps. They should also be able to cancel an appointment in case of not being able to attend.
Sign in & Sign up
These screens will allow the users to sign in / sign up using email and password or using Facebook.
I'll have to set up Facebook authentication and test a few edge cases.
Home & Forgot Password
My goal for this screen is to guide the user’s finger to the “New appointment” button. That’s why I decided to locate it at the bottom of the screen, where anyone can easily tap it.
Besides, users will have all the required information for their next appointment without navigating through different screens.
I’m still unsure if that card will disappear or show a message where the user doesn’t have any scheduled appointment.
Users will be able to reset their password using the “Forgot Password” and the “Reset Password” screens.
I'll have to deal with deep linking to redirect the user to the “Reset Password” screen once they tap the email’s link.
New appointment flow
I wanted to allow users to request a new appointment in six simple steps taps:
- Tap the “New appointment button” on the Home screen.
- Pick a service.
- Open the calendar.
- Pick a date.
- Pick an hour.
- Confirm reservation.
To avoid unnecessary steps, I decided not to include any “Continue” button. The app will automatically navigate every time the user picks a service or hour.
Appointment list & My account
The user will only visit this screen for two reasons:
- To cancel an upcoming appointment
- To check when was the last time they got their haircut.
That’s why I decided to include a text at the top of the screen indicating how many days have passed since their last appointment, and I located the upcoming.
Besides, I located the upcoming appointment at the bottom, so they could easily cancel the appointment.
Users will be able to change their personal information (like phone number, name, and birthday) and logout. For now, they won’t be able to change their emails to reduce the complexity of the app.
In the next post, I’ll talk about the navigation and how I use react-navigation to set up my tab bar.
If you want to dig deeper into the code, check out my GitHub repo:
mauro-codes
/
formal-booking
A React Native barber booking app
Let me know what you think
I’ll love to hear your thoughts about this project! Is there any specific topic you want me to tackle during the series? Let me know in the comments below.
Top comments (0)