Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Explore the section introduction to building a Next.js portfolio app with a navbar, hero, and portfolio highlights, plus dynamic pages and server-side rendering using attached resources.

Create a Next.js portfolio project from scratch by installing node.js and npm, setting up visual studio code, initializing npm, creating a pages folder and index.js, and adding bootstrap styling.

Organize pages inside the pages folder, creating portfolios, categories, and login routes for a Next.js portfolio app.

Learn to modularize a Next.js app by creating and exporting reusable components, organizing them in a shared components folder, and refactoring portfolios and categories into subfolders to enable dynamic routes.

Create a dynamic portfolio detail page in Next.js using a [id].js route, and extract the portfolio id with getInitialProps in both class and functional components, on server and client.

Build dynamic pages for a portfolio app using Next.js, creating forum categories, topics, and posts, adding a login page, and organizing routing with nested folders.

Learn to set up an alias for absolute paths in a next.js portfolio app by configuring next.config.js, exporting a path alias, and updating imports to reference the shared components folder.

Learn how the root app component in Next.js serves as the entry point, renders pages, wraps them in a container, and conditionally shows a hero on the home page.

Explore how getInitialProps works in _app, how to fetch and merge data for portfolio pages, and the async data flow and debugging of initial props.

Compare server side rendering and client side rendering within a next.js app, highlighting initial props, static generation, and SEO advantages.

Explore how server rendering works in a Next.js app and debug data flow via getInitialProps for portfolio pages.

Learn to build a responsive navbar component with react-bootstrap in a Next.js portfolio app, including a burger menu and right-aligned links like portfolios, forum, sign up, and sign in.

Learn to implement client-side navigation in a Next.js app using a reusable uplink component and the Link component to move between portfolios, forums, login, and CV pages.

Explore GraphQL queries and mutations on a portfolio with Next.js and Apollo, using create, update, delete operations. See how real-time updates connect the detailed portfolio page with client and server.

Explore how GraphQL enables precise data queries between client and server, using queries and mutations to fetch portfolios with title and content, via express and rest api concepts.

Implement GraphQL integration for a portfolio app using GraphQL and express-graphql, set up npm packages, build a schema, define a hello query, and test with GraphiQL.

Learn to implement portfolio resolvers in a Next.js app with GraphQL, defining a Portfolio type and a portfolios query to fetch title, content, job title, and days of experience.

Rework the portfolio data by copying predefined entries and defining fields like title, company, company website, location, and start date. Enable automatic server restarts with nodemon and file watching.

Fetch portfolio data on the client in a Next.js app using GraphQL and Apollo, building a portfolios query for title, company, website, location, and description.

Build a portfolio card component in a Next.js and Apollo app, map portfolio data into grid columns, and display title, job title, description, start and end dates with unique keys.

Learn to fetch a specific portfolio using a query parameter by id, implementing GraphQL queries in a Next.js and Apollo setup to return the matching portfolio.

Fetch a portfolio by id and render its details on a portfolio detail page using a provided template; populate title, job title, location, and description with Next.js and Apollo.

wrap portfolio cards with next/link to navigate to dynamic portfolio pages using /portfolios/[id]. pass the portfolio id as a variable and inspect client-side navigation and requests to fetch each portfolio.

Refactor the server by moving data and portfolio types into centralized graph q and types folders, update imports, and enable reliable navigation to the portfolio detail page using GraphQL.

Explore how GraphQL mutations create, update, and delete portfolios, define input types, and return the newly created portfolio, including generating IDs with a crypto package.

Set up an Apollo server with Express to power a Next.js portfolio app, defining a schema with portfolio queries and mutations.

Define the update portfolio mutation on the server, identify by id, apply input data, and test merging versus overwriting in the GraphQL playground.

Learn how to implement a portfolio feature using React and GraphQL mutations with Apollo, including creating and updating portfolio data, managing state, and integrating with a Next.js app.

Learn to implement update portfolio functionality in a Next.js and Apollo portfolio app, including an update button, GraphQL mutation, and state updates.

Implement delete portfolio mutation in GraphQL with Apollo, refactor client state to remove portfolios, and prepare centralized query definitions for server and client Apollo usage.

Explore section three actions as you wire Apollo and GraphQL for client apps, connect to a MongoDB database with Mongoose, and implement CRUD operations for portfolios via clean action functions.

Learn to integrate the Apollo client for state management and data fetching in a Next.js React portfolio app using GraphQL, with caching and a provider.

Learn to fetch portfolio data with Apollo in a Next.js app by using useEffect and useLazyQuery, manage loading states, and address hydration mismatches between server and client.

Improve the portfolio page by wiring Apollo to fetch portfolios with a get portfolios function, manage loading and data states, and implement lazy loading for seamless display.

Learn to implement a create portfolio mutation with Apollo and GraphQL using the useMutation hook, define and execute the mutation, and update portfolio state.

Learn how to implement portfolio caching with Apollo, update the cache after mutations, and keep portfolios in sync for real-time, faster pages.

apply a higher-order component with Apollo to wrap pages, enable queries and mutations, and enable server-side data loading in Next.js using getDataFromTree for SSR.

Use an Apollo HOC with SSR to fetch the portfolio data via a GraphQL query. The approach loads data on the server, enabling immediate client rendering with no flicker.

Implement update portfolio functionality using a GraphQL mutation with variables to update a portfolio by id, load data from data center, and reflect changes on the portfolios and detail pages.

Implement a delete portfolio mutation in a Next.js and Apollo app, update the cache, and filter portfolios to remove the deleted item, keeping the user interface and data in sync.

Refactor the portfolio app by moving update, delete, and get mutations into a dedicated actions file and implement reusable use mutation hooks for portfolios.

Explore Apollo dev tools to inspect your portfolio app’s GraphQL data, view cache and mutation logs, and debug create, update, and delete portfolio operations in real time.

Set up a free Mongo Atlas cluster, create a portfolio database, and configure a connection string with a database user and IP access for your Next.js and Apollo app.

Use a .gitignore to protect sensitive database connection strings by excluding files such as server/config/that.js from version control and deployments to Heroku or GitHub.

Install and configure mongoose for a MongoDB database, create a database module with a connect function, and wire the config db string to establish a stable, unified topology connection.

Create a portfolio schema and model with Mongoose, then seed the MongoDB database using a fake data set to populate initial portfolio documents.

Define the portfolio model and seed the database with initial portfolio data using a populate function, then clean the data and re-populate with fake data.

Fetch and display portfolios from the database using the portfolio model, rendering all portfolio documents in the app while handling date formats and milliseconds.

Learn to create, update, and delete portfolio entries in a database using GraphQL mutations, ensure ISO date formatting for start and end dates, and return the affected portfolio.

Learn to build a GraphQL portfolio model abstraction layer, with a dedicated models folder and a portfolio class implementing get all, get by id, create, update, and delete.

Separate Apollo functions into a dedicated server module, moving mutations, types, and models for readability. Set up an Apollo server with Express and test locally while preparing basic authentication.

Implement sign up, sign in, and sign out flows using GraphQL, a Mongo user model, and passport-based middleware, with a context to manage authentication state.

Develop user infrastructure with GraphQL mutations for sign in, sign up, and sign out. Create a user model and connect it to a portfolio model using Apollo.

define a mongoose user model and schema with fields like email, name, username, password, and role; enforce lowercase, required, length limits, and a unique email index with custom validation messages.

Implement a GraphQL sign up flow by defining sign up input types, validating password confirmation, enforcing unique emails in MongoDB, handling common errors, and returning the new user ID.

Learn to hash passwords before storage by generating a salt and applying a hashing function, then store the hashed password in the database to protect user data.

Seed the fake database by defining two users with explicit ids, hashed passwords, avatars, and profile fields, then link portfolios to users via mongoose references and verify associations.

Develop an auth context for Next.js Apollo portfolio app by defining sign in inputs (email, password) and wiring a build out context with an authenticate function tied to login model.

Set up session management for the portfolio app by integrating express-session with a MongoDB session store (connect-mongo), define a portfolio sessions collection, and refactor into a dedicated middleware.

Explore implementing a GraphQL authentication strategy using passport in a Node/Express setup, including installing passport, creating a strategy with a verify callback, and wiring authenticate logic for user verification.

Register a passport strategy, wire in its verify callback, and debug the authentication flow from strategy initialization to passport.authenticate, using email and password verification and session setup.

Refine the auth flow by returning a user via promises instead of immediate values, using async signatures, resolve and reject handling, and try/catch to manage authentication results.

Learn to retrieve a user from the database by email, verify their password with passport, and return the user data to clients in an Apollo and Next.js workflow.

Learn how to return a user from a sign-in mutation using GraphQL in a Next.js and Apollo portfolio app, defining a user type and selecting username and email fields.

Implement password validation by adding a user model method that compares a plain password to the stored hashed password with bcrypt, using a callback for results.

Demonstrates creating a custom express-style middleware to intercept requests, integrate passport-based session storage, save user id and cookies to the database, and wire the session into the GraphQL context.

Learn how to store user sessions with Passport by registering middleware, serializing the user, and creating a session cookie that authenticates requests for two hours.

Implement sign out by calling a logout function via passport, clearing the user session, and updating the context and GraphQL flow to remove the user from active portfolio sessions.

Implement an is authenticated check in the app context to support sign out, manage passport sessions, and serialize the user into a portfolio session cookie.

Explore authentication in a Next.js and Apollo app by implementing login and register flows with GraphQL, persisting auth state, and protecting routes with a higher-order component.

Transform the login page into a sign up form with username, email, password, and password confirmation inputs, and manage state with change and submit handlers.

Explore building a form with react-hook-form by installing the package, using useForm, registering inputs, and handling onSubmit to pass submitted data to a mutation.

Learn to implement a sign up mutation with Apollo in a Next.js app, passing email, username, and password variables, handling on submit, and directing users to login after success.

Explore registering a user with Apollo mutations in a Next.js app, handling data and errors, and redirecting after signup with a dedicated redirect component using the Next router.

Handle errors in a GraphQL form submission by extracting server messages, formatting them, and displaying them with bootstrap alerts, while validating inputs and handling duplicate user errors.

Handle server errors during user creation by wrapping operations in try/catch, returning custom messages like email already exists and validating usernames to improve client feedback.

Learn to separate the login form into its own component, handle email and password inputs, and submit sign-in data in a React/Next.js project.

Learn to implement sign in in a Next.js and Apollo portfolio app using a GraphQL signIn mutation with email and password, handle errors, manage cookies, and greet users after login.

Learn to fetch the authenticated user from the server using GraphQL in a Next.js and Apollo portfolio app, including get user queries, session cookies, and sign in/out flows.

Learn to display the logged-in user in the navbar by fetching user data with a lazy GraphQL query and updating the UI with sign-in and sign-out options.

Debug and fix the sign-in flow by caching the signed-in user with a GraphQL mutation, updating the Apollo cache, and ensuring the user name displays across pages.

Implement a sign-out flow with a logout page and a sign-out mutation using Apollo, then reset the store and redirect to the login page, with a loading state for feedback.

Guard authenticated routes with a higher-order component in a Next.js and Apollo app by fetching the current user via useQuery (network-only) and redirecting unauthenticated users to login.

Check user role implements role-based access control using a higher order component, redirecting unauthorized users to login and guarding secret pages for admins or instructors.

Create a portfolio via the client app's portfolio create page, collecting title, company, website, location, job title, description, and start date with an optional end date, using a calendar.

Build a new portfolio page and a dedicated portfolio create form using a portfolio form component, guarded by admin access and authentication with Apollo within the Next.js pages structure.

Implement role-based navigation using with auth: add a Bootstrap dropdown for portfolio links, exposing create portfolio and portfolios pages to admins and instructors, with UI tweaks and access checks.

Learn to add a datepicker to a Next.js and Apollo portfolio app by installing a React date picker, importing styles, and wiring start and end dates with a year dropdown.

Enable date selection in a date picker by wiring start date and end date to a reactive form, using an on change handler and setValue to update the fields.

Implement a toggleable end date in a form with a disable end date button, conditional display, and robust date handling using ISO strings.

Finish implementing portfolio creation by wiring a create portfolio mutation with inputs like title, company, website, location, and dates, validate data, and redirect to the portfolios page.

Learn how to implement a base layout in a Next.js and Apollo portfolio app, wrapping pages to ensure data consistency and fix empty portfolios caused by client-server data mismatch.

Handle errors in the portfolio app by enforcing user authentication, assigning portfolios to users, and displaying not authorized messages during debugging with GraphQL.

Check for user role demonstrates gating the portfolio create page by validating the current user's role on the server, using array includes to permit an instructor with the right permissions.

Learn to manage portfolios in a Next.js and Apollo app by logging in, using the inspector page to update or delete portfolios, and reflecting changes on public pages.

Create an instructor dashboard in a Next.js app that lists the portfolios owned by the logged-in user and enables delete and update actions, with an admin-style view for all portfolios.

Build a user portfolio resolver to fetch all portfolios by user id, support sorting by start date, and empower admins and instructors to manage portfolios from the instructor dashboard.

Fetch user portfolios via a GraphQL query using Apollo in a Next.js app and display title, description, job title, start date, and end date in the dashboard.

Add dashboard controls for managing portfolios in a Next.js and Apollo app, including update and delete actions. Create a dynamic edit page (portfolios/[id]/edit) with navigation links and a simple form.

Implement a delete user portfolio mutation in the dashboard and verify the portfolio is removed correctly while other portfolios remain.

Create a portfolio update form in a Next.js and Apollo app, fetching a portfolio and pre-filling its data, including start and end dates. Wire GraphQL actions with variables to update.

Master updating a portfolio entry with a Next.js and Apollo GraphQL mutation, wiring variables, input types, and validation, plus real-time UI refresh and UX considerations.

section introduction presents ux improvements in a next.js and apollo portfolio app, including client-side experience days calculation, secret page access with timed messages, and server-side redirects.

Learn to implement toast messages to notify users when a portfolio update succeeds, using a popular toast library, and configure the toast container and success styling.

Format dates in the Next.js and Apollo portfolio app with a moment-based date formatter, applying it to start and end dates across cards, dashboard, and detail pages, including present handling.

Define and resolve client-side fields in a Next.js Apollo portfolio app, computing days of experience from start and end dates, and leveraging caching and custom field logic.

Implement server-side redirects in Next.js using getInitialProps to redirect unauthenticated users to login before rendering. Test redirects via links vs URL navigation and guard secret pages.

Learn to display redirect messages in a Next.js app by passing not authorized or login prompts via query parameters and rendering status-based alerts with a centralized messages module.

Show how to auto dismiss a login message after three seconds with useEffect and setTimeout, including a cleanup that clears the timeout on unmount in a Next.js and Apollo app.

Develop a reusable spinner loader component to show a centered loading state during login and navigation, with size and color variants for consistent app-wide feedback.

Build a forum feature with server-fetched categories and topics, enabling login-required topic creation, slugs, replies, and real-time updates with date-based sorting.

Add categories to the fake database by creating a forum category schema and model, populating data with titles, subtitles, and unique slugs, and correcting subtitle casing.

Populate topics data for a Next.js and Apollo portfolio app by defining a topic schema with title, content, category, and user references.

Create and wire a forum category type and resolver in a GraphQL-enabled portfolio app, including a model, database setup, and queries to fetch all forum categories via GraphQL.

Define a topic type with slug, title, content, and a linked forum category and user, then implement topics by category queries and populate related data.

Refactor the topics fetch to use category slug instead of the category id, enabling GraphQL queries to retrieve all topics in a specific category such as general discussion.

Display forum categories and topics by fetching data with Apollo queries. Create a categories index, render titles and subtitles, and link to category pages using GraphQL queries and slugs.

Learn to fetch and display topics by category using Next.js and Apollo with GraphQL, building and rendering topics by category data in the app’s UI.

Implement a topic resolver in Next.js and Apollo: create a GraphQL mutation to add a topic with title, content, and forum category, enforce user authentication, and generate a slug.

Use a slugify package to convert a topic title into a slug with lowercase, character removal, and a dash replacement; handle duplicates with a server-side check and a triage block.

Prevent duplicate topic slugs in a Next.js and Apollo app by handling duplicate key errors, adding slug randomization, and using a private async create function with a unique slug package.

Develops a replier component for the Next.js and Apollo portfolio app to manage forum topic creation with title and content inputs, a shared reply controls component, and login-gated actions.

Improve the reply feature by wiring a close handler across all players, using a controlled title and content state, and enabling a resettable submit flow for new topics.

Implement a create topic mutation in a next.js and Apollo app to submit title, content. Bind forum category input and render the new topic in real time.

This lecture demonstrates adding a topic to the cache in real time using an update function, handling topics by category, and debugging with try-catch to ensure consistent data.

Implement navigation to forum topics by slug and fetch topic data via GraphQL. Build a topic detail page that displays the topic title, content, and posts.

Define a posts data model for a Next.js and Apollo portfolio app, including content, slug, topic, user, and optional parent for replies. Seed realistic posts, topics, and users with timestamps.

Learn how to fetch posts by topic in a Next.js and Apollo app by implementing a posts by topic resolver, including post, topic, and user models.

Fetch posts by topic using GraphQL with Apollo in a Next.js app, populating topic slug, topic data, user, and parent data.

Display polls on the topics page by iterating posts with map and rendering each as a post item showing user name, avatar, content, and creation date, sorted by creation time.

Learn to enhance a Next.js Apollo portfolio app by formatting post dates relative to now, refactoring into reusable post components, integrating a replay/player, and adding a create post workflow.

Learn how to implement a create post GraphQL mutation in a Next.js app, including input types, authentication checks, and post creation with slug and created at timestamp.

learn to create a post on the client side with a GraphQL mutation, defining variables content, topic, and parent, and wire posting and replying flows in the app.