edisonabdiel / ApointmentBooker

A simple SPA displaying companies available time slots while allowing them to make an appointment.

AroundHome Bookings

Table of Contents

1. About The Project
2. Built With
3. Dependencies
4. Design Reasoning
5. API
6. Getting Started

About The Project

A simple SPA displaying companies available time slots while allowing them to make an appointment.

Key Features

• Modern and Clean UI
• Extremely easy to use and intuitive
• Display a list of companies and their available time slots
• Teastable & Scalable
• Resposinve to different screen sizes

Built With:

• React
• Ant Design
• Mobiscroll
• Redux Toolkit
• VS Code
• Git

Dependencies

• React Icons
• Ant Design Icons

Design Reasoning

The app was initialised with create-react-app.

It retrives the data from a dedicated JSON SERVER API and displays it in cohesive manner.

Components were built in a fashion that allows for a more responsive, dynamic and scalable experience.

The Calendar component was built using Mobiscroll.

The UI is meant to be minimalistic yet engaging and intuitive. It was built using AntDesign to allow great control and autonomy over the layout of the app and also the design/feel of all the elements within it.

API

Refer to the server folder for more information on how to get the server running and how to use it.

cd into the server folder and run the following command:

json-server timeslots.json

method	path	description
GET	/api/timeslots	Get list of timeslots

Open http://localhost:3000 in your browser to see the result.

Getting Started

Clone the repository and run the following commands in the terminal:

Install the dependencies

npm install
# or
yarn add install

Run the development server:

npm run dev
# or
yarn dev

Build

npm run build
# or
yarn build

Open http://localhost:3001 in your browser to see the result.

Made with loads of ❤️‍🔥