## Overview:
It is a robust and feature-rich backend solution designed to power an appointment booking platform. This platform includes a customer app for appointment booking, a business app for managing services and appointments, and a super admin app for overall platform administration.

## Features Implemented:
- __Appointment Booking__: Seamless appointment booking functionality for users.
- __Payment Integration__: Secure credit card payment processing for appointments.
- __Gift Card Management__: Integration of gift card functionality for users.
- __Coupon Management__: Flexible coupon creation and management for promotions.
- __Debt Tracking__: Ability for users to book appointments without immediate payment, tracking accrued debt.
- __Product Sales__: Integration of product sales functionality for businesses.
- __Refund Management__: Streamlined refund processing for appointments.
- __Waiting List Management__: Efficient management of waiting lists for fully booked appointments.
- __Cancellation Policies__: Flexible cancellation policies with defined refund rules and cancellation fees.
- __Branch Management__: Creation and management of business branches, with employee assignment.
- __Appointment Approval/Rejection__: Business control over appointment approval and rejection.
- __Monthly Subscription Services__: Subscription services for both customers and businesses.

## Technologies Used:
- __Backend Development__: Node.js, Express.js
- __Database__: MongoDB
- __Payment Integration__: Z-Credit
- __Authorization__: JSON Web Tokens (JWT)
- __Subscription Management__: Z-Credit Billing API

## My Contributions:
As the backend developer, I was responsible for designing and implementing the backend architecture of the appointment booking platform. My contributions included:

- Designing the database schema to efficiently store appointment, user, and business data.
- Implementing robust backend logic for features such as appointment booking, payment processing, and subscription management.
- Integrating third-party APIs for payment processing (Z-Credit) and subscription management (Z-Credit Billing).
- Collaborating with frontend developers to ensure seamless integration of frontend and backend components.

## Outcome:
The Backend successfully powers the tor digital appointment booking platform, providing users with a seamless booking experience and businesses with efficient appointment management tools. 

The implementation of features such as payment integration, subscription services, and cancellation policies has contributed to increased user engagement and improved business efficiency.

Tor Digital

Tor Digital Backend

# Introduction

In this case study, we will explore the development of a web application built using Next.js and Sass for drivers. 

This web application aims to streamline the activities of drivers by providing them with tools to manage their jobs, view their earnings, and communicate with the admin. 

The application includes various features such as user registration, job management, a driver dashboard, region-based job listings, and more.

# Project Overview

## Client Profile

The client for this project is a transportation company looking to create a user-friendly platform for its drivers. The goal is to simplify the job application process, improve communication between drivers and the admin, and provide drivers with insights into their earnings and job history.

## Technology Stack

- Front-end Framework: Next.js
- Styling: Sass

# Key Features and Functionality

## User Registration

- Drivers can register on the web application by providing essential information such as their name, phone number, vehicle details, and their preferred region.

## User Authentication

- Registered drivers can log in to the web application to access their personalized dashboard and perform various actions.

## Job Management

- Drivers can view available jobs on the home page and apply for them. Admins can approve or reject the jobs through an admin panel system.
- Drivers can also create jobs, and these new job postings require admin approval as well.

## Driver Dashboard

- The dashboard provides drivers with a comprehensive view of their statistics, including total trips, monthly earnings, and upcoming trips.
- The dashboard offers filters to view jobs based on the driver's region or a manually selected region.

## Driver History

- A dedicated screen called "Driver History" presents detailed information about the driver's performance, including total profits, monthly profits, future income projections, and a job history table.

## Travel Diary

- The "Travel Diary" screen allows drivers to view their upcoming jobs, providing them with a quick overview of their schedule.

## FAQ Screen

- The application includes an FAQ screen to address common driver queries and concerns.

## Settings

- Drivers can update their account information and settings through the "Settings" screen.

## Contact Us

- The "Contact Us" screen enables drivers to get in touch with the admin or support team for assistance.

# Development Process

## Project Planning

- The project started with requirements gathering and creating a detailed project plan, including user stories, wireframes, and technical specifications.

## Design and Styling

- Sass was chosen for styling for the project, enabling the creation of a visually appealing and responsive user interface.

## Front-end Development

- Next.js was used as the front-end framework, allowing for efficient server-side rendering and routing.

## Backend Integration

- The application integrates with the pickapp's backend for data retrieval, updates, and user management.

## Testing

- Extensive testing, including unit testing and user testing, was conducted to ensure the application's functionality and performance.

## Deployment

- The web application was deployed to a hosting platform to make it accessible to users.

## Conclusion

Pickapp represents a significant enhancement in the driver experience for our client. 

By providing a user-friendly platform for job management, earnings tracking, and communication with the admin, the application streamlines essential processes for drivers in the transportation industry. 

With a well-structured development process, the project successfully delivered a feature-rich and responsive web application tailored to the needs of drivers. 

Future iterations of the application could include enhancements such as real-time job updates and additional analytics features.

Feature Image

Pickapp Webapp Demo

home-desktop-1

home-desktop-2

home-mobile-1

home-mobile-2

home-mobile-3

login-desktop

login-mobile

register-desktop

register-mobile

dashboard-desktop

dashboard-mobile-1

dashboard-mobile-2

driver-history-desktop

driver-history-mobile

sell-a-job-desktop

sell-a-job-mobile

travel-diary-desktop

travel-diary-mobile

settings-desktop

settings-mobile

faqs-desktop

faqs-mobile

contact-desktop

contact-mobile

# Introduction
This case study explores the development of an admin panel for a transportation web application called __Pickapp__ built using Next.js, Sass, and Material-UI. 

The admin panel serves as a critical component for managing the operations, user accounts, job postings, and communications within the company. This project highlights the implementation of a user-friendly and efficient admin interface tailored to the needs of the administrative team.

# Project Overview
## Client Profile
The client is a transportation company seeking to streamline its operations and manage its driver and job data more effectively. They require an intuitive and visually appealing admin panel to monitor driver activities, oversee job applications, and maintain communication with drivers.

## Technology Stack
- Front-end Framework: Next.js
- Styling: Sass
- UI Framework: Material-UI

# Key Features and Functionality
## User Authentication
The admin panel includes a secure login system for authorized administrative users.

## Dashboard Overview
Upon login, administrators are presented with a dashboard providing an overview of key metrics, such as the number of registered drivers, and pending job applications.

## User Management
Admins can manage user accounts, including creating, updating, and deactivating driver accounts as needed.

## Job Management
The admin panel allows for the management of job postings, including creating new jobs, reviewing and approving driver job applications, and updating job details.

## Regions Management
The admin panel allows for the management of regions, including creating, updating and deleting regions.

## Job Tags Management
The admin panel allows for the management of job tags, including creating, updating and deleting job tags.

## Settings
Admins can customize their profiles.

# Development Process
## Project Planning
The project commenced with thorough requirements gathering, defining user stories, wireframes, and technical specifications for the admin panel.

## Design and Styling
Sass was chosen for styling the admin panel, offering flexibility and scalability in creating a consistent and visually pleasing user interface.

## Front-end Development
Next.js served as the front-end framework, enabling server-side rendering, efficient routing, and optimized performance.

## UI Framework Integration
Material-UI was used to implement a cohesive and visually appealing design language for the admin panel components.

## Backend Integration
The admin panel integrates with the pickapp's backend for data retrieval, updates, and user management.

## Testing
Rigorous testing, including unit testing and user acceptance testing, was conducted to ensure the admin panel's functionality and usability.

## Conclusion
The Next.js, Sass, and Material-UI-powered admin panel represent a significant advancement in the administrative capabilities of the transportation company. 

With a user-friendly and visually appealing interface, the admin panel streamlines user and job management, and enhances communication.

This project underscores the importance of efficient administration in the transportation industry and sets the foundation for future enhancements, including additional reporting features and integration with other company systems.


pickapp-admin-feature-image

Pickapp Admin Panel

job desktop

create driver desktop

create job desktop

dash desktop

drivers desktop

edit driver desktop

edit job desktop

login desktop

settings desktop

faqs desktop

job requests

sell job requests

regions desktop

tags desktop

create region desktop

dashboard mobile

create driver mobile

login mobile

create job mobile

settings mobile

side menu mobile

feature

Eternal Webapp Demo

Feature image

Nfsea.tools

## Introduction:
Ben Gurion Museum is a renowned museum located in Israel that displays the life and achievements of Israel's first prime minister, David Ben Gurion. 

The museum hosts various events and exhibitions throughout the year. To streamline the process of ticket purchasing and event management, a web application and an admin panel have been developed by me. The web application enables users to purchase tickets for events, while the admin panel empowers the museum staff to manage the events and orders more efficiently.

## Features:
The web application provides users with a user-friendly interface that facilitates easy ticket purchasing. It consists of the following features:

Event Listing: The events of the museum are listed on the home page, along with their details such as date, time, price and types of visitors.

Ticket Purchase: Users can purchase tickets for different types of people, such as old people, adults, and children, for each event by clicking on the "add visitor" button. The tickets can be added and removed from the cart as per the user's requirements.

Order Details: After adding tickets to the cart, users are required to enter their order details on the order details page.

Payment: Upon submitting the order details, users are asked to enter their payment information. After successful payment submission, the tickets are booked.

## Conclusion:

The Ben Gurion Museum web application and admin panel provide an efficient way to manage the events and orders. The web application simplifies the ticket purchasing process for users, while the admin panel empowers museum staff to manage the events and orders more efficiently. Together, they make the Ben Gurion Museum a better place for visitors to enjoy the exhibitions and events.

Ben Gurion Webapp Demo

The admin panel provides museum staff with a powerful set of tools to manage the events and orders efficiently. It consists of the following features:

- Login Page: The admin panel has a login page for admins to log in.

- Dashboard Screen: The dashboard screen provides admins with data about the museum's performance, including daily income, monthly visitors, and daily and monthly number of orders.

- Manage Content Screen: The manage content screen enables admins to manage the content of the web application.

- Event Detail Page: The event detail page enables admins to update the details of the events, including the hours of operation and the types of visitors allowed for each event.

- Create Constraints Screen: The create constraints screen allows admins to define constraints for an event, such as the maximum number of visitors allowed per hour.

- List of Constraints Screen: The list of constraints screen lists all the constraints defined for the events.

- Orders Screen: The orders screen displays a table of all the orders with their details, such as the date, time, name, payment status etc. Admins can filter the orders by date, time, and name and can search for specific orders. They can also archive orders that are no longer relevant.

- Closing Screen: The closing screen enables admins to close some days for events.

- Coupon Management Screen: The coupon management screen allows admins to manage the coupons for the events.

Conclusion:

The Ben Gurion Museum web application and admin panel provide an efficient way to manage the events and orders. The web application simplifies the ticket purchasing process for users, while the admin panel empowers museum staff to manage the events and orders more efficiently. Together, they make the Ben Gurion Museum a better place for visitors to enjoy the exhibitions and events.

Ben Gurion Admin Demo (Desktop)

Screenshots Collection

## I. Introduction

This web application is for selling and buying vehicle parts. The main objective of the project was to provide a platform for users to easily buy and sell vehicle parts, whether they were looking for a specific part or the suppliers wanting to sell parts.

## II. Key challenges

One of the main challenges I faced while building this project was that it had to be made from right to left and the main language was Hebrew, which was a little difficult for me to adapt to as I am used to building from left to right. However, I was able to overcome this challenge by taking the time to familiarize myself with the right-to-left layout and making sure that all of the elements on the page were correctly aligned.

## III. Solutions implemented

To address the challenge of building the application from right to left, I took the following steps:

- I familiarized myself with the right-to-left layout by researching best practices and reviewing examples of other right-to-left websites.

- I made sure to align all of the elements on the page correctly, including text, images, and buttons.

- I tested the application on different devices and browsers to ensure that it was displaying correctly for all users.

## IV. Results

As a result of the solutions I implemented, the web application was successful in achieving its main objective of providing a platform for users to easily buy and sell vehicle parts. Some of the specific results we saw included:

- Increased user engagement: The number of users visiting the website and using the application increased significantly after its launch.

- Improved user experience: Feedback from users indicated that they found the application easy to use and navigate, thanks to the well-designed layout and intuitive interface.

- Increased website traffic: The website saw a significant increase in traffic after the launch of the application, as more users became aware of the platform and began using it.

## V. Conclusion

In conclusion, building the web application for selling and buying vehicle parts presented some challenges, including the need to adapt to a right-to-left layout and Hebrew language.
However, by researching best practices and carefully aligning all of the elements on the page, I was able to successfully overcome these challenges and deliver a high-quality application that met the needs of the users. 

The results of the project speak for themselves, with increased user engagement, improved user experience, and increased website traffic. In the future, I will consider these lessons learned and apply them to similar projects to ensure their success.

Saad Baig

Saad Baig

Portfolio

Pickapp Webapp Demo

Pickapp Admin Panel

Eternal Webapp Demo

Nfsea.tools

Ben Gurion Webapp Demo

Ben Gurion Admin Demo (Desktop)

Get Part

Micado

Youni Website

Physium Website

Ethibe

Happy Love Studio