Documentation Index
Fetch the complete documentation index at: https://mintlify.com/BhushanBadhe39/SkinFirts/llms.txt
Use this file to discover all available pages before exploring further.
SkinFirts follows a feature-aware src/ layout that keeps API clients, reusable components, navigation stacks, Redux state, full-screen views, business-logic services, and design tokens in clearly separated folders. Understanding this structure makes it easy to locate any piece of the app — whether you’re adding a new screen, wiring up a new API endpoint, or tweaking the colour palette.
Directory Tree
SkinFirts/
├── App.jsx # Root component — wraps Provider, ContextProvider, SafeAreaProvider
├── index.js # App entry point — registers with AppRegistry
├── src/
│ ├── api/ # Axios client and API functions
│ │ ├── Client.js # Axios instance (baseURL: mockapi.io)
│ │ ├── doctorsApi.js
│ │ └── usersApi.js
│ ├── assets/ # Static assets (images, fonts, icons)
│ ├── components/ # Reusable UI components
│ │ ├── ChatBubble.jsx
│ │ ├── CustomHeader.jsx
│ │ ├── CustomSwitch.jsx
│ │ ├── DateStrip.jsx
│ │ ├── DetailsBox.jsx
│ │ ├── FavoriteButton.jsx
│ │ ├── FocusButton.jsx
│ │ ├── IconButton.jsx
│ │ ├── IconInfoBox.jsx
│ │ ├── IconicSearchBar.jsx
│ │ ├── InputBox.jsx
│ │ ├── MiniCard.jsx
│ │ ├── PasswordBox.jsx
│ │ ├── PaymentOption.jsx
│ │ ├── RoundButtons.jsx
│ │ ├── ScheduleCard.jsx
│ │ ├── ScheduleTimeline.jsx
│ │ ├── TextPill.jsx
│ │ ├── appointments/
│ │ ├── doctorsPage/
│ │ ├── profilePage/
│ │ └── schedules/
│ ├── constants/
│ │ └── ContextProvider.js
│ ├── hooks/
│ │ └── useDoctors.js
│ ├── navigation/ # React Navigation stacks and tabs
│ │ ├── StackNavigator.jsx
│ │ ├── TabNavigator.jsx
│ │ ├── DoctorStackNavigator.jsx
│ │ └── AppointmentStack.jsx
│ ├── redux/
│ │ ├── Store.js
│ │ └── Slices/
│ │ ├── UserSlice.js
│ │ └── DoctorSlice.js
│ ├── screens/ # Full-screen views
│ │ ├── SplashScreen.jsx
│ │ ├── Register.jsx
│ │ ├── Login1.jsx
│ │ ├── SignUp.jsx
│ │ ├── SetPassword.jsx
│ │ ├── HomeScreen.jsx
│ │ ├── ProfileScreen.jsx
│ │ ├── ChatScreen.jsx
│ │ ├── Notifications.jsx
│ │ ├── appointments/
│ │ ├── doctors/
│ │ ├── payments/
│ │ ├── profiles/
│ │ └── schedules/
│ ├── services/
│ │ ├── authService.js
│ │ └── handleToggleFavorite.js
│ └── theme/
│ ├── colors.js
│ ├── fonts.js
│ ├── metrics.js
│ ├── commonStyles.js
│ └── PressableStyles.js
├── android/ # Android native project
└── ios/ # iOS native project (Xcode)
Root Files
App.jsx
App.jsx is the root React component. It assembles the full Provider tree that every screen and component in the app inherits:
<Provider store={store}> {/* Redux global store */}
<ContextProvider> {/* App-level React Context */}
<SafeAreaProvider> {/* Safe-area insets for notches/bars */}
<StatusBar ... />
<StackNavigator /> {/* Root navigation stack */}
</SafeAreaProvider>
</ContextProvider>
</Provider>
Provider (from react-redux) makes the Redux store available to any component via useSelector / useDispatch.ContextProvider (from src/constants/ContextProvider.js) supplies appointment scheduling context to the component tree — exposing disabledDates, disabledTime, and helpers like bookTimeSlot and isSlotDisabled via the useDisabledDates hook.SafeAreaProvider (from react-native-safe-area-context) calculates device-safe-area insets so UI elements avoid notches, status bars, and home indicators.StackNavigator is the root navigator that manages auth screens (Splash, Register, Login, SignUp) and routes authenticated users into the main tab navigator.
index.js
The entry point registered with React Native’s AppRegistry. It imports the App component and the app name from app.json, then calls AppRegistry.registerComponent to make the native layer aware of the root component:
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
src/api — HTTP Client and API Modules
The api/ folder centralises all network communication behind an Axios instance and purpose-built API modules.
| File | Purpose |
|---|
Client.js | Creates and exports the shared Axios instance with baseURL pointed at the MockAPI endpoint and a 10-second timeout. |
doctorsApi.js | Functions that fetch and manipulate doctor records (list, get by ID, update favourites, etc.) using apiClient. |
usersApi.js | Functions for user-related endpoints — registration, login lookups, and profile updates — using apiClient. |
export const apiClient = axios.create({
baseURL: 'https://6a63416d1bffb2ffab8bf093.mockapi.io',
timeout: 10000,
});
apiClient from Client.js so the base URL and timeout are defined in exactly one place.
src/components — Reusable UI Components
The components/ folder contains all UI building blocks that are shared across multiple screens. Flat-level components (like InputBox.jsx, PasswordBox.jsx, MiniCard.jsx) are general-purpose. Sub-folders group components that are more tightly scoped to a feature area:
| Sub-folder | Contents |
|---|
appointments/ | Components specific to the appointments feature (e.g. appointment list items, confirmation cards). |
doctorsPage/ | Components used on doctor listing and doctor detail screens (e.g. doctor cards, rating displays). |
profilePage/ | Components rendered on the user profile screen. |
schedules/ | Components for the schedule and time-slot selection UI. |
IconicSearchBar.jsx (search input with icon), FavoriteButton.jsx (toggle heart icon for saved doctors), ScheduleCard.jsx and ScheduleTimeline.jsx (appointment schedule display), ChatBubble.jsx (individual chat message bubble), and PaymentOption.jsx (payment method selector).
src/navigation — React Navigation Stacks and Tabs
All navigation configuration lives in navigation/. SkinFirts uses a nested navigation architecture:
| File | Role |
|---|
StackNavigator.jsx | The root stack. Shows SplashScreen on launch, then routes to Register/Login for unauthenticated users or TabNavigator (as MainTabs) for authenticated users. |
TabNavigator.jsx | The bottom-tab navigator displayed for authenticated users, housing the main sections of the app (Home, Doctors, Appointments, Profile). |
DoctorStackNavigator.jsx | A nested stack inside the Doctors tab that navigates between the doctor list screen and individual doctor detail screens. |
AppointmentStack.jsx | A nested stack inside the Appointments tab that handles the booking flow: appointment list → date selection → confirmation. |
src/redux — Global State
State management is handled by Redux Toolkit. The redux/ folder contains the store configuration and all slice reducers.
| File | Purpose |
|---|
Store.js | Creates and exports the Redux store using configureStore. |
Slices/UserSlice.js | Manages authenticated user state — login status, user profile data, and the setUser action used by SplashScreen to rehydrate sessions from AsyncStorage. |
Slices/DoctorSlice.js | Manages the doctors list — exposes the loadDoctors async thunk that fetches from doctorsApi and stores results in Redux. |
src/screens — Full-Screen Views
The screens/ folder holds every full-page view in the app. Top-level screens handle auth and primary navigation destinations; feature sub-folders contain screens with more steps or sub-pages:
| Location | Screens |
|---|
| Top-level | SplashScreen.jsx, Register.jsx, Login1.jsx, SignUp.jsx, SetPassword.jsx, HomeScreen.jsx, ProfileScreen.jsx, ChatScreen.jsx, Notifications.jsx |
appointments/ | Screens for viewing upcoming/past appointments and initiating the booking flow. |
doctors/ | Screens for the doctor browse list and doctor detail view. |
payments/ | Screens for selecting a payment method and completing a payment. |
profiles/ | Additional profile sub-screens (e.g. edit profile). |
schedules/ | Screens for choosing an appointment date and time slot. |
SplashScreen.jsx is the first screen users see. It dispatches loadDoctors and attempts to rehydrate the user session from AsyncStorage. After a 3-second delay it redirects to MainTabs (if logged in) or Register (if not).
src/services — Business Logic
The services/ folder houses logic that doesn’t belong directly in a screen component or a Redux slice.
| File | Purpose |
|---|
authService.js | Handles sign-up and login logic — calls usersApi, persists the user object to AsyncStorage under @user_account_details, and dispatches Redux actions. |
handleToggleFavorite.js | Manages the favourite/unfavourite toggle for doctors — calls the doctors API to update the favourite status and dispatches Redux state updates. |
src/theme — Design Tokens and Shared Styles
All visual constants and shared StyleSheet objects live in theme/. Importing from here rather than hardcoding values keeps the UI consistent and easy to update globally.
| File | Contents |
|---|
colors.js | Colour palette constants (primary blue #2260FF, whites, greys, etc.) used across all screens and components. |
fonts.js | Font family names for the LeagueSpartan typeface (Thin through Black weights, linked via react-native.config.js) exported as fontFamilies, plus a responsive fonts scale object built on moderateScale. |
metrics.js | Spacing, sizing, and layout constants derived from react-native-responsive-screen for consistent sizing across device dimensions. |
commonStyles.js | Shared StyleSheet objects (flex containers, shadow presets, common text styles) reused across multiple screens. |
PressableStyles.js | Shared style helpers for Pressable components, including pressed-state opacity feedback styles. |
src/constants and src/hooks
| File | Purpose |
|---|
constants/ContextProvider.js | Defines and exports the app-level ContextProvider component and the useDisabledDates hook. Manages appointment scheduling context — disabledDates, disabledTime, bookTimeSlot, isSlotDisabled, and isDayDisabled — so that calendar and time-slot components can share booking state without prop drilling. |
hooks/useDoctors.js | A custom hook that selects doctor-related state from the Redux store and provides a convenient interface for components that need doctor data. |
