---

Classified Ad Web Application

Table of Contents

1. About
2. Key Features
3. Tech Stack
4. Requirements
5. Setup Instructions
   • 1. Clone the Repository
   • 2. Install Backend Dependencies
   • 3. Configure Environment
     • Step 1: Copy Environment Variables
     • Step 2: Create Media Folders
     • Step 3: Set Up PostgreSQL Database
     • Step 4: Edit Environment Variables
   • 4. Prisma Setup
     • Step 1: Generate Prisma Client
     • Step 2: Apply Database Migrations
     • Step 3: Seed the Database (Recommended)
   • 5. Run the Backend Server
   • 6. Set Up Redis
   • 7. Frontend Setup
     • Step 1: Navigate to the Frontend Directory
     • Step 2: Install Frontend Dependencies
     • Step 3: Copy Environment Variables
     • Step 4: Run the Frontend Server
6. License

About

OpenAdClassify is a straightforward classified ads app built with the latest versions of Next.js (14.2.6) and NestJS (10.4.4). It allows users to post and manage ads, chat in real-time, and offers secure access with strong authentication.

Key Features

• CRUD Operations for Ads: Users can create, read, update, and delete ads.
• Real-Time Messaging: Integrated real-time messaging using Socket.IO for instant communication and message status updates.
• Ad History Page: Dedicated page to view, edit, and delete previous ads.
• Media Management: Upload and manage media associated with ads.
• Authentication and Authorization: JWT-based authentication with role-based access control, using HTTP-only cookies and token refresh mechanisms.
• Notifications: Real-time notifications for new messages.
• Responsive UI: Enhanced user experience with a minimalist footer, loading spinners, and various UX/UI improvements.
• Protected Routes: Route redirection for protected and restricted areas.
• Error Handling: Improved error handling and configurable token expiration.

Tech Stack

Backend

• NestJS: A progressive Node.js framework for building efficient, reliable, and scalable server-side applications.
• Prisma: A modern database toolkit to query and manage data in PostgreSQL.
• PostgreSQL: Database system used for storing application data.
• Redis: Used for managing JWT token refresh and revocation.
• Socket.IO: For real-time communication and messaging.
• JWT: For secure token-based authentication.
• ioredis: Redis client for Node.js.
• Bcrypt: For hashing passwords.

Frontend

• Next.js: A React framework for server-side rendering and static site generation.
• React: A JavaScript library for building user interfaces.
• Redux Toolkit: For state management.
• Axios: For making HTTP requests.
• Bootstrap: CSS framework for responsive design.
• Tailwind CSS: Utility-first CSS framework.
• React Toastify: For adding notifications.

Requirements

• Node.js:
  • Frontend: 18.17.1 or higher.
  • Backend: 20.6.0 or higher.
• PostgreSQL: For database management.
• Redis: For caching and token management. Can be easily installed via Docker Desktop by pulling the Redis image and starting it.

Setup Instructions

1. Clone the Repository

Clone the repository to your local machine:

git clone https://github.com/wassimfarah/OpenAdClassify.git

cd OpenAdClassify

2. Install Backend Dependencies

Navigate to the backend directory and install the dependencies:

cd backend
pnpm install  # or use `npm install` or `yarn install`

3. Configure Environment

Step 1: Copy Environment Variables

Copy the example environment file to .env and update it with your specific configuration:

cp .env.example .env

Step 2: Create Media Folders

Create folders for storing media with the specified structure. You can create these directories manually or run the following commands.

Media Structure:

uploads
├── ads
│   ├── images
│   └── videos
└── profiles
    └── avatars

For Linux and macOS (Unix-like systems):

mkdir -p uploads/{ads/{images,videos},profiles/avatars}

For Windows PowerShell:

New-Item -ItemType Directory -Path "uploads", "uploads/ads/images", "uploads/ads/videos", "uploads/profiles/avatars" -Force

Alternatively, create folders one at a time for Unix-like systems:

mkdir -p uploads
mkdir -p uploads/ads/images
mkdir -p uploads/ads/videos
mkdir -p uploads/profiles/avatars

Or for Windows Command Prompt (cmd.exe):

mkdir uploads
mkdir uploads\ads
mkdir uploads\ads\images
mkdir uploads\ads\videos
mkdir uploads\profiles
mkdir uploads\profiles\avatars

Step 3: Set Up PostgreSQL Database

Create a new empty database in PostgreSQL and note down the database name, user, and password.

Step 4: Edit Environment Variables

Update the .env file with your specific PostgreSQL configuration (DB_NAME, DATABASE_URL, etc.).

4. Prisma Setup

Step 1: Generate Prisma Client

Run the following command to generate the Prisma client:

npx prisma generate

Step 2: Apply Database Migrations

Run the following command to apply the Prisma schema to your database:

npx prisma migrate dev

Step 3: Seed the Database (Recommended)

Seed the database with categories and subcategories by executing the seed.ts script:

ts-node prisma/seed.ts

5. Run the Backend Server

Start the backend server using your preferred package manager:

pnpm run dev  # or use `npm run dev` or `yarn run dev`

You should see a message indicating the server is running on a specific port.

6. Set Up Redis (if not installed)

Step 1: Install Redis

Using Docker (recommended):

1. Pull the Redis Image:

   docker pull redis

2. Start a Redis Container:

   docker run --name redis -p 6379:6379 -d redis

Without Docker (alternative):

1. Install Redis:

   Follow the installation instructions for your Linux distribution from the official Redis documentation.

2. Start Redis:

   redis-server

7. Frontend Setup

Step 1: Navigate to the Frontend Directory

Navigate to the next_app folder:

cd nextjs-app

Step 2: Install Frontend Dependencies

Install the dependencies for the frontend:

pnpm install  # or use `npm install` or `yarn install`

Step 3: Copy Environment Variables

Copy the example environment file to .env.local:

cp .env.example .env.local

Note: If you adjusted the port or origin in the backend .env file, make sure to make corresponding adjustments in the env.local file of the frontend. The ORIGIN in the backend .env must match the origin of the frontend.

Step 4: Run the Frontend Server

Start the frontend server:

pnpm run dev  # or use `npm run dev` or `yarn run dev`

License

This project is licensed under the MIT License

---

Thank you for checking out the Classified Ad Web Application! If you have any questions or need further assistance, feel free to contact me. Contributions are welcome, and I appreciate any feedback or suggestions. Enjoy building and exploring the application! 😊