Setting Up Node.js and Starting Our Pokémon App Project

Kickstarting Our Project: Node.js Setup and Initial Steps

Welcome to AutistiCoder, where we’ll be setting up our Pokémon-themed app project! In this post, we’ll walk you through installing Node.js, an essential tool for running JavaScript code outside the browser, and then introduce Next.js, a framework that simplifies building web applications. Let’s dive into the setup, what these tools bring to our project, and how to get everything ready to start coding.

What is Node.js, and Why Do We Need It?

Node.js is a runtime environment that allows us to execute JavaScript code on our local machines without needing a web browser. It’s what will make it possible to build and run our Pokémon app directly on our computers. With Node.js, we can also manage packages that streamline development and add extra functionality to our code.

Installing Node.js (Long-Term Support)

For stability and support, we’ll install the LTS (Long-Term Support) version of Node.js, which provides regular security updates and works smoothly with most tools and libraries.

Steps to Install Node.js:

1. Visit the Node.js website and download the LTS version.
2. Follow the installation prompts and, once complete, open your terminal.
3. Run the following command to check the installation:

node -v

You should see a version number in response, confirming that Node.js is installed.

Introducing Next.js: Our App Framework

Next.js is a framework for building fast, server-rendered web applications using React. It allows us to easily set up pages, handle routing, and fetch data from APIs—all things we’ll need to make our Pokémon app work seamlessly.

Setting Up Our Next.js Project

With Node.js installed, we’re ready to create our Next.js project, which we’ll name “pokeapi.” This project will be our foundation, where we’ll write code, configure settings, and eventually display Pokémon data.

Creating the Next.js Project:

1. Open Your Terminal (or Command Prompt).
2. Navigate to Your Project Folder:

cd Documents

1. Create the Next.js Project by entering:

npx create-next-app@latest pokeapi

1. Answer Setup Questions:
   You’ll be prompted to answer a few setup questions. Here are the answers for our project:
   • Use TypeScript? No
   • Use ESLint? Yes
   • Use Tailwind CSS? Yes
   • Use src/ directory? No
   • Use App Router? Yes
   • Customize default import alias (@/*)? No

After answering these prompts, Next.js will complete the setup and automatically install the necessary packages.

Navigating to Your App and Running the Development Server

With everything installed, let’s see if our app is set up correctly by running it locally.

1. Navigate to Your App Directory:

cd Documents/pokeapi

1. Start the Development Server:

npm run dev

1. Open Your Browser and go to http://localhost:3000. This address lets you preview your app while you develop it.

If the setup is successful, you should see a default Next.js welcome screen, which confirms that our development environment is ready.

What’s Next?

We’re off to a strong start! With Node.js and Next.js set up, we’re ready to move forward with our Pokémon app. In the next steps, we’ll dive into JavaScript fundamentals, creating variables, and using conditionals to manage the data that will power our app.

If you’re following along, make sure to subscribe to the AutistiCoder YouTube channel at https://www.youtube.com/@AutistiCoder for more tutorials and detailed walkthroughs as we continue to build this project together.

Happy coding, and see you in the next post!