Building Whinst Part 4: Setting up the development environment and creating the project.

Setting up a development environment is a crucial step in every development process that usually goes overlooked. In this short article, I'll walk you through how I set the development environment for building Whinst and how I created the Whinst front-end project. Let's dive in🏃

Setting up the development environment🔧

This process was rather straightforward for me because I'd already built a couple of projects before this one, it isn't my first rodeo😏. But for those reading who are just starting, a development environment is sort of like a digital workspace in which you build software, and just like a physical workspace, you'll want your tools and equipment set up before you begin working. My development environment has my favorite text editor which is Visual Studio Code and I further set it up with all my favorite extensions and themes. I also have Node.js installed for the creation of the project and the importation of required packages.

Creating the Whinst frontend project👨🏾‍💻

As mentioned in the previous blogs, Whinst will be built using Next.js. To create a new Whinst Next.js project and get it running I ran the following commands in the terminal.

npx create-next-app whinst
cd whinst
npm run dev

The commands above created and started the Whinst Next.js project. While the project was being created I received a prompt asking me what I would like to use in the project, whether I'd like to use Typescript, Tailwind CSS, etc.

With the development environment setup and the project created, Whinst is now officially in active development. The next part will be creating the app homescreen, something you'll not want to miss so stay tuned to the blog. Thanks for reading and see you in the next one🙏.