How I built a Web Application in 2 days.
Tags: webdev, nextjs, tutorial, react
Published: 2022-01-23 13:24:39

This is my first attempt at building a real-life Frontend focused project named “Know Your Borders”.

![app logo](https://cdn.hashnode.com/res/hashnode/image/upload/v1642943760792/6pnoLTtb3.png)

> Visit the demo site —

> [https://saugaatallabadi-know-your-borders.vercel.app](https://saugaatallabadi-know-your-borders.vercel.app)

### 🤌 What is it?

Know Your Borders is a web application built using [NextJS](https://nextjs.org), which gives you a list of all countries in the world with some fields like -

*   Population
*   Area
*   Gini coefficient
*   Languages
*   Currencies
*   Neighboring countries

and much more…

![desktop-screenshot](https://cdn.hashnode.com/res/hashnode/image/upload/v1642943764634/KL5YGI67k.png)

### 🏗 How it’s made?

**Tech used:** HTML, CSS, JavaScript, NextJS Framework, REST APIs

Credit where it’s due, I noticed the project ‘world-ranks’ by @nghiemthu, and I knew this was a good starting point for me learning NextJS. So I decided to fork his repository and get started from there.

However, since that project was built a year ago, the APIs were outdated and some other issues had come up and I felt this might be a good opportunity for me to build off of an open-source project and enhance it.

That’s when I decided to rebrand it to **“Know Your Borders”**.

Know Your Borders is a two-page web application (responsive) with a list view of all countries and simple navigation to the detail page of each country.

![mobile-screenshot-with-dark-mode](https://cdn.hashnode.com/res/hashnode/image/upload/v1642943768125/nS6mjwHRe.png)

### 📖 Lessons Learned

This project acted as my introduction to front-end technologies, especially in NextJS.

This project taught me about:

*   Data sorting, filtering
*   Responsive Layout without any CSS framework
*   Dark/Light Mode
*   Server-side rendering
*   Deploying with Vercel

### 📸 Screenshots

Take a look at these couple screenshots from the app *(mocked) -*

![mobile-view-light-mode](https://cdn.hashnode.com/res/hashnode/image/upload/v1642943770681/gXIrZSoNB.jpeg)

![mocked-one](https://cdn.hashnode.com/res/hashnode/image/upload/v1642943772777/cdMipkdL4.jpeg)

![mocked-two](https://cdn.hashnode.com/res/hashnode/image/upload/v1642943774616/UHWyn1r2V2.jpeg)

### 📶 What’s Next?

No project is perfect. There’s always some optimization, some refactoring to do, and that certainly is the case with this project as well. Even though this application works as expected, we can certainly make it even better, faster, prettier.

If you feel the need to make it better, be my guest. Feel free to fork the repository and add your own flavor to it. After all, that’s what the open-source community is all about.

### 🏁 Getting Started

[https://github.com/saugaatallabadi/know-your-borders](https://github.com/saugaatallabadi/know-your-borders)

After you clone/fork the above repository from Github-

Install all node dependencies:

```
npm install
```

Then, run the development server:

```
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the homepage

and viola! 🪄

*Originally published at* [*https://www.saugaatallabadi.com*](https://www.saugaatallabadi.com/how-i-built-a-web-application-in-2-days/) *on January 23, 2022.*