🗓️ Schedule Pro

Frontend for Schedule-Pro-API — a SaaS web application that implements the user interface and experience layer for appointment scheduling. The system is designed to be highly scalable, user-friendly, and efficient, with a focus on performance, usability, and seamless API integration.

1. About the Project

This project is the frontend implementation of Schedule Pro, a modern SaaS system for scheduling and managing appointments and services.

Built with Next.js, TypeScript, Tailwind CSS, Zustand for state management, and Zod for schema validation, this frontend interacts with a dedicated backend responsible for user authentication, availability management, and service bookings.

2. Key Features

• Modern, responsive UI
• Authentication with JWT tokens
• Form validation with Zod
• Global notifications state management using Zustand
• Scheduling and service booking
• Availability display
• User profile and appointment history
• Styled with Tailwind CSS
• Component-based and scalable architecture
• RESTful API integration

3. Technologies & Dependencies

Main Dependencies

• Next.js
• React
• TypeScript
• Tailwind CSS
• Zustand
• Zod

4. Architecture

The project follows a modular architecture with a clear separation of concerns, utilizing Next.js's built-in routing and API capabilities.

📂 Project Structure:

• src/

  • components/ # Reusable UI components

    • Button/
      • index.tsx
      • Button.tsx
      • Button.module.scss

  • app/ # Next.js routing system

    • page.tsx # Landing page
    • login/
      • page.tsx # Login page
      • page.module.scss

  • hooks/ # Custom React hooks

  • lib/ # Utility functions

  • services/ # API and business logic

    • index.ts # Axios instance and request handlers

  • context/ # Global state management

  • utils/ # Helper functions

  • types/ # TypeScript interfaces and types

    • User.ts

  • styles/ # Global styles

    • globals.css

5. Installation and Setup

Prerequisites:

Before running the project, ensure that Node.js is installed on your machine. If not, you can download it from the official Node.js website (LTS version recommended).

To verify your Node.js installation, run:

node -v
npm -v

Clone the repository to your local machine:

git clone https://github.com/kaikyMoura/Schedule-Pro.git

Navigate to the project's root directory:

cd Schedule-Pro

Installing dependencies:

Use npm or yarn to install the project dependencies:

npm install
# or
pnpm install
# or
yarn install

Running the Application:

Once the dependencies are installed, you can start the development server with:

npm run dev
# or
pnpm run dev
# or
yarn dev

The application will be available on:

http://localhost:3000

6. 🚀 Deploy

Deployment on Vercel with Continuous Integration

The deployment of the project is done on Vercel, leveraging Continuous Integration for automatic builds and deployments. Any changes pushed to the repository on GitHub are automatically built and deployed to Vercel.

Key Points:

• The project is automatically built and deployed whenever changes are pushed to the GitHub repository.
• Environment Variables are configured directly in the Vercel dashboard, ensuring seamless integration between build and deployment.
• Custom Domain can be configured for the deployed application, with automatic SSL certificate setup by Vercel.

The application is accessible via the unique Vercel-generated URL:

# Coming soon...

7. Pages Documentation

Page	Description
/signup	Register new user
/login	Authenticate and get token
/	Authenticated user dashboard
/appointmens	View and manage appointments
/admin/customers	View and manage customers (Admin only)
/admin/staffs	View and manage the staff (Admin only)
/admin/services	View and manage (Admin only) available services
/profile	User profile and account settings

⚠️ Important
New routes will be added and documented as development continues.

8. 📝 Terms of Use

• Non-commercial project.
• All rights related to user data and privacy are respected.
• This project aims to serve as a learning and portfolio tool.

👨‍💻 Developed by Kaiky de Moura Tupinambá