Generative AI for Everyone with Project

Explore what generative AI is, how it learns from training data, and how it differs from discriminative AI. See models like GANs, VAEs, transformers, and diffusion, plus LLMs.

Explore what React.js is and how it enables building user interfaces for web pages using reusable components and a virtual DOM for efficient updates.

Learn to create a React app with npx create-react-app, configure the project folder, and start the development server; understand the node_modules, public, src, index.js, and app.js structure.

Understand the flow of a React application, from project structure with node modules, public and src folders, to rendering via index.js, JSX components like app.js, and npm start.

Learn what props are in React: an object of properties that enables passing data from a parent component to a child component via attributes, and render updates when props change.

Explain how JSX lets you write HTML-like markup inside JavaScript for React components, including how functions export as components and render lists with map.

Learn to build JSX by creating two React components, heading and paragraph, using arrow functions and return, exporting and importing them, and rendering with a React fragment.

Explore what a React component is, a reusable piece of UI that can be nested with other components, and understand functional versus class components and props.

Create and export a component, import it into app.js, and pass data via props. Explore two prop-access methods—destructuring and direct props—showing dynamic headings and paragraphs.

Explore React hook fundamentals, comparing functional and class components, and learn how hooks like useState, useEffect, useCallback, useMemo, useRef, and useReducer manage state and side effects in modern React apps.

Learn how hooks extend functional components with state via useState, including importing, creating state, and updating it with a setter; see an example of plus, minus, and prop sharing.

Use the use effect hook to fetch data from an api and render cards with thumbnails, titles, and descriptions, using use state to manage the data.

Learn how conditional rendering in React controls UI output based on state, using the ternary operator to show a login form when not logged in.

Introduce ChatGPT as an OpenAI large language model based on the GPT architecture, explain API key and structure, and guide building a text-based chat interface that generates human-like responses.

Access the chat API from the open platform, configure headers with content type and authorization using your OpenAI key, and implement a chat flow with axios in Node.js or React.

Learn how to obtain your ChatGPT API key by creating an OpenAI account, signing in, navigating to personal, viewing or generating the API key, and saving it for API calls.

Build a web app with React and the ChatGPT API by calling Axios, managing input and response state with useState and useEffect, and showing a loader while awaiting answers.

Understand the shift to paid OpenAI API access and how this affects token use. Learn to set up a billing plan and manage quotas for chat and completion requests.