Step-by-Step Guide: Building the Core Components of the ShareDrop App

[Jmacone]

This issue provides a comprehensive, actionable guide to help developers set up and build the foundational components of the ShareDrop platform using the technologies specified in the project plan. Follow these detailed steps to establish the backend API, PostgreSQL database, and the initial Flutter Rider UI.

1. Setting up the Backend API (Node.js & Express)

Prerequisites:

• Node.js
• PostgreSQL
• npm or yarn

Step 1: Project Setup

mkdir sharedrop-backend
cd sharedrop-backend
npm init -y
npm install express pg bcryptjs jsonwebtoken cors dotenv prisma @prisma/client

Step 2: Create Basic Server (index.js)

const express = require('express');
const cors = require('cors');
const dotenv = require('dotenv');

dotenv.config();

const app = express();
const PORT = process.env.PORT || 3000;

app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
  res.send('ShareDrop API is running!');
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Step 3: Database Connection with Prisma

• Run npx prisma init
• Configure .env with your PostgreSQL connection string.
• Define your schema in prisma/schema.prisma:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        Int      @id @default(autoincrement())
  name      String
  email     String   @unique
  password  String
  phoneNumber String @unique
  role      String   @default("rider")
  createdAt DateTime @default(now())
}

• Run npx prisma migrate dev --name init

Step 4: Implement Authentication Routes

• Create routes/auth.js with registration and login endpoints using JWT.

Step 5: Integrate Auth Routes

• Import and use the auth routes in your main server file.

---

2. Building the Flutter Mobile App (Rider UI)

Prerequisites:

• Flutter SDK
• VS Code or Android Studio

Step 1: Create Project

flutter create sharedrop_app
cd sharedrop_app

Step 2: Add Dependencies

Add to pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0
  provider: ^6.0.5
  shared_preferences: ^2.2.1

Run flutter pub get.

Step 3: Create Login Screen UI

• Build a login form as shown in the guide, making POST requests to /auth/login on your backend.

Step 4: Integrate Login Screen

• Update main.dart to use the login screen as the initial route.

---

Next Steps

• Secure backend with JWT middleware and environment variables
• Build additional endpoints (trips, payments, etc.)
• Expand frontend (home screen, trip flows, Google Maps integration)
• Implement app state management
• Add real-time communication (WebSockets)
• Integrate MMG payments
• Enhance error handling and UI/UX

This guide provides a solid starting point for the ShareDrop development team. Tackle further features and improvements as described in your project roadmap.