🏠 React Listings App

List of Contents

1. About
2. Features
3. Technologies
4. Getting Started
5. Course Structure
6. Credits

About

This project is a React learning project that implements a vacation rental listing platform similar to Airbnb.

Live demo
Testing credentials: demo@cosdensolutions.io/cosdensolutions

Features

1. Authentication

   • Sign in and sign out functionality

2. Listing Management

   • Display all listing cards
   • Filter listings by title, date available, and number of guests
   • Create new listings

3. Listing Cards

   • Each card includes:
     • Image carousel
     • Rating
     • Favorite toggler
     • Title, price, location, and number of guests capacity
     • Host information

4. Navigation & Pages

   • Clicking on a card navigates to a detailed listing page with full information, description, and reviews
   • Favorites page showing all favorited listings
   • Account profile page displaying user details and personal listings

5. Performance & Optimization

   • Data caching for faster load times
   • Optimized re-renders and state updates

Technologies

1. React 18
2. Redux Toolkit
3. React Router
4. React Hook Form & Zod
5. React Query
6. Cypress (E2E Testing)

Getting Started

1. Clone the repository
2. Install dependencies: npm install
3. Start the development server: npm start
4. Use the testing credentials above to sign in

Course Structure

• Module 0: Introduction

  • Project Overview
  • Linting and Formatting
  • Files and Folder Structure
  • API Overview

• Module 1: React Fundamentals

  • Introduction to React
  • JSX Overview
  • Component Props and Lifecycle
  • Introduction to Hooks
  • Styling and Tailwind

• Module 2: State and Event Handlers

  • State in React
  • Event Handlers
  • Handling Click and Input Change Events
  • Handling Form Submissions
  • The useState hook
  • Controlled and Uncontrolled Components

• Module 3: Effects and Data Fetching

  • Effects in React
  • The useEffect and useRef hooks
  • Data Fetching in React

• Module 4: Routes and Navigation

  • Client VS Server Side Routing
  • React Router

• Module 5: Hooks and Performance

  • Performance in React
  • The useMemo hook
  • The useCallback hook and memo
  • Custom Hooks and Custom Components

• Module 6: State Management

  • State Management in React
  • Prop Drilling
  • The useContext hook
  • Redux Toolkit

• Module 7: Forms and Authentication

  • Forms in React
  • React Hook Form and Zod
  • Authentication in React

• Module 8: Extended

  • Refactor project using React Query
  • Improve forms and inputs with useForm and useController
  • Add Profile and Create Listing pages
  • Add Reviews section
  • Add Cypress E2E testing for sign in flow, navigation, and filter functionality

Credits

Course and codebase provided by Cosden Solutions.