OLZ - OLX Inspired Marketplace

A modern React.js web application inspired by OLX, built to demonstrate full-stack development skills with a focus on classified advertisements and marketplace functionality.

🚀 Features

Core Functionality

• User Authentication: Complete sign-up, sign-in, and logout system with JWT token management
• Advertisement Management: Create, view, and browse classified ads with image support
• Advanced Search & Filtering: Search ads by keywords, categories, and location
• Responsive Design: Mobile-first approach with responsive layouts
• State Management: Redux integration for global state management
• Image Slideshow: Interactive image galleries for ad viewing

User Features

• Browse recent advertisements on the homepage
• Search and filter ads by category, location, and keywords
• View detailed ad pages with image galleries
• User registration and authentication
• Post new advertisements (authenticated users)
• Pagination for large result sets
• Price formatting with Brazilian Real (BRL) currency

Technical Features

• React Router: Client-side routing with protected routes
• Styled Components: CSS-in-JS styling solution
• Cookie Management: Secure token storage and management
• API Integration: RESTful API communication
• Form Validation: Input validation and error handling
• Responsive UI: Mobile and desktop optimized interface

🛠️ Tech Stack

• Frontend Framework: React 17.0.2
• State Management: Redux + React-Redux
• Routing: React Router DOM
• Styling: Styled Components
• HTTP Client: Fetch API with custom hooks
• Authentication: JWT tokens with js-cookie
• Form Handling: React Text Mask for input formatting
• Image Slideshow: React Slideshow Image
• Build Tool: Create React App

📋 Prerequisites

Before running this project, make sure you have:

• Node.js (version 14 or higher)
• npm or yarn package manager
• Backend API server running (see Backend section)

🚀 Installation & Setup

1. Clone the repository

   git clone https://github.com/christopherldo/react-olx
   cd react-olx

2. Install dependencies

   npm install
   # or
   yarn install

3. Environment Configuration

   The project uses a .env file for configuration. Make sure the backend API URL is correctly set:

   REACT_APP_BASE_API=http://127.0.0.1:3001/api/
   

4. Start the development server

   npm start
   # or
   yarn start

5. Open your browser

   Navigate to http://localhost:3000 to view the application.

🔧 Backend Integration

This frontend application requires a backend API to function properly. The backend provides:

• User authentication endpoints
• Advertisement CRUD operations
• Category and state data
• Image upload handling

Backend Repository: Node OLX API

Make sure the backend server is running on http://127.0.0.1:3001 or update the REACT_APP_BASE_API environment variable accordingly.

📁 Project Structure

src/
├── components/ # Reusable UI components
│ ├── MainComponents/ # Core layout components
│ ├── Partials/ # Header, Footer, AdItem components
│ └── RouteHandler/ # Protected route wrapper
├── helpers/ # Utility functions
│ ├── AuthHandler.js # Authentication utilities
│ └── OLXApi.js # API communication layer
├── pages/ # Page components
│ ├── Home/ # Homepage with search and recent ads
│ ├── Ads/ # Ad listing and search results
│ ├── AdPage/ # Individual ad detail page
│ ├── AddAd/ # Create new advertisement
│ ├── SignIn/ # User login
│ ├── SignUp/ # User registration
│ ├── About/ # About page
│ └── NotFound/ # 404 error page
├── reducers/ # Redux state management
├── App.js # Main application component
├── Routes.js # Application routing configuration
└── index.js # Application entry point

🎯 Available Scripts

• npm start - Runs the app in development mode
• npm build - Builds the app for production
• npm test - Launches the test runner
• npm eject - Ejects from Create React App (irreversible)

🔐 Authentication Flow

The application implements a complete authentication system:

1. Registration: Users can create accounts with name, email, password, and location
2. Login: Email/password authentication with optional "remember me"
3. Token Management: JWT tokens stored securely in cookies
4. Protected Routes: Certain pages require authentication (e.g., posting ads)
5. Auto-logout: Automatic redirection on token expiration

🎨 UI/UX Features

• Responsive Design: Optimized for mobile and desktop devices
• Modern Interface: Clean, intuitive user interface inspired by OLX
• Loading States: Visual feedback during API calls
• Error Handling: User-friendly error messages
• Image Galleries: Interactive slideshow for ad images
• Search Functionality: Advanced filtering and search capabilities

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📝 License

This project is for educational purposes and is not intended for commercial use.

🤝 Contributing

This is an educational project. Feel free to fork and experiment with the code for learning purposes.

📧 Contact

For questions or suggestions regarding this educational project, please refer to the repository issues section.

---

Note: This project is a portfolio piece and is not intended for commercial use.