GraphQL with Node & React - Build Car Rental App with Apollo

Demonstrates a complete car rental app with GraphQL, showing a searchable, filterable catalog with map search, booking workflow, payments, coupons, profile updates, and admin real time notifications.

Install Node.js (and npm), set up Visual Studio Code, and optionally Git Bash on Windows, then configure MongoDB locally (with Compass) and consider Atlas for online deployment.

Install MongoDB community server on macOS using homebrew, install Xcode command line tools, and verify with the mongo shell by listing databases.

Install MongoDB community server on Windows, install MongoDB Compass and MongoDB Shell, configure PATH, start the server, and connect to databases via MongoDB Compass or MongoDB Shell.

Access the Go Rental car rental project source code via the official git repo and per-section branches. Follow along from Apollo Server basics to the final deployment on render.

Discover how GraphQL, a query language for APIs, lets clients request only the data they need, unlike REST's endpoints and overfetching, using a single endpoint, flexible responses, and schema-driven evolution.

Discover how Apollo client and Apollo server streamline GraphQL fetching, queries and mutations, state management, and caching across front end and back end with schemas, resolvers, and Apollo Studio monitoring.

Set up a node back end with typescript, install express and dotenv, and create the server, config, and app.ts; establish server, client, and shared folders for an Apollo GraphQL backend.

Connect your node.js app to MongoDB using mongoose, create a db connect function, manage development and production URIs with env variables, and verify the connection when the server runs.

Install Apollo Server and GraphQL tools/schema, create an Apollo Server instance, define typedefs and resolvers, generate an executable schema, and wire the server with Express to expose the /graphql endpoint.

Define car type definitions using gql in a GraphQL folder, detailing fields like id, name, description, rent per day, and a car images array for the Apollo server.

Create car resolvers to fetch all cars from the database with a get all cars query, wiring type definitions and resolvers into an Apollo server on the /GraphQL endpoint.

Define car controllers to separate logic from resolvers and enable scalable GraphQL queries. Export async functions like get all cars and wire them into resolvers.

Create a mongoose car model with fields like name, description, status, rent per day, location, images, brand, year, and mileage; implement create, read, update, and delete operations and queries.

Create and save a new car in a GraphQL API using a car mutation with a typed car input, a mongoose car model, and resolver wiring.

Learn to fetch a car by id with GraphQL query and resolver, implement not-found error handling, and add a virtual ratings field to the car schema.

Update car details via a GraphQL mutation in a Node and React app using Apollo, passing car ID and input, validating fields, and saving changes.

Execute the delete car mutation using GraphQL with Node and React, wiring server controllers, resolvers, and typedefs to remove a car by id and return true.

Create a car seeder that pushes eight cars into the go rental database by compiling data.ts with tsc and running the cedar script.

create a shared resource for client and server code, including interfaces and car status enums, configure TypeScript, and build with tsc so front end and back end share a package.

Define and import the car interface from the shared package, wire up enums in the server model, recompile the shared package, and prepare frontend display with Apollo client.

Integrate shared CDN with Tailwind in a React TypeScript project by installing Tailwind, configuring its setup, and adding component files and a components JSON for modular UI buttons.

Implement a header and footer for the go rental app, including avatar, drop-down menu, and a sheet-based mobile menu, plus social icons in the footer, with routing setup.

Learn to integrate Apollo Client into a React front end, configure an HTTP link and in memory cache, wrap the app with ApolloProvider, and use env vars for GraphQL URI.

Fetch all cars from the backend with a GraphQL get all cards query using Apollo client, then render them as cars on the homepage with ratings and rent per day.

Render a single car detail page by querying getCarById with GraphQL, using the ID from useParams, and display the car's address, name, rent per day, ratings, reviews, description, and features.

Render a car image slider using a carousel with autoplay, displaying images from an array with public id and url, and falling back to a default car image when empty.

Add a star rating and a loader to a React Apollo car app using a React star rating component and a loading spinner for car lists and details.

Create an API filters class to search by id or keyword with pagination on the backend, wired to the GraphQL resolver and tested on the Apollo server.

Define a GraphQL backend car filters input with category, brand, transmission, status, rent per day and convert operators gt, gte, lt, lte to MongoDB queries with dollar signs.

Implement backend pagination using page and results per page, apply limit and skip with mongoose, and return paginated cars plus total count and per-page count for the frontend.

Implement frontend keyword search for the car rental app by adding a search field, syncing the query to the URL with useSearchParams, and passing it as a GraphQL variable.

Implement frontend filters for category, brand, and transmission using a shared resource, enforce single selections, and sync with url query params to pass filters to the backend.

Develop frontend pagination in a React app using the react paginate package and a pagination component, driven by backend total count and per-page data, with URL updates.

Fixes a filter bug in a car rental app by refactoring filters, adding an update url params handler, and resetting filters when returning to the home page.