Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.
More
What is Apollo ?
Apollo is the industry-standard GraphQL implementation, providing the data graph layer that connects modern apps to the cloud. Apollo will handle data fetching, caching and state management of out the box!
What is Next.js ?
Next.js is React framework that provides infrastructure and simple development experience for server side rendered(SSR) application.
An intuitive page-based routing system (with support for dynamic routes)
Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
What are we going to build ?
We will work mainly on portfolios features. You will learn how to manage data on the client and the server with Apollo and Graphql. Data will be stored in Mongo Atlas Database to which we will be communicating through the Node JS Server. We will create a functionality to create a portfolio and I will explain you how to easily manage forms. Then we will take a look on an update functionality where I will show you how to populate inputs with existing data. After that will work on a delete functionality. All of the features will be reactive and updating view in real time. You will learn the basics of data fetching and data mutations with Apollo.
Another big feature we will be working on will be session based authentication. We will prepare login and register forms. Users will be able to register, login and experience features only for authenticated users. You will learn how to manage sessions, how to protect the pages, and manage an authentication state through your application.
Forum feature will be the biggest one. You are going to learn how to create fully working forum consisting of topics and posts. We will integrate a component that will be used for topic and posts creation. Users will be able to create various topics, posts and also replies to other posts, all updated in real time and also across the browsers. After that you will learn how to create a fully working pagination!
Later in the course we will create features to get randomised data for home page and I will talk about re-usability. We will finish CV page and we will get into deploying. After all production improvements will be applied we will deploy our application to heroku so anyone on internet can access our portfolio.
- Basics of React Framework!
- Fundamentals in HTML and CSS, but isn't must have
- Starting as well as experienced developers interested in Next JS, GraphQL, Apollo
- This course is for everyone eager to create apps with modern tech stack
What you'll learn:
- Develop Real-world web application with Next JS, Apollo and Node
- Create your own portfolio application in most demanded frameworks on the market
- Grasp full power of GraphQL
Watch Online Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)
| # | Title | Duration |
|---|---|---|
| 1 | Project Preview | 02:34 |
| 2 | How to resolve issues | 08:29 |
| 3 | Section Introduction | 02:21 |
| 4 | Creating the project | 27:58 |
| 5 | Create pages | 12:00 |
| 6 | Creating components! | 09:18 |
| 7 | Get initial props | 12:26 |
| 8 | More pages | 09:55 |
| 9 | Alias for absolute path | 06:12 |
| 10 | Root app component | 12:04 |
| 11 | Get initial props of _app | 13:31 |
| 12 | SSR Explanation | 23:40 |
| 13 | SSR Debugging | 22:50 |
| 14 | Navbar component | 12:36 |
| 15 | Navigation to pages | 15:28 |
| 16 | Section Introduction | 02:35 |
| 17 | GraphQL explanation | 14:05 |
| 18 | GraphQL integration | 13:34 |
| 19 | Portfolio resolvers | 15:09 |
| 20 | Data rework | 09:14 |
| 21 | Fetch portfolios on client | 17:16 |
| 22 | Portfolio card component | 06:40 |
| 23 | Provide parameters in query | 04:37 |
| 24 | Portfolio detail page | 08:24 |
| 25 | Links to portfolios | 06:29 |
| 26 | Server refactoring | 04:40 |
| 27 | Portfolio mutations | 13:10 |
| 28 | Apollo server | 09:39 |
| 29 | Update portfolio - server | 13:21 |
| 30 | Create portfolio | 10:36 |
| 31 | Update portfolio | 12:06 |
| 32 | Delete portfolio | 08:24 |
| 33 | Section Introduction | 02:40 |
| 34 | Apollo client | 19:15 |
| 35 | Get portfolio with Apollo | 14:10 |
| 36 | Get portfolios improvements | 07:56 |
| 37 | Create portfolio improvements | 06:23 |
| 38 | Create portfolio cache | 20:41 |
| 39 | Apollo high order component(HOC) | 13:07 |
| 40 | Apollo HOC with SSR | 07:31 |
| 41 | Update portfolio improvements | 06:07 |
| 42 | Delete portfolio improvements | 08:48 |
| 43 | Refactoring queries and mutations | 07:31 |
| 44 | Apollo dev tools | 03:20 |
| 45 | Mongo Atlas | 08:59 |
| 46 | Gitignore | 01:55 |
| 47 | Mongo DB + Mongoose | 07:17 |
| 48 | Portfolio Model + Fake DB | 15:32 |
| 49 | Populate DB | 09:15 |
| 50 | Get portfolio from DB | 03:44 |
| 51 | Portfolio create, update, delete in DB | 16:50 |
| 52 | GraphQL portfolio model | 15:26 |
| 53 | Separating apollo functions on server | 06:12 |
| 54 | Section introduction | 02:27 |
| 55 | User infrastructure | 08:27 |
| 56 | User mongoose model | 11:16 |
| 57 | Sign Up user | 15:01 |
| 58 | Password hashing | 11:42 |
| 59 | FakeDB populate users | 09:39 |
| 60 | Auth context | 15:45 |
| 61 | Sessions | 15:49 |
| 62 | GraphQL Strategy | 13:28 |
| 63 | Register strategy and debug | 22:11 |
| 64 | Promise in Auth | 08:56 |
| 65 | Find user in DB | 13:59 |
| 66 | Return user from sign in | 04:29 |
| 67 | Password validation | 07:44 |
| 68 | Middlewares | 07:53 |
| 69 | Store sessions with passport | 15:41 |
| 70 | Add sign out | 05:24 |
| 71 | Check if user is authenticated | 14:14 |
| 72 | Section introduction | 02:44 |
| 73 | Sign Up form | 15:59 |
| 74 | React hook form | 04:09 |
| 75 | Sign up user success | 15:45 |
| 76 | Redirect | 09:52 |
| 77 | Handle errors | 06:52 |
| 78 | Handle errors on server | 09:44 |
| 79 | Sign in form | 05:02 |
| 80 | Sign in done | 11:34 |
| 81 | Fetch user from server | 07:08 |
| 82 | Display username in navbar | 14:24 |
| 83 | Fix user after sign in | 09:28 |
| 84 | Sign out | 16:18 |
| 85 | HOC to check if user is authenticated | 15:53 |
| 86 | Check user role | 05:17 |
| 87 | Section introduction | 02:34 |
| 88 | Portfolio new page | 08:26 |
| 89 | Dropdown links + withAuth improvements | 12:12 |
| 90 | Datepicker component | 06:11 |
| 91 | Set dates in datepicker | 12:08 |
| 92 | Disable end date | 11:33 |
| 93 | Finishing create portfolio | 14:39 |
| 94 | Base layout | 13:49 |
| 95 | Handle errors | 12:08 |
| 96 | Check for user role | 06:05 |
| 97 | Section introduction | 01:43 |
| 98 | Instructor dashboard | 06:47 |
| 99 | User portfolio resolver | 09:04 |
| 100 | Fetch user portfolios | 14:22 |
| 101 | Add controls to dashboard | 11:34 |
| 102 | Remove portfolio mutation | 09:31 |
| 103 | Portfolio update form | 13:41 |
| 104 | Update portfolio mutation | 11:25 |
| 105 | Section Introduction | 02:14 |
| 106 | Toast messages | 07:36 |
| 107 | Format dates | 11:57 |
| 108 | Client side fields | 12:43 |
| 109 | Server redirect | 16:09 |
| 110 | Display message on redirect | 15:01 |
| 111 | Dispose message on login | 13:30 |
| 112 | Spinner component | 10:30 |
| 113 | Section Introduction | 04:36 |
| 114 | Add categories to FakeDB | 08:20 |
| 115 | Populate Topics data | 07:30 |
| 116 | Forum categories resolver | 09:29 |
| 117 | Fetch topics by category resolver | 13:21 |
| 118 | Fetch topics by slug changes | 06:17 |
| 119 | Display forum categories | 10:19 |
| 120 | Fetch and display topics | 09:39 |
| 121 | Create topic resolver | 16:05 |
| 122 | Slugify topic | 06:18 |
| 123 | Unique slug | 10:32 |
| 124 | Replier component | 15:30 |
| 125 | Replier improvements | 15:07 |
| 126 | Create topic functionality | 10:41 |
| 127 | Add topic to cache | 11:10 |
| 128 | Fetch topic by slug | 17:55 |
| 129 | Prepare posts data | 24:17 |
| 130 | Fetch posts resolver | 14:54 |
| 131 | Fetch posts | 11:06 |
| 132 | Display posts | 18:59 |
| 133 | Posts improvements | 27:39 |
| 134 | Create post resolver | 17:20 |
| 135 | Create post client side | 13:23 |
| 136 | Section introduction | 02:55 |
| 137 | Pagination component | 11:28 |
| 138 | Fetch more function | 14:41 |
| 139 | Get posts count | 11:05 |
| 140 | Get paginated data from server | 14:35 |
| 141 | Display data for specific page | 08:19 |
| 142 | Persistent pagination | 13:23 |
| 143 | Create post with pagination | 20:20 |
| 144 | Re-pooling data | 07:06 |
| 145 | Section Introduction | 01:28 |
| 146 | Highlight data | 19:17 |
| 147 | Reusable "random" function | 08:48 |
| 148 | Display highlight portfolios | 12:53 |
| 149 | Display topics | 17:31 |
| 150 | CV Page | 06:00 |
| 151 | Section Introduction | 01:49 |
| 152 | Prod base URL | 07:54 |
| 153 | Prod database changes | 09:33 |
| 154 | Prod session setup | 06:07 |
| 155 | Heroku and Git CLI | 06:23 |
| 156 | Deployment to Heroku | 13:19 |
| 157 | Course End + Testing | 17:12 |
Similar courses to Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)
Mastering Next.js 13 with TypeScript
Next JS & Open AI / GPT: Next-generation Next JS & AI apps
The Ultimate React Course 2023: React, Redux & More
Node.js CLI | Build Node.js Command-line Automation Dev-tools
React Hooks
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
Build a Realtime App with React Hooks and GraphQL
Node JS: Advanced Concepts
