My React and Next.js Learning Journey: Completing My Udemy Course and Building Super Noddles

There is something exciting about learning a new technology and eventually getting to the point where you can use it to build something of your own. Over the past few weeks, I have been focusing on React and Next.js, exploring their features, understanding how they work and getting familiar with the tools used in modern frontend development. I'm happy to share that I've completed my React and Next.js course on Udemy and received my certificate of completion.

This was another important milestone in my software development journey. I wanted to expand my knowledge beyond the programming languages and technologies I had previously worked with. I was interested in understanding how React works, why developers use it and how Next.js builds on top of React to provide a more structured way of developing applications.

Getting Started with React

My learning journey started with React. Before moving into Next.js, I needed to understand the fundamentals of React and how it approaches building user interfaces.

One of the first things I explored was functional components. I learned that React applications can be broken down into smaller, reusable pieces called components. Instead of writing an entire application in one large file, components allow developers to organise the interface into manageable sections.

I also spent time understanding JSX, which allows us to write HTML-like structures inside JavaScript. At first, working with JSX required getting used to its syntax, especially understanding how JavaScript expressions are included inside the markup.

Another important topic was props. I learned how components can receive information from their parent components and use that information to display different content. This helped me understand how reusable components work and why they are useful when developing applications.

As I continued with the course, I explored state management and event handling. I learned how React manages information that changes over time and how users can interact with different elements on a page. Concepts such as useState and handling events became important parts of my learning.

Moving from React to Next.js

After exploring the React fundamentals, I moved on to Next.js. This was where I started learning about a different way of structuring and building applications.

One of the first things I explored was the Next.js App Router. I learned how the app directory is organised and how files such as page.tsx and layout.tsx are used to define pages and layouts within an application.

I also learned about routing and how Next.js uses the folder structure to create application routes. This made it easier to understand how different pages are organised and connected without having to manually configure every route.

Another interesting part was understanding the difference between Server Components and Client Components. I learned that Next.js uses Server Components by default and that Client Components are needed when a component requires browser-side interactivity, such as handling user events or using React hooks.

The use client directive was one of the concepts I spent time exploring because it determines whether a component needs to run on the client side. Understanding when to use it and why it is needed became an important part of working with Next.js.

I also explored how components, pages and layouts fit together within the application structure. This helped me understand how to organise code instead of placing everything inside a single page.

Putting What I Learned into Practice: Super Noddles

While going through the course, I wanted to have something practical that I could work on alongside the lessons. This led me to start building a project called Super Noddles, a simple recipe and community website built with Next.js.

The idea behind Super Noddles is to create a platform where users can explore different noodle recipes, view ingredients and cooking instructions, and discover recipes shared by the community. I wanted the application to have a simple layout that makes browsing recipes straightforward.

For this project, my main focus was the frontend. I used dummy data to populate the application rather than immediately connecting it to a backend. This allowed me to concentrate on understanding how the interface works, how information is displayed and how different components can be organised.

I worked on creating reusable components for displaying recipes and organising the different sections of the website. Rather than repeating the same code for every recipe, I explored how I could create components that receive different information and display it accordingly.

I also worked with images and arrays of data to display multiple recipes. This gave me an opportunity to practise rendering lists in React and understanding how data can be passed into components.

Another part of the project involved working with pages and navigation. I explored how the Next.js App Router handles different routes and how users can move between different sections of the website.

Super Noddles was an opportunity to apply the React and Next.js concepts I had covered in the course. It also helped me become more familiar with creating a project structure and organising components in a way that makes the application easier to manage.

Understanding the Next.js Project Structure

One of the areas I wanted to understand better was how a Next.js project is organised.

When starting a new application, Next.js provides a project structure with different folders and files, each serving a particular purpose. Understanding where components should go, where pages should be created and how layouts are used is important when working on larger applications.

I spent time exploring the app directory, the components folder and other parts of the project. I also practised creating components in separate files and importing them into pages where they were needed.

This helped me understand the importance of keeping code organised. As applications become bigger, having a clear structure makes it easier to locate files, maintain code and introduce new features.

I also explored CSS Modules, which allow styles to be scoped to individual components. This was useful when working on different sections of my application because I could organise the styling without having to place every style in one global stylesheet.

Exploring Data and Database Integration

Another area covered during my learning was working with data.

I explored how information can be displayed within components and how applications can retrieve information from different sources. I also started learning about database integration and how an application can store and retrieve information.

SQLite was one of the technologies I explored while working with Next.js. This introduced me to the idea of connecting an application to a database rather than relying entirely on static or dummy data.

Understanding how the frontend communicates with server-side functionality and how information is stored in a database is an important part of developing full-stack applications.

It also gave me an opportunity to explore concepts beyond simply designing the user interface.

Completing the Udemy Course

After going through the different sections and lessons, I officially completed my React and Next.js course on Udemy.

Receiving the certificate was a nice way to mark the completion of this learning experience. It represents the time I spent exploring new concepts, following the lessons and working through the different topics covered in the course.

However, completing the course was not the end of my learning process. I wanted to continue exploring the concepts outside the course environment and understand how they work when applied to actual applications.

There were certain sessions that I wanted to revisit, particularly those involving Client Components, Server Components, application structure and database integration. Going back to these topics and practising them through small projects became part of my approach to strengthening my understanding.

I also realised how important it is to experiment with the code rather than simply copying examples from the lessons. Making small changes, testing different approaches and building separate components are all ways I can continue improving my practical skills.

What Comes Next?

Now that I have completed the course and worked on Super Noddles, I want to continue building more applications using React and Next.js.

My next focus is to explore CRUD functionality and understand how to create applications that allow users to create, read, update and delete information. I have started working on a simple comment application called Make-Comment, where I am using Next.js, TypeScript and SQLite to practise these operations.

I also want to spend more time understanding how Server Actions work, when to use Client Components and how data moves between the frontend, server and database.

There are still many features and concepts within Next.js that I would like to explore. My goal is to keep building small projects that allow me to practise individual concepts before moving on to more complex applications.

For now, I'm happy to have completed the course and to have Super Noddles as one of my practical projects from this learning experience.

One more course completed, new concepts explored and more projects to build. This journey continues!

Certificate Link: http://ude.my/UC-5dd01074-4a50-4945-870f-89af236d1472