Learn Next.js by Creating 2048 Game From Scratch!

Focused View

Mateusz Sokola

5:21:06

13 View

1. Getting Started

1.1 Play 2048!.html

1. Hello world! Lets build something cool today!.mp4

01:08

2. Create new React + NextJS project.mp4

09:02

3. Clean up boilerplate and define game styles.mp4

10:02

2. Project Setup and Base Components

1. Game board.mp4

13:14

2.1 React Testing Library.html

2.2 React Testing Library - NextJS.html

2. Testing.mp4

12:17

3. Tiles.mp4

08:26

3. State Management, Hooks and Game Logic

1.1 Finite State Machine in JavaScript.html

1. Managing state with useState and useReducer hooks.mp4

28:30

2.1 React documentation for StrictMode.html

2.2 React documentation for useEffect.html

2.3 React documentation for useRef.html

2. Rendering tiles - useEffect, useRef, React StrictMode.mp4

25:55

3. Vertical tile moves.mp4

30:45

4. Horizontal tile moves.mp4

14:30

5. Tile stacking.mp4

22:01

6. Tile merging.mp4

16:18

7.1 Array#reduce on MDN.html

7.2 Lodash documentation for flattenDeep.html

7.3 The Ultimate Guide to JavaScript Array Methods - Reduce.html

7. Board clean up.mp4

11:13

4. Context API, Advanced Hooks, and Animations

1.1 Animation Examples (2048).html

1.2 Tests for usePreviousProps hook.html

1. Animations.mp4

13:10

2.1 React Context documentation.html

2.2 React documentation for useCallback.html

2.3 Scaling up React Context and Reducer.html

2. Creating tiles - React Context and useCallback.mp4

22:01

3. Virtual DOM How React renders components.mp4

17:06

4.1 Tests for the hasChanged flag in Game reducer.html

4. Restricting tile creation.mp4

10:47

5. Responsive Layout and Missing Game Features

1.1 Github Gist with styles for mobile devices.html

1.2 Use passive listeners to improve scrolling performance.html

1. Game layout and mobile swipes.mp4

28:10

2.1 Github Gist with styles for the Score component.html

2.2 Tests for Score component.html

2. Scoring.mp4

12:11

3.1 Github Gist with styles for desktop.html

3. Desktop layout with react-responsive.mp4

06:00

6. Misc

1.1 Debouncing and Throttling Explained Through Examples.html

1.2 Lodash Documentation Throttle.html

1. Debounce vs throttle.mp4

08:20

2. Create your own usePreviousProps hook.html

Description

Let's build awesome game and learn React and NextJS together because learning doesn't need to be boring!

What You'll Learn?

How to build your own 2048 game with React 18 and NextJS. We'll add awesome animations, and here's the cherry on top – it works on mobile devices!
Essential React hooks – useState, useRef, useCallback, useEffect, and more – to enhance the functionality and performance of your apps
Manage complex state using useReducer and the Context API, enabling you to efficiently control the flow of data
Seamlessly integrate TypeScript into your React project, enhancing code quality and developer experience
Grasp the nuances between debounce and throttling and apply these concepts strategically for optimized event handling and improved user interactions
Develop responsive layouts in React for your 2048 game, ensuring a visually pleasing and functional display across a range of screen sizes and resolutions
Tailor your 2048 game for mobile platforms, mastering techniques to deliver a seamless gaming experience on a variety of devices
Learn how React renders views, so VirtualDOM doesn't bring you any headaches!
Leverage the power of most popular React framework – NextJS
Testing with react-testing-library

Who is this for?

Aspiring React and NextJS Developers: Whether you're new to React or NextJS, this course is your gateway to mastering modern web development

You're Bored with Todo List and Boring Examples: Online courses focus on building projects nobody is gonna use. Let's build something your friends would love to use

Learn from Real-World Experience: Dive into lessons from an experienced developer who's built various medium and large-scale applications. Learn the ropes from practical insights

You Learned JavaScript and Wonder How to Elevate Your Skills

What You Need to Know?

HTML, CSS and JavaScript fundamentals are required

Basic knowledge of command line. Essentials only

More details

Description
Premiered in January 2024 Â

I believe programming should be fun and unleash creativity. Why would you waste time on building yet another Todo list or shopping cart that can't even handle payments? Let's do something truly exciting â€” let's build an awesome 2048 game! And I don't mean those sloppy and glitchy ones you can find on everywhere the Internet. Our game will have animations and you will be able to play it on your phone!

The best part is that you will build it on your own from scratch! My mission is to help you become a rockstar developer. This journey isn't about memorizing React features; it's about experiencing the actual development workflow. Together, we will learn how to use the most popular React framework â€” NextJS. We'll take advantage of type safety using TypeScript and amplify your developer experience. Trust me, your colleagues are going to love your testing skills and consistent code thanks to code linters and formatters.

But before you enroll let me tell you more about the finale of this adventure. Drumroll, please! After this course you will have an incredible 2048 game in React. All made by yourself! Picture that: A 4 x 4 board, where your goal is to merge tiles until they proudly display the number 2048. The game will be fully functional and don't forget those kick-ass animations as you can see them now. Oh, and here's the cherry on top â€” you'll be able to play it right on your mobile device! Yep, that's right, swipe your way to glory! (swipe swipe)
I hope you are hooked now.

Since this course isn't about myself but you might want to know my credentials. My name is Mateusz and I'm a seasoned software engineer with over 12 years of industry experience. I've had the privilege of working in diverse development teams from Europe, US and Asia. My journey with React began in 2017, and since then, I've built a bunch of medium and large-scale applications. This means you'll be learning from someone who has not only mastered these technologies but also applied them extensively in real-world scenarios.
Let's get started!
Who this course is for:
Aspiring React and NextJS Developers: Whether you're new to React or NextJS, this course is your gateway to mastering modern web development
You're Bored with Todo List and Boring Examples: Online courses focus on building projects nobody is gonna use. Let's build something your friends would love to use
Learn from Real-World Experience: Dive into lessons from an experienced developer who's built various medium and large-scale applications. Learn the ropes from practical insights
You Learned JavaScript and Wonder How to Elevate Your Skills

User Reviews

Rating

average 0

Total votes0

Focused display

Hello! I'm Mateusz, a seasoned software engineer with over 12 years of hands-on experience. My journey has been shaped by collaborating with developers across Europe, United States, the Middle East and Asia. This diverse exposure has provided me with a rich tapestry of perspectives and practices.In 2017 I deep dived into React and I can say that I worked on a bunch of medium and large-scale applications. Beyond mastering the intricacies of Frontend technologies, I've actively applied them in real-world scenarios. When you learn from me on Udemy, you're gaining insights from someone who not only possesses in-depth knowledge but has successfully implemented these technologies in practical situations.Join me, and let's explore the exciting realm of software development together!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.