Building a Social Media Website - Part 2: Ideas and Set up.

_Bonjour _and welcome to the second article of our series on building a social media website using NextJS 13, Zustand, Tailwind CSS, Apollo Client, and React i18n. In this article, we'll discuss how we found inspiration for the design of our social media website and go through the setup process to kickstart our project.

I- Finding Ideas for the Design

To start, we wanted a foundation for our social media website. We discovered a free GraphQL API that provides users, posts, comments, albums, and photos. This API is the only one that accepts both Queries and Mutations.

Then we need to find a matching template for these elements. While exploring various free ones on the internet, we found them to be lacking the specificity we desired. Eventually, we decided to take inspiration from the design of Instagram and made modifications to tailor it to our needs. We began by sketching out the different pages and dividing them into components. Some components would be reused across multiple pages, layouts, as we will see a crucial concept for NextJS 13.

II- Setting up the Application

To begin our coding journey, we'll need a reliable code editor. In this case, we'll use Visual Studio Code (VS Code) due to its popularity and extensive features.

Next, let's dive into the setup process for our project. First, we need to initialize NextJS 13. Open your terminal or command prompt and run the following command:

npx create-next-app@latest

This command will set up a new NextJS 13 project for us along with Tailwind CSS directly.

Next, we need to incorporate Zustand for state management, Apollo Client for GraphQL integration, and React i18n for internationalization. Install the necessary packages by running the following commands:

npm install zustand apollo-client react-i18next

Now that we have our project set up, it's important to establish version control. Create a new repository on GitHub and initialize it with the relevant Git commands:

git init
git add .
git commit -m "Initial commit"
git remote add origin [repository-url]
git push -u origin master

Lastly, to set the right mood for coding, it's always helpful to have an inspiring playlist🎶. Find your favorite coding playlist or discover a new one that keeps you focused and motivated.

Now that our foundation is in place, we are ready to move on to the next article, where we will explore creating routes using NextJS 13.

If you liked this article, please consider leave a like and a comment, we will really appreciate it. Stay tuned for the upcoming article and happy coding!

---NathLowe