Code Cartel
next js tailwind graphql sequelize node react google maps typescript expo mysql stripe webscokets
NB: This is not a template, this is an original from the Cartel.

A real time solution to real world problems

A real-time resource management & scheduling application to streamline the coordination of equipment, supplies, workers, and scheduling for customer requests.

Powerpoint Presentation Watch Demonstration
applications

Features

Map Integration
Visualise customer request locations
Resource Management
Ensure resources are available for customer requests.
Requests
Customer lead requests
Job Management
Effective job management tools
Analytics
Derive valuable information from system data.
Real Time Payments
Integrated payments for delivery of services

The project

Background

We developed an Artisan Management System designed to streamline the process of connecting customers with skilled artisans across a variety of services. Whether it’s garden care, indoor and outdoor tile installation, or carpet cleaning, our platform allows customers to easily request and manage services while ensuring supervisors and workers can efficiently coordinate resources and schedules.

The project was built with Next.js and React.js on the frontend, ensuring a fast and responsive user experience. The backend API leverages vanilla JavaScript alongside React.js to handle service requests, job allocations, and notifications. For data management, we utilize a MySQL database to store and track customer requests, job details, and resource availability.

How the system works:

Customers can easily browse through a variety of available services and request the one that suits their needs. Once a request is submitted, supervisors are notified and can accept the service request. The supervisor then conducts an on-site inspection, providing an estimated quotation for the job. After the inspection, the necessary resources and workers are allocated, and the customer is able to schedule a convenient time for the job to be completed. Once the scheduled time arrives, the assigned workers carry out the task, documenting the completed work by taking images, which are then sent to the supervisor for approval. Once the job is verified, the remaining payments are processed, and the job is marked as complete.

Mobile Enhancement

To further enhance the accessibility of the system, we developed a mobile application to work in tandem with the web app. The mobile app streamlines customer interactions, allows workers to easily upload images of the worksite, and enables supervisors to capture and store accurate measurements directly from their devices. Our Artisan Management System is designed to optimize the service management process, maintaining flexibility and efficiency to ensure a seamless experience for both customers and workers.

Tech Stack

Server-Side Rendering (SSR)

SSR allows Next.js to render pages on the server at request time, providing pre-rendered HTML to the client. This enhances SEO, since search engines can crawl fully-rendered pages, and improves initial load times, especially for content-heavy pages. In Next.js, you can achieve SSR using getServerSideProps, which fetches data on each request

Automatic Code Splitting

Next.js automatically splits your code by page, so the initial load contains only the necessary JavaScript for that page. This reduces the JavaScript bundle size and enhances performance for large applications.

TypeScript Support

Next.js has built-in TypeScript support, which allows for safer code by leveraging static type checking, making it easier to scale and maintain a web application.

By combining SSR, SSG, dynamic routing, and Next.js’s other features, you can create highly performant, SEO-optimized, and scalable web applications.

Cross-Platform Development

React Native allows you to write code once and deploy it to both iOS and Android platforms. Expo streamlines this process by providing an easy setup and consistent development environment, removing the need to configure native code for each platform.

Expo SDK

Expo comes with a rich library of pre-built components and APIs for handling features like camera access, location services, push notifications, and more. This allows you to quickly integrate common mobile app functionalities without needing to write native code.

Hot Reloading

React Native’s hot reloading allows developers to see code changes in real-time without restarting the app. This improves the developer experience and speeds up the development process.

Express.js for Web Framework

Express.js is the most popular web framework for Node.js, providing a minimalist structure for building APIs, web apps, and handling routing and middleware. It allows for rapid development with customizable routes and robust middleware to manage authentication, logging, and data parsing.

RESTful APIs and GraphQL

Node.js is often used for building RESTful APIs and GraphQL servers. With libraries like express-graphql or Apollo Server, Node.js can efficiently handle data querying and mutations for both simple and complex applications, enabling seamless communication between the front-end and back-end.

Real-time Applications (WebSockets)

Node.js is well-suited for real-time applications due to its non-blocking architecture. Libraries like Socket.io enable easy real-time communication through WebSockets, making it perfect for applications like chat systems, live feeds, or multiplayer games.

Database Integration

Node.js works seamlessly with various databases such as MongoDB, MySQL, and PostgreSQL. Libraries like Mongoose (for MongoDB) and Sequelize (for SQL databases) allow for easy database management, providing ORM (Object-Relational Mapping) capabilities for handling data models.

The Cartel

click any sicario for more information