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.