# Introduction

Every software developer needs tools to make their work easier.

Today, I'm going to list five essential tools and technologies for every solo web developer. These tools are must-haves before starting to develop any type of application. 

If you have these tools in your arsenal, rest assured that your development process will be smooth as butter. 

Let's directly dive into it.

## 1. Visual Studio Code  
The top of our list is a code editor, *Visual Studio Code*, or VS Code. It's used for building and debugging web applications. 

> It has rich features that include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

The thing about VS Code is that it's so easy to use and very fast. It's absolutely free and runs on any platform, like Windows, Mac, and Linux.

Another reason I prefer VS Code is that it's super lightweight. According to their hardware requirements:

> Visual Studio Code is a small download (< 200 MB) and has a disk footprint of < 500 MB. VS Code is lightweight and should easily run on today's hardware. 
>    We recommend:
> - 1.6 GHz or faster processor
> - 1 GB of RAM

Even your potato laptop can run this code editor.

What's more, if you're not content with the built-in features inside VS Code, you can install plugins or extensions to enhance your development experience.

These are some extensions that I usually use: 
*(see image below)*  
![vs code extensions](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/vscode_extensions.PNG)  
I use `Live Server` to launch a local development server on my computer. Sometimes, I use `MobileView` so I can check how my website looks on mobile devices. Also, I use `Simple React Snippets` to help me code ReactJS faster. Finally, a `vscode-styled-components` to highlight the syntax of styled-components in ReactJS for easy code visualization. 

These extensions may seem unfamiliar to you at first, but don't worry; you'll get used to them after you use VS Code to build your applications.

You can download VS Code directly from this link: 
 [https://code.visualstudio.com/download](https://code.visualstudio.com/download).

## 2. Git
You must not develop any application without using this tool. Git is a version control system that lets you save any changes you make to your code. 

Git is your savior when you lose your code or program in an unexpected circumstance. It will save you a lot of headaches.

> All software development companies consider using Git to be an essential skill for modern web developers. 

**How to learn Git?**
1. Read Chapter 1.1 through 1.4 in [this book about version control](https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control) to familiarize yourself with Git.
2. Watch [this video](https://www.youtube.com/watch?v=2ReR1YJrNOM) to help you visualize the importance of Git.
2. If you haven't installed Git, check out [Chapter 1.5 Getting Started - Installing Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
3. Lastly, you need to configure Git to work properly on your computer and also so that you can link a local Git user (you) to Github. Follow this tutorial on [setting up Git](https://www.theodinproject.com/lessons/foundations-setting-up-git) from `The Odin Project` course to setup Git in your system.


## 3. Github
Github is a website where you can host Git.

Note that it's not the same as Git. When I was just a beginner, I was confused between these two, so I will save you a lot of pondering by telling you this now.

Github allows you to store and share your code with other software developers around the world.

I remember one time when my laptop broke, and the game I was developing at the time was only saved on that laptop.

If I were using Github at that time, I may have saved that game in an online repository and not worried about the broken laptop. It stinks, but that game will never be saved anymore. So don't commit the same mistake I did before and start using Github.

Github and Git are like the perfect duo. When used properly, they offer tremendous advantages in code management and collaboration among software developers.

If you still don't have an account, go to [github.com](https://github.com/) and create one now. Trust me, you will need it more than you can imagine.

My github profile is available at [https://github.com/naknamu](https://github.com/naknamu). In that account, you can view every open source project I've worked on in recent years.

### 4. Chrome Dev Tools

Chrome Dev Tools allows you to view and edit the written HTML, CSS, and JS code in a webpage in real time.

Note that you must use the Google Chrome browser to use this feature. To open the Chrome developer tool, just press `F12` on your keyboard. Alternatively, you can right-click your mouse and then choose `Inspect` to open it.

*It would look something like this: (see image below)*  
![Chrome DevTools](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/chrome_devtools.PNG)

Don't get intimidated by what you see from the inspector. It seems hard at first, but as you deal with it frequently, you will soon become familiar with the tools available there.

This tool will help you save a lot of time debugging your website. Especially if you have begun to deploy your website in the browser.

To get an overview, you can read the [official Chrome DevTools documentation](https://developer.chrome.com/docs/devtools/overview/).

## 5. NPM
Last but not least is [Node Package Manager, or NPM](https://www.npmjs.com/) This tool may seem unfamiliar to you at first, especially for beginner web developers. But trust me, this tool will help you a lot in your development journey.

**What is NPM?**  
[NPM](https://www.npmjs.com/) is the world's largest software registry. It's a standard package manager for JavaScript projects. Currently, it contains more than 2 million packages. 

**Why do I need NPM?**  
There's a saying, `Don't reinvent the wheel`. Whatever you plan to develop, someone may have already done it before. 

This is not meant to demoralize you. I just want to inform you so you can use libraries available in the NPM registry to make your apps better.

You can import different libraries from NPM and use them in your application to make your development faster. Try to browse NPM today, and you might be surprised that there is a library or package available to suit your needs as a developer.

For example, if I search for React packages, you can see a lot of libraries available that will help me develop in React. *(see image below)*

![npm sample search](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/npm_sample_search.png)

# Conclusion
To summarize, you can't build anything without using a code editor. So start by learning VS Code. After that, learn how to use Git so you can track and save whatever changes you make to your code.

Then, with Github, you can save your project in an online repository and not worry about losing your files even if your computer breaks. Then, when you deploy it to the browser, you can use Chrome DevTools to debug your code and inspect your written HTML and CSS.

Finally, you can add different libraries available in Node Package Manager (NPM) to further enhance the features of your application.

The tools listed above will help you a lot in your coding journey. Learn them one at a time. There is no need to rush. You will eventually get used to these tools as you go along your journey. *Good luck, and happy coding!*

5 Essential Tools for Solo Web Developers

## Introduction
The field of web development is constantly evolving, and it is crucial to stay updated with current trends and sharpen our minds to adapt to every possible change.

Being aware of the best learning resources available will greatly help you maintain relevant and competitive skills in today's age.

I have gathered the best learning resources to assist you in achieving your goal as a solo web developer.

## Self Learning Resources

### The Odin Project  

One of the best, if not the best online tutorial for web development is [The Odin Project (TOP)](https://www.theodinproject.com/). It's a free resource supported by a vibrant open-source community. 

Personally, I have learned almost everything about full stack development through their comprehensive course. Therefore, I can assure you that investing your time in learning through them is definitely worthwhile.

One of the great advantages of TOP is its self-paced nature. You have the flexibility to decide when to take the course. 

Additionally, TOP doesn't overwhelm you with all the information at once. You're encouraged to complete assignments independently and develop projects with minimal guidance. 

As a result, at the end of each course, you'll truly feel that you've learned how to build a website effectively.

### MDN Web Docs  

One of the most comprehensive and well-documented resources for web development is [MDN Web docs](https://developer.mozilla.org/en-US/docs/Learn). MDN's mission is clear and straightforward: 

> provide developers with the information they need to easily build projects on the open Web.

MDN Web Docs is an excellent resource for beginners in web development. 

They provide a wide range of tutorials, documentation, and examples on key web technologies such as HTML, CSS, and JavaScript. 

The content is regularly updated and covers both basic and advanced topics. The platform is user-friendly, offering clear explanations and interactive demos. 

Additionally, MDN Web Docs encourages community engagement to ensure that the information remains up-to-date and valuable.


So look no further and start learning with MDN Web docs.

### Dev.to 

It is beneficial to occasionally read technical articles and blogs written by fellow software developers to stay updated on the latest technological trends in web development.

This is where [dev.to](https://dev.to/) comes in. It is a platform where software developers can post blogs and articles about any topic in software development. You can create an account and start collaborating with other software developers around the world.

### The Net Ninja  

If you're the type of person who enjoys learning by watching videos online, then look no further. [The Net Ninja](https://www.youtube.com/@NetNinja) is one of the best teachers in web development out there. 

The way he explains web development topics is so understandable that even a five-year-old could easily grasp them. 

He has over 1000 free programming tutorials on YouTube. That's how awesome he is!

## Online Learning Platforms

There are numerous learning platforms available online that offer free tutorials, while others require a payment. Some popular examples include [Udemy](https://www.udemy.com/), [Coursera](https://www.coursera.org/), [Codecademy](https://www.codecademy.com/), and many more.

It is important to consider which platform best suits your needs and whether or not you are willing to invest money.

Personally, I prefer not to spend any money on these platforms, as there are already valuable courses available online that are essentially free. Plus, it's also because I'm broke. I tried counting my savings, but they were like unicorns - mythical creatures that exist only in stories and dreams!

### Benefits of Structured Courses and Guided Learning 

The courses offered on these platforms are carefully crafted to guide you from start to finish. 

They are structured in a way that ensures you won't feel lost while learning about different topics in web development. These courses take into consideration your learning needs and provide the necessary prerequisites before diving into each new topic.

For example, you can't learn [React](https://react.dev/) without having a foundation in JavaScript. Similarly, before utilizing frameworks like Bootstrap and Tailwind, it's essential to study CSS first.


Attempting to learn advanced topics in web development without first establishing a strong foundation can be a recipe for disaster. It's crucial to avoid making such a mistake, especially when you are just starting out.

## Essential Topics for Solo Web Development 

### A. Web development fundamentals  

What are the most important fundamentals that you must learn first before diving into other topics in web development? 

The three foundational pillars of web development are **HTML**, **CSS** and **JavaScript**.

If you can master these three foundational pillars, let me tell you this: you can learn and accomplish anything you want in web development.

### B. Front-end frameworks  

To make the development of websites faster, easier, and more structured, frameworks were invented. These frameworks provide a set of pre-built tools, libraries, and components that streamline the web development process. 

They offer standardized patterns and conventions, allowing developers to focus on building the application logic rather than reinventing the wheel.

Among the most popular front-end frameworks are React, Angular, and Vue.js. 

[React](https://react.dev/) is a JavaScript library developed by Facebook that enables the creation of interactive user interfaces. 

[Angular](https://angular.io/), developed by Google, is a full-featured framework that offers a comprehensive set of features for building large-scale applications. 

[Vue.js](https://vuejs.org/) is a lightweight and versatile framework known for its simplicity and ease of integration.

Using these frameworks can significantly speed up the development process, improve code organization, and enhance maintainability. 

Just so you know, I developed this website using React.

### C. Back-end development

What happens on the server side is something that only those who have learned back-end development truly understand.

Learning backend development is a matter of personal preference. If you choose to focus on frontend development and search for a job in that area, it's perfectly acceptable.

But if you aspire to become a full stack developer and master web development as a whole, it is crucial to learn the languages and frameworks used on the server side.

There are various paths to choose from in the backend. For instance, if you have an affinity for JavaScript and prefer the JS path, learning Node.js and Express would undoubtedly be beneficial.

But if you don't have a preference for JavaScript and would like to explore other languages, you can consider learning Ruby and Ruby on Rails. 

Additionally, there are several other backend languages to choose from, including Python, C#, Java, and PHP.

### D. Database Management

To make the data stored in a website persistent, databases are used. It's remarkable how you can store almost any type of data in a database and retrieve it in your website whenever needed. 

Personally, that's one of the motivations behind my decision to learn database management. I wanted the ability to store any data I want and retrieve the data I need.

Some of the popular and commonly used databases include MySQL, MongoDB, and Firebase.

[MySQL](https://www.mysql.com/) is a widely used open-source database system for managing and organizing data in web applications. It allows you to store, retrieve, and manipulate data using a structured query language (SQL).

[MongoDB](https://www.mongodb.com/) is a flexible and scalable database that can store different types of data. It works well for handling large amounts of data and can grow with your needs.

[Firebase](https://firebase.google.com/) is a platform that provides various backend services, including a real-time database. It's useful for quickly building web and mobile applications that need instant data updates and synchronization.

These databases each have their strengths and can be chosen based on your project's specific needs.

I have used MongoDB and Firebase in some of my web applications, and I can assure you that they may seem challenging and intimidating at first. However, with consistent practice and hands-on experience, they become easier to use. So, don't hesitate to give them a try and explore their capabilities.

### E. User Experience (UX) design principles

If you want to publish your website to the world, then it is important to take into consideration the User Experience (UX) of your application. 

You should think about how users will respond to your website. Is it easy to use and navigate? Will users be able to understand the purpose and functionality of your website with just a quick glance?

A well-designed user experience focuses on creating a seamless and intuitive interaction between users and your website. It involves elements such as clear navigation, intuitive user interface (UI), informative content, and effective visual design. 

By prioritizing UX, you can ensure that visitors to your website will have a positive experience and find it easy to accomplish their goals.

Consider incorporating user-friendly features like easy-to-understand menus, prominent calls-to-action and logical information hierarchy. 

Conducting user testing and gathering feedback can also provide valuable insights into improving the user experience.

Remember, a great user experience encourages visitors to stay on your website, explore its offerings, and potentially become returning users or customers. 

So, investing time and effort into optimizing the user experience of your website is well worth it.

### F. Responsive Web design

There are a lot more mobile phone users today compared to previous years. Many prefer browsing websites on their tablets, while some still use desktop computers or laptops.

That's why it is crucial to consider how your website appears on different devices.

The design of your website may vary between desktop and mobile devices. While it may look good on a desktop, it can appear distorted and unreadable when viewed on a mobile device.

Ensure that your website is responsive, allowing users to access and navigate it seamlessly regardless of the device they prefer to use.

## Supplementing Learning with Practical Projects

### Importance of hands-on practice

Merely watching tutorials is not enough to become proficient in coding. It's essential to actively engage in practical exercises and projects to apply what you have learned. 

By practicing coding on your own, you'll develop a deeper understanding of the concepts and be able to confidently write code without relying heavily on tutorials.

A lot of beginners make the mistake of watching videos about coding in web development without actually practicing it.

There is a significant difference between watching someone code and actually doing it yourself. 

When you watch a video on YouTube, it may give you a false sense of understanding, making you feel like you know how to do it.

 However, the true understanding and proficiency come from actively practicing and implementing the concepts on your own.

So open that code editor and practice!

### Building Personal Projects

To apply newly acquired knowledge from tutorials, it is best to build a personal project. 

If you want to apply the HTML and CSS skills you've learned, why not create a simple food recipe website? Everyone loves food, and it can be a fun way to showcase your newly acquired knowledge.

If you're looking to practice your JavaScript skills, consider building a to-do list app or even a rock, paper, and scissors game. These projects will allow you to apply JavaScript concepts and logic, and they can be great exercises to sharpen your coding abilities.

If you search the internet, you'll find a plethora of personal project ideas suited for beginners. Exploring these ideas can guide you in choosing a project that aligns with your interests and learning goals. 

So, don't hesitate to explore the vast array of options out there!

## Conclusion

Continuous learning is essential for solo web developers to stay updated with new technologies, frameworks, and best practices that emerge regularly.

It is crucial to know what learning resources are best suited to your own needs and preferences to make learning web development easier and more fun!

I hope that my listing of the best learning resources above has been of great assistance in your solo development journey. 

*If you have any questions or feedback, feel free to comment below. Happy coding!*

The Best Learning Resources for Solo Web Developers

# Introduction

A portfolio is where you present your projects, skills, and a brief introduction about yourself in an engaging and simple way using various web development technologies.

Building your own personal portfolio can be both enjoyable and challenging. It serves as a valuable opportunity to not only test your web development skills but also to attract potential employers or clients.

Choosing the appropriate tools to construct your personal portfolio is crucial to align with your intended goals of showcasing your work.

In this blog, I will share my personal experience and provide guidance on how I built my personal portfolio from scratch using HTML, CSS and vanilla JavaScript.

**Why not used frameworks or libraries like ReactJS?**

I didn't use frameworks like ReactJS or Bootstrap because I didn't want this project to be bloated with unnecessary libraries and components that I wouldn't use.

## Defining the Requirements

**What are the necessary requirements in a personal portfolio?**

A complete portfolio should include sections such as an `about me` section, a showcase of your `projects`, `contact information`, and a display of your `skills`.

Before you start developing, it is important to carefully plan how are you going to present these requirements to your audiences.

Here's a piece of advice: Your portfolio should have a personal touch and reflect your unique taste and style.

In short, your portfolio should define who you are in a single webpage.

## Setting Up the Development Environment

At this point, I assume you are already familiar with using Git, Github, and a code editor like Visual Studio Code. These are the tools that we will be using to set up our development environment.

**Step 1.** Create a `new Github repository` and name it anything you want. I named mine "my-portfolio".

![new-github-repo](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/github_repo.webp)

**Step 2.** Copy the `SSH` code generated to clone the repository in your local computer.

![copy-github-ssh](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_ssh.webp)

**Step 3.** Clone the repository in your computer using `git clone [SSH CODE HERE]`

![git-clone-the-repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/git_clone.webp)

**Step 4.** Open the cloned repository in your computer using the code editor of your choice. I used VS Code. I just type `code .` in the command line and it will open. *Awesome!*

![initial-project-look](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/vscode_project_initial.PNG)

Note that the project only contains the `README.md` file that we created in Github earlier.

##  Designing the Layout

Before we delve into coding, it is essential to design the layout of your portfolio.

When users visit a website, the initial impression they receive is its visual appearance. That is why prioritizing the visual appeal of your personal portfolio is crucial.

Thankfully, numerous online tools are available to assist you in designing the visual aspects of your portfolio. However, before resorting to those tools, it's important not to overlook the classic approach to design – using pen and paper.

Visualize how you want your portfolio to look by using pen and paper. This is where your creativity comes into play. Write down and sketch every design idea you have. Let your imagination run wild!

After you have documented your ideas, let's use a popular design tool called [Figma](https://www.figma.com/) to transform your imagination into reality!

I personally utilized Figma to design the layout of my personal portfolio. It is incredibly user-friendly and straightforward to use. Here is an example of how my initial design appeared in Figma:

![my-figma-portfolio-design](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/figma_design.webp)

Please note that I developed this portfolio website with a mobile-first design approach in mind. This means that I prioritized how it would appear on mobile devices before incorporating styles suitable for larger screen devices such as tablets and desktops.

You can directly view the design in Figma by clicking on the following link: [my-figma-portfolio-design](https://www.figma.com/community/file/1248105114067528955).

## Implementing the Structure with HTML

Ready your gears, as we will now officially dive into coding!

We will use HTML to build the basic structure of our portfolio. Using HTML, we will create the header, project, skill, and contact sections.

**Quick tip:**
You can install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension in VS Code so you don't have to refresh the webpage everytime you commit changes.

### Header
Create the header section where the navigation section resides.

I used a completely open-source library, [Ionicons](https://ionic.io/ionicons) to create icons in the header like: 

`burger menu` 

```html
<ion-icon name="menu-outline"></ion-icon>
```

and `close` symbols.

```html
<ion-icon name="close-outline"></ion-icon>
```

**How to use Ionicons?**

> Place the following `<script>` near the end of your page, right before the closing `</body>` tag, to enable them.

```html
    
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
```

As an alternative, you can use [Google Material Icons](https://fonts.google.com/icons) for free  in your project.

### Hero Section

The hero section is one of the most crucial parts of your personal portfolio. It is the first thing that users see when they visit your site, so it should grab their attention and be visually appealing.

In my approach, I prioritize simplicity by incorporating a picture of myself along with a brief description of what I do.

### Projects

The projects showcased in my portfolio are ones that I have built throughout the past year. I intentionally excluded exercises from coding tutorials, such as calculators, tic-tac-toe games, and to-do lists, as they are not considered necessary.

It is recommended to include projects that you have deployed in production, allowing other users to view and interact with them.

In my portfolio, I feature a game that I developed and published on Steam, along with various websites built using React frameworks and other web technologies.

### Skill

I included skills such as programming languages that I have acquired while developing websites and games.

You should add yours and **be honest** about it. 

If you are not comfortable or proficient in a specific technology or programming language, it is best to refrain from including it or else it might bite you in the future.

Only include tools or technologies that you are knowledgeable about and have previous experience building with.

### Contact Information and Form

How can clients or potential employers reach out to you if you don't have contact details in your portfolio? 

Don't forget to include your email. If you're not comfortable putting your contact number, then it's alright not to put it.

Additionally, if you wish to incorporate a form on your portfolio where clients or potential employers can message you directly, you can utilize [Formspree](https://formspree.io/). By binding Formspree with your email address, you can conveniently receive and view the messages sent through the form.

**How to use Formspree with your HTML form?**

Just set your form’s action to their endpoint and that's it. This is how it looks on my form:

```html
<form
  action="https://formspree.io/f/xjvdrvak"
  method="POST"
  class="contact-form"
>
```

Obviously, you need to create an account with them to use their API. It's free, so don't worry.

### About Me

What is a portfolio without an *about me* section? This is where you describe details about yourself, like hobbies, interests, and things outside of your professional work.

Make it personal and relevant to you, so others won't misunderstand you as an AI or something.🤣

## Styling with CSS

Adding visual effects and colors using CSS is crucial, as this will amaze visitors to your website.

To style my portfolio, I used **custom properties or CSS variables** which I added at the `:root` of my `style.css` file.  
 
Some of these are shown below:

```css
:root {
  /*colors*/
  --sea-blue: hsl(197, 100%, 29%);
  --pine-green: hsl(175, 98%, 24%);

  color-scheme: light dark; /* both supported */

  /*typography*/
  --ff-oleo: "Oleo Script Swash Caps", cursive;
  --ff-poppins: "Poppins", sans-serif;

  /**box shadow*/
  --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
  --shadow-2: 0 4px 28px hsla(216, 14%, 14%, 0.07);
}
```

CSS variables are very helpful in writing your CSS styles. 

For instance, it allow a value to be stored in one place, then referenced in multiple other places.

I can access the variable `--sea-blue` written at the `:root` like so:

```css
.buttonColor {
    color: var(--sea-blue);
}
```

Also, the other benefit of custom properties is that they can serve as a semantic identifier. It is easier to understand `--sea-blue` than `hsl(197, 100%, 29%),` isn't it?

## Adding Interactivity with JavaScript

JavaScript can make your portfolio engaging and interactive. By adding scroll reveal effects and button click functions, it can increase the user experience.

By using the following script, you can achieve a scroll effect on the header section specifically for mobile devices.

```js
/**
 * HEADER
 * active header when window scroll down to 100px
 */

const header = document.querySelector("[data-header]");

window.addEventListener("scroll", function () {
  if (window.scrollY > 100) {
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
});
```

See the header showing up when I scroll down to 100px.

![header-scroll-effect](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/portfolio_header.gif)

Also, I have this scroll reveal effect using the code below.

```JS
/**
 * Scroll Reveal
 *
 */

const revealElements = document.querySelectorAll("[data-reveal]");
const revealDelayElements = document.querySelectorAll("[data-reveal-delay]");

const reveal = function () {
  for (let i = 0, len = revealElements.length; i < len; i++) {
    if (revealElements[i].getBoundingClientRect().top < window.innerHeight) {
      revealElements[i].classList.add("revealed");
    }
  }
};

for (let i = 0, len = revealDelayElements.length; i < len; i++) {
  revealDelayElements[i].style.transitionDelay =
    revealDelayElements[i].dataset.revealDelay;
}

window.addEventListener("scroll", reveal);
window.addEventListener("load", reveal);

```

This is triggered when the website first load and when the user scroll down.

![scroll-reveal-effect](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/scroll_reveal_effects.gif)

You can copy the code above and test it on your portfolio website. Don't forget to git commit and push your changes to your main repository on Github!

## Deploying the Portfolio

After putting everything up, it's time to deploy the website on a hosting platform. There are many hosts out there, but the best and free I've seen so far is Github Pages.

To deploy your website in Github Pages is fairly easy. Just go to the `Settings` tab of your repository.

![github repository settings](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_settings.PNG)

Click `Pages` 

![github pages](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_pages.PNG)

From the dropdown menu, select `main` branch and then press `Save`

![github main branch](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_main_branch.png)

Wait for a little while, refresh the current page, and you'll see your new website deployed. Congratulations! 🎉

![github pages live deployed](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/my_portfolio/github_pages_live.png)

**Quick tip:** You can also create your own custom domain name with Github Pages.

You can check the live demo and code repository of the complete portfolio website below:

Live Demo: [https://www.naknamu.com/](https://www.naknamu.com/)   
Github Repository: [source code](https://github.com/naknamu/humble-portfolio)

# Conclusion

Developing your own portfolio website takes a lot of effort, but it's all worth it in the end when you see the final result.

Using HTML, CSS, and JS makes creating the portfolio simple and not bloated with unnecessary features from other frameworks. Also, the performance and loading of your website are quite fast. So it's a good decision to just use these three technologies when thinking of developing your own portfolio.

That's all, folks! Thank you for reading, and I hope you learned something new in this article!👋

Step-by-Step Guide: Building and Deploying My Personal Portfolio with HTML, CSS, and Vanilla JS on Github Pages

Choosing the right web development framework is very important in order to achieve your ultimate goal of driving high traffic and revenue to your website.

That is why, after days of battling with my inner thoughts and pushing myself to code, I finally decided that it's time to switch this blogging website from React to NextJS.

In this blog, I will list the reasons why you should use NextJS instead of React for your blogging website.

## 1. NextJS provides better SEO performance than React.

For a blog website to gain high traffic, it must be configured properly for Search Engine Optimization (SEO).

NextJS is the perfect tool for this job because of the feature it offers, which is Server Side Rendering (SSR).

SSR is the type of rendering where the web pages are generated on the server. It allows search engine crawlers and bots to scan and index web pages faster.

This means that a website built on NextJS has a higher chance of ranking high in Google than a website built on React.

## 2. NextJS has faster loading times compared to React.

When a user visits a website built on NextJS, it will display a fully rendered HTML page instantly.

On the other hand, for ReactJS, it will take some time before the webpage is rendered, which negatively affects the User Experience (UX).

Check out the images below for the performance test of `solodevhub.com`, this website, from Google Lighthouse.

### Using ReactJS (Before)

![reactjs lighthouse performance](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/nextvsreact/solodevhub_lighthouse_performance_poor.webp)  

### Using NextJS (After)

![nextjs lighthouse performance](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/nextvsreact/solodevhub_nextjs_lighthouse.webp)  

As you can see, there is a significant improvement in the performance of this website, with the score increasing from 57 to 95 after transitioning to NextJS.

One of the reasons behind this enhancement is that NextJS excels in rendering the First Contentful Paint (FCP) at a faster rate than React, which tends to take longer in this aspect.

This is very important, especially for those who are new to your site. When a user encounters a blank page and experiences longer loading times, they are likely to leave immediately.

This will result in lower traffic on your blogging website.

## 3. Increase Image Optimization using NextJS compared to React.

NextJS has a built-in image component `<Image />`, which you can use in your application to enhance the loading time and performance of images.

I think this is really cool because you don't have to find and install libraries in your app, as it's already provided by NextJS.

I have used and tested this image component from NextJS, and it really loads faster compared to the HTML `<img>` element that we usually use.

These are the features of using `<Image />` from NextJS:

- **Size Optimization:** Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.

- **Visual Stability**: Prevent layout shift automatically when images are loading.

- **Faster Page Loads**: Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.

- **Asset Flexibility**: On-demand image resizing, even for images stored on remote servers

## 4. You can use `styled-components` with NextJS, just like React.

Before making the final switch to NextJS, I ensured that I could continue utilizing my preferred styling library, which is styled-components.

The advantage of using styled-components is that it allows me to effortlessly manage the styling of components within my application.

Thankfully, NextJS offers support for various styling libraries, including styled-components thus eliminating any concerns I had in this regard.

## Should I learn NextJS instead of ReactJS?

Learning ReactJS was never a mistake because in order to build applications using NextJS, you must know how to use React first.

Since I've built applications using ReactJS before, it took me about a week to learn, convert, and deploy this website into NextJS completely.

If you want to learn NextJS easily, I recommend learning with [The Net Ninja on YouTube](https://www.youtube.com/watch?v=A63UxsQsEbU&list=PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw).

## Conclusion

React was a bad choice for building a blogging website as it is not optimized for SEO, unlike NextJS.

So before you build your website, think of the main features of the framework you're going to build with to save yourself the trouble of converting your website from one framework to another.

That's it! I hope I have convinced you enough to use NextJS instead of React for your upcoming blogging website. 😉

Why I Switched my Blogging Website from React to NextJS

Building a project is a must for any beginner web developer to polish their skills and solidify their learning from watching and reading tutorials.

That is why I have gathered and listed the ten perfect basic projects that would greatly help solo developers practice their web development skills.

Without any particular order, you can choose which project to build depending on your current skill level.

## Table of Contents
1. [Calculator](#calculator)
2. [Landing Page](#landing)
3. [Restaurant Page](#restaurant)
4. [Todo List](#todo)
5. [Rock, Paper, and Scissors](#rps)
6. [Sign-up Form](#signup)
7. [Admin Dashboard](#admin)
8. [Tic Tac Toe](#tictactoe)
9. [Library](#library)
10. [Weather App](#weather)

## 1. Calculator <a name="calculator"></a>

![calculator](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/calculator.webp)

This is a good project if you want to learn how to combine JavaScript, HTML, and CSS into one single project.

You will use basic HTML to create the buttons for each digit from 0 to 9, the basic Math operators `+, -, x, /` , and the equal `=` sign.

Anyway, you can add another button, like a clear sign `<-` or a decimal point `.`. Also, don't forget to have a display for the output of what you entered in the calculator.

The CSS will determine the look and colors of your calculator. Finally, you will use JavaScript to perform the basic Math operators for each of the buttons you have added.

If you want some inspiration, you can check out the calculator that I have created below. It's quite simple, but it gets the job done, so it's good.

**Live Demo:** [Calculator](https://naknamu.github.io/calculator/)  
**Source Code:** [https://github.com/naknamu/calculator](https://github.com/naknamu/calculator)


## 2. Landing Page <a name="landing"></a>

![landing page](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/landing.webp)

A landing page is the page you see after you click a link on the internet. Did that make sense?

For instance, when you click on a certain product that you want to buy, the webpage that will be displayed to you will be the landing page.

Basically, if you want someone to buy, subscribe, or take some action, you want them to go to your landing page, and this is what you are going to create.

You can create any landing page for what you want, like the landing page of a game (what I've done), a book, shoes, clothes, food—anything is possible.

A landing page is a good place to practice your CSS skills. The way you arrange the layout of each card or component will depend on your CSS flexbox or grid knowledge.

You can check out the landing page I have created below for reference. Note that it is not yet mobile-responsive, as this is not yet needed in this project. Though you can add that functionality if you want.

**Live Demo:** [Landing Page](https://naknamu.github.io/landing-page/)  
**Source Code:** [https://naknamu.github.io/landing-page/](https://github.com/naknamu/landing-page)

## 3. Restaurant Page <a name="restaurant"></a>

![Restaurant page](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/restaurant.webp)

Do you know that it is possible to build the entire content of a webpage using only JavaScript?

This is achieved by manipulating the DOM elements. Developing a restaurant page is a good exercise for this, as each page's content can be dynamically created by JavaScript functions.

For example, when the user visits the home page, JavaScript would add the content for that. Then, when the user clicks another tab, like the about page, JavaScript would be able to populate the details about the restaurant. Awesome!

Though it all depends on you and how you want to tackle developing a restaurant page.

For inspiration, check out the project below:  

**Live Demo:** [Restaurant Page](https://eckben.github.io/bearysBreakfastBar/)  
**Source Code:** [Github repo](https://github.com/EckBen/bearysBreakfastBar)

## 4. Todo List <a name="todo"></a>

![todo list page](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/todolist.webp)

A to-do list is a project that is usually required or given to beginner web developers to practice their web development knowledge.

A lot of tutorials show how to build a to-do list app to teach beginners basic JavaScript.

That is why if you are able to complete a to-do list app, then you have made huge progress in your learning.

There are many ways to create a to-do list application, depending on the features that you want to add.

For inspiration, check out the to-do list app I have created.

**Live Demo:** [mytodolist](https://naknamu.github.io/mytodos/)  

Check out also the following great todo apps deployed on the internet.

1. [Todoist](https://todoist.com/)
2. [Things](Uhttps://culturedcode.com/things/)
3. [any.do](https://www.any.do/)

## 5. Rock, Paper, and Scissors <a name="rps"></a>

![rock paper scissor application](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/rock-paper-scissors.webp)

Developing a game in a browser is quite fun. That is why, if you want to test your web development knowledge, then the rock, paper, scissors game is the perfect project.

You will create two players, one for the human and the other for the computer, or AI. Building the look or UI of this app will all depend on you. The important factor here is that you should be able to implement the mechanics of the game using HTML, CSS, and JavaScript.

For inspiration, check out this awesome live demo.

[Rock, Paper, and Scissor Game](https://lookingcoolonavespa.github.io/rock-paper-scissors/)

## 6. Sign-up Form <a name="signup"></a>

![signup form](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/signup-form.webp)

A lot of websites utilize a sign-up form to enable users to register for their services and also gain user information.

Knowing how to make a sign-up form is a must for any web developer.

To create a sign-up form, you use HTML for the input fields and labels. Then, you add CSS to make it look appealing to the users. Finally, you use JavaScript to add user validation and check for user input errors. Although input validation can also be achieved by adding HTML attributes like `required`.

Play around with the simple registration form that I have made below.

**Live Demo:** [Signup Form](https://naknamu.github.io/browser_form/)  
**Source Code:** [Github repo](https://github.com/naknamu/browser_form)

## 7. Admin Dashboard <a name="admin"></a>

![admin dashboard](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/dashboard.webp)

An admin dashboard is a good practice for using CSS grids. Depending on which you're most comfortable with, you can also use a CSS flexbox or both.

Anyway, an admin dashboard is for those who have intermediate knowledge of HTML and CSS, so a beginner might have a hard time doing this project.

Check out a live demo of a dummy admin dashboard below.

**Live Demo:** [Admin Dashboard](https://naknamu.github.io/admin-dashboard/)  
**Source Code:** [Github repo](https://github.com/naknamu/admin-dashboard)


## 8. Tic Tac Toe <a name="tictactoe"></a>

![tictactoe](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/tictactoe.webp)

Everyone is familiar with the game of tic-tac-toe. Building it in the browser using only HTML, CSS, and JavaScript is absolutely fun and challenging.

You can make a tic-tac-toe game for two players, both of whom are humans, or you can add an AI or computer player to challenge yourself even further.

Play around with the tic-tac-toe game I have developed below to gain some inspiration.

**Live Demo:** [Tic Tac Toe](https://naknamu.github.io/tictactoe/)  
**Source Code:**  [Github repo](https://github.com/naknamu/tictactoe)


## 9. Library <a name="library"></a>

![library](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/library.webp)

If you love reading books, then you would probably enjoy building a library. 

To build this project, you will need to create an HTML form for the book's details. Then use CSS to make the appearance of your library appealing and organized. Finally, you will use Javascript to store each book's details, for example, in the [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Or if you're a pro, use a backend service like [Firebase](https://firebase.google.com/).

Check out the simple library I have created in the live demo below.

**Live Demo:** [Library](https://naknamu.github.io/my-library/)  
Source Code: [Github Repo](https://github.com/naknamu/my-library)


## 10. Weather App <a name="weather"></a>

![Weather app](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub/ten-projects-web-developer/weatherapp.webp)

Developing a weather application is a good exercise when you want to know how to use an Application Programming Interface, or API. 

Using an API in JavaScript is fairly easy. You just use the `fetch()` function to fetch data asynchronously across the internet.

You can use [openweathermap.org](https://openweathermap.org/) to fetch weather data around the world for free.

Check out the weather app I have built below.

**Live Demo:** [Weather App](https://naknamu.github.io/WeatherApp/)  
**Source Code:** [Github repo](https://github.com/naknamu/WeatherApp)

## Conclusion

These ten basic projects are good exercises for you to gain mastery of web development.

Take your time to complete these projects; don't rush them. Remember that these projects are just learning exercises for you so you can completely grasp developing web applications.

Hopefully, you will be able to build these projects, gain valuable skills as a solo web developer, and achieve your goals. Cheers!

10 Basic Projects to Build for Solo Web Developers

I am developing a new website, [Alisa](https://www.alisa.pics), using the new NextJS 14 app router. To supercharge the development of Alisa, I utilized 11 awesome free packages. 

They are listed in any order, so feel free to check out these packages to make your NextJS 14 website extraordinary.

## 1. [nextjs-toploader](https://www.npmjs.com/package/nextjs-toploader)

Have you ever clicked a link in a website and waited for a few seconds before the page loads?

In NextJS 14, dynamic rendering using server components is frequently utilized so the fetching of data from the server takes some time.

To overcome the waiting process of the user, you can use `nextjs-toploader` to create a loading bar component anywhere on your site.

Install `nextjs-toploader` in your website.

```
npm install nextjs-toploader
```

Import `NextTopLoader` in your `app/layout.js`.

```js
import NextTopLoader from 'nextjs-toploader';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}
```

And voilà, you have now a working loading bar in your website. 🙌

You can customize the appearance of your `nextjs-toploader` depending on your taste. For my website, Alisa, I did something like this:

```js
<NextTopLoader showSpinner={false} color="#8a2be2"/>
```

## 2. [react-hot-toast](https://www.npmjs.com/package/react-hot-toast)

A form submission, a successful login, an upload finished etc., are not complete without some kind of a toast or notification to confirm a successful action.

`react-hot-toast` offers an intuitive solution to create a toast anywhere on your app.

Start by installing it in your website.

```
npm install react-hot-toast
```

Then, on your `app/layout.js`, import the `Toaster`.

```js
import { Toaster } from "react-hot-toast";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Toaster position="bottom-center" />
        {children}
      </body>
    </html>
  );
}
```
Now, you can trigger it by importing `toast` anywhere in your app.

```js
import toast from "react-hot-toast";

toast.success("Comment added.");
```

## 3. [cookies-next](https://www.npmjs.com/package/cookies-next)

Have you ever wondered how you can store crucial information that you can readily get or set directly inside your application without fetching the server API?

Then, you're looking for cookies!

`cookies-next` lets you get, set and remove cookies in your NextJS 14 applications.

Let's first install `cookies-next`.

```
npm i cookies-next
```

Then, in your `client component`, you can use the following functions.

```js
'use client'
import { getCookies, setCookie, deleteCookie, getCookie } from 'cookies-next';

getCookies();
getCookie('key');
setCookie('key', 'value');
deleteCookie('key');
```

Note that you can only read cookies in `server components` using the cookies function from `next/headers` like so:

```js
import { setCookie, getCookie, getCookies, deleteCookie, hasCookie } from 'cookies-next';
import { cookies } from 'next/headers';

 // It's not possible to update the cookie in RSC
 ❌ setCookie("test", "value", { cookies }); 👉🏻// Won't work.
 ❌ deleteCookie('test1', { cookies }); 👉🏻// Won't work.
  
 ✔️ getCookie('test1', { cookies });
 ✔️ getCookies({ cookies });
 ✔️ hasCookie('test1', { cookies });
```

For `server actions`, you can read/update the cookies, like so:

```js
'use server';

import { cookies } from 'next/headers';
import { setCookie, deleteCookie, hasCookie, getCookie, getCookies } from 'cookies-next';

export async function testAction() {
  setCookie('test', 'value', { cookies });
  getCookie('test', { cookies });
  getCookies({ cookies });
  hasCookie('test', { cookies });
  deleteCookie('test', { cookies });
}
```
Caution! 
Do not store confidential information in your cookies like API keys to prevent malicious attacks from bad users.

## 4. [react-loader-spinner](https://www.npmjs.com/package/react-loader-spinner)

Having a cool loader or spinner while the data is fetching from the server makes your website extraordinary.

`react-loader-spinner` offers 30+ spinners that you can utilize in your application to make it more appealing to your users.

Start by installing `react-loader-spinner`.

```
npm i react-loader-spinner
```

Then, create a component that you can import anywhere in your app, like so:

```js
import { Oval } from "react-loader-spinner";

export default function LoaderUI() {
  return (
    <Oval
      visible={true}
      height="30"
      width="30"
      color="#8a2be2"
      secondaryColor="8a2be2"
      ariaLabel="oval-loading"
      wrapperStyle={{}}
      wrapperClass=""
    />
  );
}
```

There you go! You now have a working loader/spinner that your users will surely loved.

## 5. [react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)

Have you look at some applications like facebook and youtube and wonder how they create a loading skeleton of the data while they are being fetched from the server?

Don't worry, `react-loading-skeleton` to the rescue! 🦸‍♂️

Now, you can also create your own beautiful, animated loading skeletons straight to your application.

Let's install `react-loading-skeleton`.

```
npm i react-loading-skeleton
```

Create a component so you can easily use it everywhere in your app, like so:

```js
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";

export default function SkeletonLoader() {
  return (
    <SkeletonTheme highlightColor="#E8DAEF" height="300px">
      <p>
        <Skeleton />
      </p>
    </SkeletonTheme>
  );
}
```

Note that you can also change the `highlightColor` and `height` in the `SkeletonTheme` depending on your needs.

## 6. [@knocklabs/react](https://www.npmjs.com/package/@knocklabs/react) and [@knocklabs/node](https://www.npmjs.com/package/@knocklabs/node)

A notification system is very much needed when you want users to stay updated with the current happenings in your application.

But, how can you create a very complex notification system without the need to study for weeks on its implementation or hire developers to do it for you?

Well, just [knock](https://knock.app/) and a door will open for you. *(pun intended)* 😉

Using a package `@knocklabs/react`, you can readily integrate `knock` straight in you NextJS 14 application.

Start by installing `@knocklabs/react`.

```
npm i @knocklabs/react
```

Then, create component `Notification`, like so:

```js
import {
  KnockProvider,
  KnockFeedProvider,
  NotificationIconButton,
  NotificationFeedPopover,
} from "@knocklabs/react";

// Required CSS import, unless you're overriding the styling
import "@knocklabs/react/dist/index.css";

export default function Notification() {
  const [isVisible, setIsVisible] = useState(false);
  const notifButtonRef = useRef(null);

  return (
    <KnockProvider apiKey={process.env.KNOCK_PUBLIC_API_KEY} userId={userId}>
      <KnockFeedProvider feedId={process.env.KNOCK_FEED_ID}>
        <div>
          <NotificationIconButton
            ref={notifButtonRef}
            onClick={(e) => setIsVisible(!isVisible)}
          />
          <NotificationFeedPopover
            buttonRef={notifButtonRef}
            isVisible={isVisible}
            onClose={() => setIsVisible(false)}
          />
        </div>
      </KnockFeedProvider>
    </KnockProvider>
  );
};
```
You can import this `Notification` component anywhere in your app. For Alisa, I imported it in navigation bar.

Let's say you want to notify a user when their uploaded image was loved by another user.

Install `@knocklabs/node`.

```
npm i @knocklabs/node
```

In your `server actions` file, import `Knock`, like so:

```js
"use server";

import { Knock } from "@knocklabs/node";
const knockClient = new Knock(process.env.KNOCK_SECRET_API_KEY);

// NOTIFY USER WHEN THEIR IMAGE IS LOVED
export async function notifyLove(image, actor) {
  await knockClient.notify("love", {
    recipients: [image.uploader.slug],
    actor: actor,
    data: {
      image: {
        caption: image.caption,
        slug: image.slug,
      },
    },
  });
}
```

To know more on how to integrate `knock` in your application, checkout their very detailed [documention](https://docs.knock.app/).

## 7. [backblaze-b2](https://www.npmjs.com/package/backblaze-b2)

Have you ever wondered how you can integrate the awesome [Backblaze B2 Cloud Storage](https://www.backblaze.com/cloud-storage) service in your NextJS 14 application?

Well, `backblaze-b2` package is there for you.

Let's say you want to upload an image directly from your NextJS 14 website into a public bucket in B2 cloud storage.

First, install `backblaze-b2` package.

```
npm i backblaze-b2
```

Now, create an API route handler to process an image upload request, like so:

From `app/api/upload/route.js`:

```js
import B2 from "backblaze-b2";

export async function POST(request) {
  const formData = await request.formData();
  const file = formData.get("file");
  const fileName = formData.get("x-filename");

  // Convert to buffer data to enable upload to Backblaze B2
  const arrayBuffer = await file.arrayBuffer();
  const buffer = new Uint8Array(arrayBuffer);

  const b2 = new B2({
    applicationKeyId: process.env.BACKBLAZE_KEY_ID,
    applicationKey: process.env.BACKBLAZE_APP_KEY,
  });

  // b2 auth tokens are valid for 24 hours
  // .authorize returns the download url,
  // .getUploadUrl returns the upload url and auth token
  const { data: authData } = await b2.authorize();
  const { data: uploadData } = await b2.getUploadUrl({
    bucketId: process.env.BACKBLAZE_BUCKET_ID,
  });

  const { data } = await b2.uploadFile({
    uploadUrl: uploadData.uploadUrl,
    uploadAuthToken: uploadData.authorizationToken,
    data: buffer,
    // there are no real directories in b2, if you want to place
    // your file in a folder structure, do so with slashes. ex:
    //   fileName: `my-subfolder/uploads/${fileName}`
    fileName: `images/uploads/${fileName}`,
  });

  // Return image url from Blackblaze b2
  return Response.json({
    status: 200,
    url: `https://f005.backblazeb2.com/b2api/v1/b2_download_file_by_id?fileId=${data.fileId}`,
  });
}
```

You now have a working script to handle image upload in your public B2 Cloud Bucket. 🍻

## 8. [date-fns](https://www.npmjs.com/package/date-fns)

Date manipulation is frequently used in any application. That's why when you want to bend a date to your own will, `date-fns` is there at your disposal.

Let's say for example, you want to format the date when the user uploaded an image.

Install `date-fns` in your application.

```
npm i date-fns
```

Now, create a component to handle date formatting.

```js
import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";

export default function DateUploaded({ date }) {
  return (
    <div>
      {formatDistanceToNowStrict(new Date(date), {
        addSuffix: true,
        includeSeconds: true,
      })}
    </div>
  );
}
```
There you go, import the component to format the date like so: `3 days ago`.

## 9. [next-auth](https://www.npmjs.com/package/next-auth)

Now, you must be wondering, how should I handle the authentication of users in my Nextjs 14 application?

Fret not, `next-auth` to the rescue!

`NextAuth.js` is an open-source authentication system that you can use directly in your NextJS app without the need to build your own from scratch.

It comes with built-in functionality for logging in and signing out users. You can read more by visiting their [homepage](https://next-auth.js.org/).

Let's say you want to create an authentication system using email and password.

Install `next-auth` first in your app.

```
npm i next-auth
```

Then, create an API route handler inside `[...nextauth]`. Yeah, this should be the name of the folder to make next-auth work.
The folder structure would look something like this:
`app/api/auth/[...nextauth]/route.js`.

Copy the following script:

```js
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

async function authenticate(emailOrUsername, password) {
  const uploader = {
    email: email,
    password: password,
  };

  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/uploader/login`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(uploader),
  });

  return res;
}

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        if (typeof credentials !== "undefined") {
          const res = await authenticate(
            credentials.email,
            credentials.password,
          );

          if (res.status === 200) {
            const data = await res.json();
            return {
              name: data.name,
              email: data.email,
              id: data.id,
            };
          } else {
            throw new Error("Invalid credentials");
          }
        } else {
          return null;
        }
      },
    }),
  ],
  pages: {
    signIn: "/login",
    signOut: "/auth/signout",
    error: "/auth/error", // Error code passed in query string as ?error=
    verifyRequest: "/auth/verify-request", // (used for check email message)
    newUser: "/auth/new-user", // New users will be directed here on first sign in (leave the property out if not of interest)
  },
  session: {
    strategy: "jwt",
    maxAge: 43200,
  },
  callbacks: {
    async session({ session, token, user }) {
      // Send properties to the client like the user id
      session.id = token.sub;
      return session;
    },
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };
```

That's it! You now have a working authentication system. 🎉

## 10. [react-icons](https://www.npmjs.com/package/react-icons)

What if you want to use unlimited free icons easily in one whole package?

`React-icons` offers thousands of free icons that you can use in your application easily.

Try browsing in their [homepage](https://react-icons.github.io/react-icons/) and see that they have all your needed icons.

To use `react-icons` in your application, install it first.

```
npm i react-icons
```

Then, browse the icons you want in their website. Let's say you want to add a `burger menu icon` in your navbar. Just type `burger` in their search bar and you'll see different variations of `burger` icon.

Click on the `burger` icon that you want, then, the necesary code that you will use will pop out, like so:

```js
import { GiHamburgerMenu } from "react-icons/gi";

<GiHamburgerMenu />
```

That's it! Just copy that component in your app and the burger icon will now appear.


## 11. [react-intersection-observer](https://www.npmjs.com/package/react-intersection-observer)

If you want to have an infinite scroll functionality in your applciation then you need `react-intersection-observer`. It comes with a built-in hook that detects when a user reaches the end of the page.

Let's install it in our app.

```
npm i react-intersection-observer
```

Now, import `useInView` hook in your component that you want to have an inifinite scroll functionality.

```js
import { useInView } from "react-intersection-observer";

export default function Component() {

  const { ref, inView } = useInView();

  useEffect(() => {
    // When user scroll at the bottom, load more images!
    if (inView) {
       // function to load more images
      loadMoreImages();
    }
  }, [inView]);

   return (
       <div ref={ref}>
          // A loader UI component
          <Loader />
       </div>
   );
}
```

You now have an infinite scroll system in your application! 🍻

## Conclusion

Let's wrap it up! All the awesome 11 packages that I used to build my new NextJS 14 website are:

1. nextjs-toploader
2. react-hot-toast
3. cookies-next
4. react-loader-spinner
5. react-loading-skeleton
6. @knocklabs/react and @knocklabs/node
7. backblaze-b2
8. date-fns
9. next-auth
10. react-icons
11. react-intersection-observer

That was a lot of packages. *Phew*! Hopefully, you got something that you can use in your next website. 

Feel free to leave a comment below if you have any questions. Cheers!

11 Useful Packages to Supercharge Your NextJS 14 Website

Imagine having your own website running 24/7 on the internet without worrying about the bills to be paid to keep it up on the server.

Well, don't you worry, because I will teach you how to build and deploy websites without paying a single cent.

# Type of a Website

Before we go about deploying our website, we first need to know what type of website we are going to build and deploy.

There are mainly two types of websites: static and dynamic. Static sites only use plain HTML, CSS, and vanilla JavaScript, while dynamic websites use frameworks like React.Js, Next.Js, and Express.Js.

There are some platforms that support only static websites, while others support both static and dynamic websites. It is important to know the type of website you're deploying to prevent headaches in the future.

# Static website

Let's first consider how to build and deploy a static website for free.

## 1. Build a static website using HTML, CSS and JS

Open your favorite code editor and create an `index.html` file.

Inside, create a boilerplate html like this:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```
Change the `<title>` from `Document` to `My Static Website`. 

And then, inside the `<body>` tag, add the following content:

```html
<h1>Hello World!</h1>
<h2>This is a static website.</h2>
<div>
  <p>The current number is: <span>0</span></p>
</div>
```
It would look something like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Static Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <h2>This is a static website.</h2>
    <div>
      <p>The current number is: <span>0</span></p>
    </div>
  </body>
</html>
```

Open your `index.html` file in the browser to see your beautiful static website.

![index.html file](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Findex-html.PNG)

In your `index.html`, add the attribute `class="title"` to the tag `<h1>`.

For `<h2>`, add `class="sub-title"`. Finally, add `class="content"` to the `<div>`.

It would look something like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Static Website</title>
  </head>
  <body>
    <h1 class="title">Hello World!</h1>
    <h2 class="sub-title">This is a static website.</h2>
    <div class="content">
      <p>The current number is: <span>0</span></p>
    </div>
  </body>
</html>
```

Now, let's add some CSS so we can include styles and make it even more beautiful.

Create a `style.css` file. We need to link this CSS file inside our html, like so:

```html
<link rel="stylesheet" href="style.css">
```
Put this inside the `<head>` tag of your `index.html` file, like this:

```html
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>My Static Website</title>
   <link rel="stylesheet" href="style.css">
 </head>
``` 

To style our `index.html` file, let's target the `class` attribute we added a while ago.

Let's go wild and add some styling like colors and font styles!

```css
.title {
    color: blueviolet;
}

.sub-title {
    font-style: italic;
    color: brown;
}

.content {
    font-size: 18px;
    color: green;
}
```

Our website will now look like this:

![the website when css was added](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fadded-css.PNG)

*Ain't that a beautiful website?* 🤭

Now, our website is not complete without some `JavaScript` in our project. Let's add some code to make it more exciting!

In our `index.html` file, add a count button. Using this button, we will change the value of `0` inside the `span` tag. 

Now, the `<body>` of our `index.html` would look like this:

```html
 <body>
   <h1 class="title">Hello World!</h1>
   <h2 class="sub-title">This is a static website</h2>
   <div class="content">
     <p>The current number is: <span>0</span></p>
   </div>
   <button>Count</button>
 </body>
``` 
In our project folder, create a `script.js` file. We need to link this javascript file as well in our `index.html` file like this:

```html
<script src="script.js" defer></script>
```

The overall look of our `index.html` file would be like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Static Website</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 class="title">Hello World!</h1>
    <h2 class="sub-title">This is a static website.</h2>
    <div class="content">
      <p>The current number is: <span>0</span></p>
    </div>
    <button>Count</button>
  </body>
</html>
```

Now, let's create a program that will increment the number when the button is clicked.

```js
const number = document.querySelector("span");
const button = document.querySelector("button");

let count = 0;

button.addEventListener("click", () => {
  count++;
  number.textContent = count;
});
```

In the script above, we used `document.querySelector` to target both the `<span>` and `<button>` for the number `0` and `Count`, respectively.

Then, we initialized a variable `count` and store the number 0.

We utilized the built-in function `addEventListener()`, in order to listen to `"click"` events on our `button`.

Inside the callback function, we implemented the counter logic, `count++`, to the `count` variable.

Finally, we assigned each increment to the `number` variable using `textContent`.

Now, test that button and start the *clicking*! 😉

![button clicking on the website](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fjs-button-click.gif)

## 2. Deploy to Github Pages

Our static website is finally complete. We have implemented HTML, CSS, and JavaScript on our webpage.

It's time to deploy our static website to `Github Pages` with zero cost.

### Create a Github Account

In order to deploy to github pages, you must first have an account on `Github`; if you don't have one, create one using this link: [Github Signup](https://github.com/signup).

### Create a New Repository

Now, [create a new repository](https://github.com/new). Name the repository whatever you want; I'll put `awesome-static` for mine. 

For the description, write `This is a static website created using HTML, CSS and JavaScript`.

Check the `Add a README file` and then click the button `Create repository`.

Github will redirect you to your newly created repository, like below. 🍻

![Github repo of the static website](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fgithub-repo.PNG)

### Add the Project files to the Repository

Now, let's add our project files to our GitHub repository.

You can manually add the files by clicking the `Add file` button and then the `Upload files`.

![add new files to github via upload](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fadded-files-via-upload.PNG)

Now that it is uploaded, let's deploy it by going to `Settings` -> `Pages`.

Under `Branch`, select `main` and then click `Save`.

Wait for a minute, refresh the page and then you'll see that your page is live. Congratulations!🍻🥳

![successfully deployed to github pages](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fdeployed-to-github-pages.PNG)

For reference this is the website we created: [https://naknamu.github.io/awesome-static/](https://naknamu.github.io/awesome-static/).

If you missed anything, check the [Github repository here](https://github.com/naknamu/awesome-static).

> If you build a website for commercial purposes, then you need to have a `custom domain`. For example, `google.com`, `solodevhub.com` or `alisa.pics` are custom domains. You buy these from domain providers like Namecheap, Porkbun, or Cloudflare. A domain will cost you a few dollars, so we will not discuss it here.

# Dynamic Website

Dynamic websites are popular nowadays, especially when you use frameworks like React.JS, Next.JS, and Express.JS.

Let's build a dynamic site using React and deploy it to production without spending a penny.

## 1. Build a Dynamic Website using React

Open up your terminal, and let's create a React application using the command below.

```
npx create-react-app my-dynamic-app
```

You can name your React app anything; I named mine `my-dynamic-app`.

After installation, use the command below to run your newly created React app.

```
cd my-dynamic-app
npm start
```
When you enter `npm start`, your app will automatically run a development server on `http://localhost:3000/`. Visit that site, and you will see the default React application. 👏

![default react app](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Freact-default.PNG)

As you can see in the webpage, its says `Edit src/Apps.js and save to reload.` Let's try and do that. Remove all the contents inside `<div className="App">` and add anything you want. For me, I will put something like this:

```js
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <h2>I am a great developer. 💪</h2>
    </div>
  );
}

export default App;
```
Refresh the page to see the changes, like so.

![react app new output when edited](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Freact-edited.PNG)

To create a production build for our react app, we need to run the command `npm run build`. 

## 2. Link React App to Github

Note that when developing a website, it is best to store your project in a `GitHub repository` so you can access your project anytime and anywhere. Don't forget to also utilize `Git` so you can see changes you commit to your application.

### Create an Empty Repository

Now, let's create an empty repository and upload our react app to github.

> Note: When creating a repository, don't check the "Add a README file" checkbox to avoid conflict with our local files!

After a successful creation, github will show you something like this:

![new github repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Freact-new-repo.PNG)

### Push the React files to Github

Let's connect our app to the Github repository, replace `<username>` with yours.

```
git remote add origin https://github.com/<username>/my-dynamic-app.git
```

In my case, it was:
```
git remote add origin https://github.com/naknamu/my-dynamic-app.git
```

Push our app to the github repository.

```
git push
```

Github will ask for your username and password when you use `git push` for the `HTTPS` link. Type in your Github username, and for the password, use the `personal access tokens` generated from the `Developer settings` in Github. 

If you don't know how, just follow these [steps to generate personal access tokens from Github](https://docs.github.com/en/enterprise-server@3.9/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens).

![Git push of local file to github](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fgit-push-react.PNG)

Head over to your Github repository to see the changes.

![react app pushed to github repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Freact-pushed-to-github.PNG)

## 3. Deploy to Cloudflare Pages

It's time to deploy our awesome react application so we can share it to everybody. 

### Create a Cloudflare Account

We will use cloudflare pages to deploy our react app for free. If you don't have an account yet, sign up here: 
[cloudflare sign-up page](https://dash.cloudflare.com/sign-up).

### Create an application in Cloudflare Pages

After you created an account, go to the dashboard and in the left sidebar, navigate to `Workers & Pages`. 

In the `Overview` tab, click on `Create application` -> `Pages`. 

![connect github repository to cloudflare pages](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fcloudflare-connect-to-get.PNG)

### Connect Git repository to Cloudflare Pages

You have the option to create an application by importing an existing Git repo or upload the assets manually. Let's make our life easier by connecting to git.

Click on `Connect to Git`, select the repository we saved earlier to Github. In my case, the repository is `my-dynamic-app.`

If it's not shown, you must configure repository access for `Cloudflare Pages`.

Click `Begin setup`. Under `Build settings`, choose `Create React App` in the `Framework preset` dropdown.

![Build settings for react applications](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fcloudflare-build-settings.PNG)

Finally, click `Save and Deploy`.

If everything goes well, you'll see a success confirmation from Cloudflare, like below. 

![Success confirmation from cloudlflare pages](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-at-zero-cost%2Fcloudflare-success-deployment.PNG)

Follow the link provided, and you will see your beautiful application in all its glory. 💪

Congratulations! You have successfully built a React application from scratch and deployed it to Cloudflare Pages. 

Don't worry, you won't incur any bills by deploying to CloudFlare pages, as they offer unlimited sites for free! 🍻

For reference, this is mine: [https://my-dynamic-app.pages.dev/](https://my-dynamic-app.pages.dev/)

# Conclusion

For static websites, you can deploy an unlimited number of websites using Github Pages without paying anything. Although you can also deploy a React application to Github Pages, I didn't include it here as there are many configurations that you have to do to make it work. That is why I utilized Cloudflare Pages to make the deployment of the React app easier and faster.

Hopefully, you learned something new from this blog. If you have any questions, feel free to ask them below in the comment section. Cheers!

How to Build and Deploy Websites at Zero Cost

Building an Application Programming Interface, or API, is an interesting project, especially when you want to manipulate data in the backend of a website or simply hone your skills in web development.

In this article, we will build an API using Express, a NodeJS web framework, and then we will deploy it to Railway for free.

# What is an Application Programming Interface (API)

An Application Programming Interface (API) is a type of program or piece of software that connects two or more applications together.

![a waiter serving a customer in a restaurant](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2FApplication-programming-%20interface.png)

Imagine a waiter at a restaurant. This waiter is like an API. It asks the customer what food to order. The customer can be anything, for instance, a React website or even a mobile application.

When the customer finishes the order, the waiter will go to the kitchen to tell the chef what to cook. This is like the API telling the database what data to fetch.

When the chef is done cooking, the waiter will get the food from the chef. In this case, the API will fetch the data from the database.

Finally, the waiter will give the food to the customer. In our example, the API will now give the data to a frontend application like `React`.

# Build an API using Express

Before we get our hands dirty with coding, let's first create a repository on Github. 

## 1. Create a Github Repository

I will name my repository as `my-api` and then write a description as follows, `This is an API created using NodeJS & Express to be deployed to Railway.`.

Check the `Add a README file` checkbox and then choose `Node` for the `.gitignore template`, like below.

![create Github repository of the API](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Fcreate-repo.PNG)

Click `Create repository`.

Github will automatically redirect you to the new repository.

![new Github repository of the API](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Fcreated-repo.PNG)

## 2. Clone the Repository on your Computer

Let's use the `SSH` to connect to our repository. Open up your terminal and clone the repository.

```
git clone git@github.com:<username>/my-api.git
```
> Replace `<username>` with your Github username.

In my case, it will be:

```
git clone git@github.com:naknamu/my-api.git
```

![clone the repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Fgit-clone.PNG)

Now, go to the local repository saved in your computer.

```
cd my-api
```

## 3. Create an Express Application

Let's initialize our project by using the command below.

```
npm init -y
```

!["npm init -y" in the console](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Fnpm-init-y.PNG)

The command above creates a `package.json` file. It contains information like the name, version, and list of all the dependencies used by the project.

Now, it's time to install express.

```
npm install express
```

Notice that there is a new file called `package-lock.json` and a folder named `node_modules` that were created.

The `package-lock.json`, captures the exact versions of packages and their dependencies in your project. The `node_modules`, on the other hand, contains the files of the dependencies or libraries that are used by your project, for instance, the `express` module.

Create a new file called `index.js`. Add the following code:

```js
const express = require("express");
const app = express();
const port = process.env.PORT || 3000;

app.get("/", function (req, res) {
  res.send("Hello World!");
});

app.listen(port, function () {
  console.log(`Express app listening on port ${port}!`);
});
```

In the code above, we imported the `express` module using the built-in `require()` function. Then, we created a new express application using the `express()` method and assigned it to the variable `app`. You can name it anything you want, although traditionally it's named `app` for familiarity and simplicity. 

In the next line of code, we created an `OR` condition so we could choose what port our app would listen to. Either a port stored in an environmental variable called `PORT` or simply the port `3000`.

Now, the `app.get()` method is an express function that invokes a callback function whenever there is an HTTP `GET` request for the path `"/"` relative to the site root. For example, when you request `http://localhost:3000/`, the callback function inside `app.get()` will be triggered.

The callback function, `function(req, res) {}`, takes two arguments: the request object, `req`, and a response object, `res`. The `res.send("Hello World!")` will be invoked as a response whenever `app.get()` is called.

Finally, we used the `app.listen()` function to start the server on the port we initialized a while ago, which is `process.env.PORT` or `3000`. 

We then added a callback function that prints `Express app listening on port ${port}!` to the console when the server is successfully running.

Let's run our express application by using the command below.

```
node index.js
```

If successful, you'll see the message in the console, like so:

![message from the console](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Frun-express-app.PNG)

Now, go to `http://localhost:3000/` in your browser, and you will see your Express app running. Congratulations! 🍻

![Hello world in the browser](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Fget-response-browser.PNG)

## 4. Push Changes to the Github Repository

Before we deploy our Express app, let's add, commit, and push the changes to our Github repository.

Check the status of our project by using the command.

```
git status
```

![check the status of the project](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Fgit-status.PNG)

Add all the files to be commited.

```
git add .
```

Commit to the repository.

```
git commit -m "Initial commit"
```

And then, push our changes, like so:

```
git push
```

![git push the files to the Github repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Fgit-push.PNG)

You can check again the status by using `git status`. It will throw a message, like this:

```
On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean
```

Go to your repository on Github to see the changes.

![new files added to the Github repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Fupdated-repo.PNG)

# Deploy our Express app to Railway

Our app is now ready for deployment on [Railway](https://railway.app/). 

I have three API's currently deployed on Railway, and I don't even pay a single cent.

![three project usage on railway](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Fthree-project-usage.PNG)

*How is this possible?* It's because I am subscribed to their `Hobby Plan`, which includes a `free $5 of usage monthly`. The three APIs's total costs don't even reach $4 by the end of the month. Check out all my project usage below from March 31 to May 1.

![total project usage on railway](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Frailway-usage.PNG)

You can see that my `Estimated Bill` is `$ 0.00`.

> These three API's were also created using Express.

## 1. Sign up for a New Account on Railway

Create an account on Railway by using your email or by connecting it through your Github account. I suggest connecting your Github account so you can deploy from the Github repository easily.

![create new account on railway](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Frailway-create-account.PNG)

## 2. Create a New Project on Railway

Let's create a new project on Railway by deploying from the Github repo we created a while ago.

Click `Deploy from Github repo`.

![new project on Railway](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Frailway-new-project.PNG)

Then click `Configure Github App`. Sign in to your Github account. You can choose to give access to `All repositories` or `Only select repositories`. In my case, I'll choose `Only select repositories`, like so.

![only select the my-api repository](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Frailway-only-select-myapi-repo.PNG)

Click `Save`. Now, go back to Railway and you'll see the repository `my-api` in the choices.

![the repo appeared on Railway](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Frailway-repo-appeared.PNG)

Click the repository, my-api, and then click `Deploy Now`.

That's it! You have successfully deployed an API on Railway! 🎉

![successful deployment on Railway](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Frailway-successful-deployment.PNG)

## 3. Generate a Domain on Railway

Now, if you want to see your API in the browser, you must generate a domain on Railway, and it's quite easy.

Just click `Settings`. Scroll down to `Networking`, and under `Public Networking`, click on `Generate Domain`.

![generate a domain on Railway](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Frailway-generate-domain.PNG)

Wait for a second, and there you go. You have now generated a domain for your API.

Follow that link and you'll see your API live in the browser. Congratulations! 🍻

![API in the browser](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fbuild-deploy-api-railway%2Frailway-API-in-the-browser.PNG)

## Wrapping up

The Express app that we have built in this article is very simple. You can expand this API by having the ability to store data in a database like `MongoDB` or by creating many routes that handle `POST` requests from users. The sky is the limit!

The purpose of this blog was to show you the end-to-end process of developing an API from scratch using Express and deploying it to production using Railway.

Anyway, I hope you learned a lot in this tutorial, and I hope I can write more awesome guides like this in the future. Until next time, cheers! 🍺

How to Build and Deploy an API using Express on Railway

In this article, we will deploy a Next.js website to Amazon Web Services (AWS) using the new version of Serverless Stack Toolkit (SST), which uses Ion as the new engine for deployment.

# Why use AWS to Deploy a Next.js website?

AWS offers free usage of their services to new customers that have signed up for the first 12 months.

If you deploy a Next.js website to AWS, you won't pay a single cent unless you add services that are not included in their free tier for new customers.

I have deployed two Next.js websites to AWS using SST, and I haven't paid a single cent since then.

![two Next.js website in production deployed to AWS](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fcloudfront-nextjs-deployed.PNG)

Learn more about [AWS free tier here](https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all).

# Build a Next.js website

Now that you're convinced to deploy a Next.js website to AWS, let's now create a Next.js website from scratch.

```
npx create-next-app@latest
```

Run our new Next-js app using the command.

```
npm run dev
```

As you can see below, it is perfectly working.

![new next.js app running in development](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fnew-next-app.PNG) 

# Installing SST

To make Ion work in our project, we must install the CLI for SST globally, like this:

```
curl -fsSL https://ion.sst.dev/install | bash
```

![installing Ion globally](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Finstalled-ion-globally.PNG)

Now, initialize SST using the command below.

```
sst init
```

> Note that you must run this command in a `bash terminal`, or else you'll get an error like below if you run it in a `WSL terminal`. You can directly open a git bash terminal in VS Code.

![error initializing sst in WSL terminal](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fsst-init-error-in-wsl.PNG)

If SST was successfully initialized, you'll see these in the console:

![successful initialization of SST](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fsst-init-run-in-bash-terminal.PNG)

Two new files will be automatically created upon SST initialization, namely `sst-env.d.ts` and `sst.config.ts`.

The code inside `sst.config.ts` would look like this:

```ts
/// <reference path="./.sst/platform/config.d.ts" />

export default $config({
  app(input) {
    return {
      name: "my-app",
      removal: input?.stage === "production" ? "retain" : "remove",
      home: "aws",
    };
  },
  async run() {
    new sst.aws.Nextjs("MyWeb");
  },
});
```

Now, let's run our Next.js app with SST using the command:

```
sst dev next dev
```

You will see something like this in the console. 

![sst running in development environment](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fsst-dev-next-dev.PNG)

A local development environment for our Next.js will be automatically initiated.

![Next.js in development environment](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fsst-dev-next-dev-2.PNG)

Follow that link, in my case, `http://localhost:3000`, to see your Next.js app running successfully!

![Next.js running in development with Ion engine](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fnext-dev-with-ion.PNG)

# Deploy to AWS

Now, let's deploy our Next.js app using just the command below.

```
sst deploy
```
![sst deploy in the console](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fsst-deploy-1.PNG)

After successful deployment, a link will be generated.

![generated link of our website](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fsst-deploy-2.PNG)

Let's follow that link to see our Next.js app successfully deployed to AWS. 

![website successfully deployed to aws](https://pub-9c57eec207bf46e8acf2f916d8ea29e7.r2.dev/solodevhub%2Fdeploy-nextjs-aws-sst%2Fsuccess-deployed-to-aws.PNG)

# Conclusion

In very quick and easy steps, we were able to deploy a Next.js website to Amazon Web Services (AWS) using the new version of SST.

You can read more information about SST and Ion on their [website](https://ion.sst.dev/).

Leave a comment below if you encounter any errors, and I will gladly provide the solution if possible. Cheers!

Web Development

Blog Posts