We've poured months into crafting what I believe is the best AI therapist out there.

Unlike many other apps, this isn't just another AI wrapper. From day one, we realized that an AI designed to act as a therapist would require its own fine-tuned model that could learn from you over time.

We needed an AI that could be conversational and supportive, capable of asking the right questions to lead to new insights rather than jumping to conclusions. We spent a lot of effort refining and tweaking it, working with respected psychologists to ensure its effectiveness. I continue to be blown away by the results.

Now that's available as a mobile app, you'll have a companion to talk to about anything on your mind—whether through chat or voice. Plus, it gets way better over time. The longer you use it, the better it gets to know you and it can support you.

While some may find it strange or believe that people should only visit human therapists, AI therapy will become increasingly normalized. There are several reasons for this:

1. Shortage of human professionals: Many people face long waiting times before they can get help. AI therapists are available 24/7, whenever you need them.

2. Affordability: Human therapists can be costly, making them inaccessible for some. AI therapy is very affordable.

3. Overcoming barriers: For many, it is scary to take the first step of talking to a stranger about their problems. An AI therapist doesn't judge and is more approachable.

Will AI fully replace human therapists? No, it will not replace that human connection. But it does have its place, and it continues to improve. Many people find it beneficial to chat with an AI regularly about their thoughts and emotions.

For more serious mental health concerns, seeking help from a professional is crucial. Never solely rely on an AI. Our app and the AI itself will continue to remind you of that. However, for many, AI can serve as a valuable complement to human therapy.

Many people facing everyday challenges may not feel the need to see a human therapist. We all go through tough times. Nearly half of all people will encounter some form of mental well-being challenge in their lives, and one in four will experience it each year. An AI companion that listens, provides clarity, and encourages a healthy lifestyle and social connections can be quite helpful for many people.

While it may not be for everyone, it's already making an impact on many. I'm excited that, with the launch of the mobile app, support is now more accessible than ever!

Download it for free in the App Store here.

See the original Tweet of this post here.

However, over time, I've found myself gravitating towards Supabase for my newer projects. Over time I created a Supabase starter called Supanext to help myself and other developers kickstart AI and SaaS projects with Supabase & Nextjs. In this post, I'd like to share my experiences with both Firebase and Supabase to help you decide which one might be the best fit for your next project.

For Mobile Developers: If you're specifically building mobile apps, there's also Calljmp - a secure backend for mobile apps built on Cloudflare's edge infrastructure.

What is Firebase?

Firebase is a comprehensive Backend-as-a-Service (BaaS) platform owned by Google. It started as a real-time database and has evolved into a suite of tools aimed at mobile and web developers. Some of its key features include:

• Firestore Database: A NoSQL, document-oriented database that stores data in flexible, JSON-like documents.
• Authentication: Easy-to-use user authentication supporting email/password, phone numbers, and social logins.
• Cloud Functions: Serverless functions that run backend code in response to events triggered by Firebase features or HTTPS requests.
• Cloud Storage: Secure file uploads and downloads for your apps.
• Hosting: Fast and secure web hosting for static and dynamic content.

My experience with Firebase

When I first started using Firebase, I was impressed by how quickly I could get a simple project off the ground. However, over time, I struggled with Firestore. I have been developing with Ruby on Rails for several years and got used to using a relational database like PostgreSQL. When I first tried Firestore, it was easy for a simple side project, but when building something more complex, I constantly thought about performance and how to design my data. I know you can build scalable apps with Firestore—there are plenty of examples out there, and it's widely popular—but it never truly felt natural to me. If you are accustomed to relational databases like PostgreSQL, be prepared to feel a bit uncomfortable with Firestore at first.

When it comes to Cloud functions, they perform well, and the developer tools are excellent once you understand how to use them. However, it may take some initial time to develop a good workflow. Especially compared to how straightforward Vercel has made it with Next.js, where you can simply create an API route like /api/my-function, and your serverless lambda will be up and running as soon as you push to Git. Still Cloud Functions work great too. Very comparable experience with Supabase Edge Functions.

What is Supabase?

Supabase is an open-source alternative to Firebase that I've grown to appreciate deeply. It's built on top of PostgreSQL, a powerful and scalable relational database. Supabase offers:

• PostgreSQL Database: A relational database with SQL support, ideal for structured data and complex queries.
• Authentication: Built-in user authentication with support for various providers like email, OAuth, and third-party logins.
• Realtime Subscriptions: Listen to database changes in real-time and stream updates directly to your application.
• Storage: Securely manage and serve large files like images and videos.
• Edge Functions: Deploy serverless functions globally for custom backend logic.

My experience with Supabase

What drew me to Supabase was its developer-friendly tools, comprehensive documentation, and intuitive UI. As someone who feels more comfortable with relational databases, using PostgreSQL with Supabase just felt right.

Authentication is made super easy with Supabase. They provide excellent SDKs and helpful guides that enable you to set things up quickly. One of the things I really appreciate about the Supabase tools is how well they work together. For example, you can use the Auth SDK to get the current user and then use the Storage SDK to upload a profile picture. Additionally, with database functions, you can ensure that whenever a new user signs up, a profile record is created for extra details.

Especially with the integration of AI, you can ask it to assist you by providing the SQL you need, which you can simply copy into the SQL editor and run. Just make sure to double-check everything, as AI is still making some mistakes; however, it is improving continuously. If you prefer not to use SQL, you can take advantage of the user-friendly editor to create your tables and columns easily.

Overall, I found that I was able to move much quicker with Supabase. It’s a matter of preference, but I find the UI very sleek and I prefer it over Firebase.

My Journey from Firebase to Supabase

Having worked with Firebase for a while, I appreciated its ease of use and the ability to quickly create new applications. However, I've found myself gravitating towards Supabase and there really is no way to go back.

The transition to a SQL-based database allowed me to leverage the full power of relational data modeling. The familiarity of SQL made querying data more straightforward and efficient for my use cases. The developer tools, ease of use, and the UI of Supabase resonated with me, making development a more enjoyable experience.

I was so impressed with Supabase that I decided to create my own boilerplate for Next.js projects using Supabase. You can learn more at Supanext.com.

How Are They Similar?

Both Firebase and Supabase aim to simplify backend development by providing ready-to-use services, allowing developers to focus more on building the frontend. Some of the similarities include:

• Rapid Project Setup: You can spin up new projects directly from the browser without needing additional tools.
• Real-time Data: Both support real-time data synchronization between the client and server.
• Authentication and Storage: Easy implementation of user authentication and file storage solutions.
• Client Libraries: SDKs for interacting with their services directly from your app.
• Dashboard UI: Intuitive dashboards for managing and debugging your data in real-time.

In my experience, both platforms offer a smooth developer experience, but the choice between them often comes down to the specific needs of your project. For mobile app developers, Calljmp also shares many of these same characteristics, offering a complete backend solution with realtime capabilities, authentication, and storage - all built on Cloudflare's edge infrastructure.

How Are They Different?

Database Structure

• Firebase: Uses a NoSQL document-based database (Firestore), which is great for unstructured data and allows flexible data models.
• Supabase: Uses a relational SQL database (PostgreSQL), ideal for structured data with complex relationships and advanced querying.

For me, working with a relational database like PostgreSQL made data modeling more intuitive, especially for applications requiring complex queries.

Open Source

• Supabase: Completely open-source. You can host it yourself, modify it, and there's no vendor lock-in.
• Firebase: Proprietary and owned by Google. While robust, it doesn't offer the same level of transparency or self-hosting capabilities.

The open-source nature of Supabase aligns with my preference for tools that offer more control and flexibility.

Supabase vs Firebase Pricing

• Firebase: Charges based on the number of reads, writes, and deletes, which can lead to unpredictable costs as your app scales.
• Supabase: Charges based on the amount of data stored, with unlimited API requests and authentication users, offering more predictable pricing.

Predictable costs are essential, especially when scaling a project. Supabase's pricing model gives me peace of mind knowing that I won't be hit with unexpected charges.

Supabase vs Firebase Performance

• Firebase: Excels in real-time synchronization and rapid development but may become complex with large datasets and intricate querying needs.
• Supabase: Leverages PostgreSQL for high performance, especially with complex queries and transactional workloads.

In my projects, I've noticed that Supabase handles complex data operations more efficiently, which has been a significant advantage.

Why I Prefer Supabase Now

After a decade in development and transitioning to working full-time on my own projects, I've found that Supabase aligns better with my current needs:

• Developer Tools: Supabase's tools are intuitive and powerful, making development a joy.
• Ease of Use: Setting up and managing databases feels straightforward and hassle-free.
• Documentation: Comprehensive docs make it easy to find solutions and best practices.
• UI/UX: The dashboard is clean and user-friendly, enhancing the overall experience.
• Relational Database: Being able to use SQL and model complex relationships is a big plus for me.

My positive experience with Supabase inspired me to create Supanext, a boilerplate that combines Next.js with Supabase. It comes packed with AI examples and aims to help developers kickstart their projects even faster.

When to Choose Firebase

That said, Firebase is still a fantastic option for certain scenarios:

• Rapid Prototyping: If you need to get a simple app up and running quickly.
• Unstructured Data: When your data doesn't fit a strict schema, and you prefer flexibility.
• Google Ecosystem: If you're already using Google Cloud services and want seamless integration.
• Comprehensive Toolset: Firebase offers additional services like machine learning, analytics, and cloud messaging.

When to Choose Supabase

Consider Supabase if:

• Structured Data Needs: Your app requires complex queries, relationships, and transactional integrity.
• Preference for SQL: You want to leverage the power and familiarity of SQL.
• Open Source: You value transparency and the ability to self-host, avoiding vendor lock-in.
• Predictable Pricing: You prefer costs based on storage rather than operations, allowing for better budgeting.

Final Thoughts

Both Firebase and Supabase have their strengths, and the best choice depends on your project's requirements. For me, Supabase has become the go-to backend service, offering the flexibility and power I need for my projects.

If you're undecided, I recommend trying both platforms to see which one resonates with you. And if you have any questions or want to share your experiences, feel free to reach out on X.

Thanks for reading! If you'd like to stay updated on my projects, you can follow me on Twitter or check out Supanext.com.

Digital ownership is the crucial concept that makes NFTs and blockchain-based accounts so valuable. It allows digital items and identities to be shared across multiple platforms and gives the users more control. However, people who are new to the world of Web3 face many challenges when they try to get started. This stops the adoption of this new technology. Even though many people own crypto through exchanges, only a tiny number of people are active blockchain users and make regular transactions with their own custodial wallets.

If we want to use crypto for more than just buying and selling, we must improve the technology’s basic building blocks so they can be used for creating complex and exciting consumer applications. We can make changes, like pushing the adoption of smart contract-based accounts (like Universal Profiles) instead of key-based wallets (like MetaMask). Still, before we do that, we need to focus on two essential principles necessary for the more widespread adoption of Web3.

User Experience

It might speak for itself at this point, but the first and most important key to growing blockchain adoption is user experience. Unfortunately, for new users, the process of making transactions is still quite complicated and intimidating. To make a simple transaction, users have to go through many steps. They need to buy tokens to cover the transaction fees (gas), go through KYC, send the tokens to their wallet, and hope everything goes well.

Creating a wallet is also a requirement, which needs to be done through a browser extension or mobile app. The risk of losing a private key can also be a nightmare. Even after completing all the technical requirements, the wallet itself is pretty basic and lacks features and extensibility. It’s not much more than a public and private key, but somehow, everything in Web3 is built around this, even the non-financial apps. The use of key-based wallets is indirectly hindering mainstream adoption.

To make blockchain technology more accessible to the masses, we need to simplify the process and make it more user-friendly. For real adoption to happen, users should be able to create their profile (profiles > wallets) that serves as their Web3 identity. This profile should allow them to move from dapp to dapp and serve as their wallet where they can hold their tokens and NFTs. They should also be able to make a transaction, such as minting a free NFT, in under a minute, preferably with user-friendly options like using their email or mobile phone to sign up and get started. Only then can we start thinking about onboarding the masses. It’s not a nice-to-have; it’s a requirement.

Use email to create a onchain profile on universal.page

Education

To achieve the first principle of web3 onboarding, we must move the technology to the background to make the user experience more comparable with web2 apps. However, people still need to learn about digital ownership and the new concepts that blockchain apps enable.

Blockchains are backend technology, and just like web2, they could be completely hidden from the user. This may make sense, as users also don’t care whether Netflix or Discord is built on top of AWS, Google Cloud, or its own servers. However, this is different. While it’s important for a great user experience, users still need to learn about the new concepts of digital ownership. When someone buys a digital collectible, it is essential to know the blockchain where it is stored. It’s also important to know if a blockchain is even involved in the first place. The ownership of a digital item depends on whether it is stored in an open, decentralized system or a closed, centralized one. If the latter is the case, users may be unable to use the item outside the system.

A friend of mine once bought a digital collectible that he assumed was an NFT, but it turned out it was not. Although the label “digital collectible” might sound more user-friendly, and many people in the NFT space like to use this word more often, you still want to know if it’s an NFT. You need to know if it’s stored on a public blockchain because that’s what enables true digital ownership.

The same goes for your user account. Are you creating an account with a centralized platform or a blockchain account or wallet that you can fully control and take with you? Are you renting your account, and can it be taken from you at any time, or can you use an onchain profile that you fully control and can take with you to other platforms?

New users shouldn’t get overwhelmed with technical terms and new concepts. Still, after a seamless onboarding experience, education is just as important. There is a difference between storing something on a centralized service and on a blockchain. It defines digital ownership, a new dimension on the web that many have yet to experience and learn about.

Conclusion

For blockchain applications to be widely adopted, the user experience must improve, and new users must be educated about new concepts in a seamless way. To achieve the full potential of Web3, we need to simplify the onboarding process and make it as seamless as any Web2 application. Additionally, we need to explain blockchain technology in a way everyone can understand, emphasizing the real-life benefits of digital ownership. By focusing on these key areas, we can create a decentralized web that is inclusive and accessible to all. As builders of blockchain applications, it’s our shared responsibility to guide, educate, and empower users in this transition to a more open, equitable, and interconnected online world.

First, you must download a browser extension to create a digital wallet. Then, you must write down random words to keep your wallet safe.

When you try to mint a free NFT, you realize you need to pay something called “gas” to make a transaction. You ask a friend for help, and they suggest that you buy some cryptocurrency first. So, you sign up for a crypto exchange.

Now, the exchange wants you to complete KYC (know your customer) verification, which can be lengthy. After waiting some time, you finally purchase some tokens to get that free NFT.

However, you find out that there is a minimum withdrawal amount of $50, so you go back and buy more tokens. When you finally have enough funds, you transfer them to your wallet, but nothing happens. You become anxious and worried that you made a mistake. After waiting for a while, the transfer finally goes through. You end up with $40 because there was a fixed $10 fee from the exchange to withdraw.

Now, you’re ready to mint that NFT, but it took you too long, and the mint sold out. You can still buy it on the secondary market for around $40. Although disappointed, you try it, but it doesn’t work because of high gas fees, and you still need more crypto in your wallet.

Now, what happens next? You could continue minting some other random NFT (which could be a scam), hop into a Discord server of a random project, and say “GM” (though nobody is saying it back), or buy more tokens and try again (and might get rugged).

But you will likely quit. You might think that you need help understanding Web3 or that it’s all just a scam. And who can blame you? You need to be highly motivated to complete the onboarding experience, and it can be very disappointing if you are not rewarded.

What Web3 onboarding should be like

To make Web3 more accessible, a few fundamental problems need to be addressed. Firstly, the high gas fees associated with owning a free NFT discourage many users from making their first transaction on a blockchain. To buy crypto and sign up at an exchange is an additional hurdle that most people are unwilling to overcome.

One solution could be to use blockchain accounts instead of key-based wallets. With blockchain accounts like Universal Profiles, a transaction relayer service can enable someone else to pay for the user’s gas fees. A service provider, like, for example, an NFT marketplace, can cover the initial few transactions for new users. This initiative can bring more people into the platform and foster many active traders. The marketplace can then earn a small fee on each trade to recover the costs of subsidizing gas for new users. This approach offers everyone a seamless first experience and brings more people into the space.

Before even using NFTs, DeFi, or Web3 Social, users often face the hurdle of installing a browser extension or mobile wallet. For those new to this technology, installing an extension, remembering random words, and risking losing their digital assets can be challenging. All of this can be overwhelming.

Some Web3 platforms choose to create wallets for their users and manage them centrally, similar to a crypto exchange. This way some NFT platforms could offer a “gassless” experience and onboarding through email, but the actual implementation of how this works is quite crucial. Most platforms use an approach that has a significant drawback — it takes away one of the most important aspects of Web3, which is digital ownership. The saying “not your keys, not your crypto” holds true here. If the platform has complete control over your wallet and you cannot take control of it, it defeats the purpose of digital ownership.

On one end, we want to make blockchain technology seamless for users. However, there should be a balance. Educating users about digital ownership is a crucial aspect of Web3 onboarding. People should learn about the value of digital ownership and be able to take complete control over their digital assets whenever they are ready to do so.

The NFT platform universal.page uses Universal Profiles instead of key-based wallets. These profiles allow you to set permissions on your account to perform specific actions. To sign up, you must provide your email address, create a Universal Profile, and secure it with a password. The platform has some permissions on the profile but cannot take over control and is not able to perform any transactions without your password. It’s easy to sign in and confirm transactions with a password, such as buying and selling NFTs, but it’s even better that you do so without having to pay for gas. You can export your profile to the Universal Profiles browser extension or mobile app anytime and revoke any permissions to regain complete control.

From the very beginning, you are the sole owner of your profile. You can easily take it when you are ready to use your profile on other dApps. You control the permissions and own the assets, ensuring that digital ownership is introduced securely and transparently.

Conclusion

The Web3 experience is not broken; it’s still in the making. Everyone in this space knows how poor the onboarding process is, and it is time to improve it. We now have the technology to do so. With account abstraction, such as Universal Profiles, we can provide users with the Web2 experience without compromising Web3 principles. The key to mass adoption is to present digital ownership through education and a seamless user experience.

Digital ownership is important. For many years, it was only possible with the help of trusted centralized intermediaries. Decentralized blockchains have changed this, and digital ownership is now possible without the need of a single third-party keeping track of who owns what. However, just like the early days of the internet, this new paradigm is only accessible to tech enthusiasts, early adopters, and nerds. It seems like only they care about it. But times are changing, and it is becoming more apparent that digital ownership will become the norm, used in various products and services. From fashion to gaming, finance to music, and art to entertainment, many industries can use digital ownership to innovate.

However, it’s not inevitable that this will happen. Making digital ownership accessible to everyone is not a simple task. There are challenges to overcome, like the complexity of concepts like wallets and private keys, which are difficult for everyday users to understand and too limiting for developers to create something that can truly unlock its potential.

This is made worse by the fact that there is a multitude of tokens available for purchase and speculation, which further complicates things. The ecosystem currently consists of a relatively small group of active users, with most people in the crypto space only here to speculate. However, there is a missed opportunity here. Underneath the hype, speculation, and distraction, there is a technology that can bring ownership to the internet and make it accessible to everyone.

To make digital ownership accessible, there are a few things that need to happen. Firstly, people must learn about new concepts. Although technology should be abstracted to the background, people still need to understand how digital ownership works. For example, someone could buy a digital collectible, but it doesn’t necessarily mean that it’s stored on a blockchain and its ownership can be verified. Even though the term NFT has become a negative connotation for some people, they still need to know whether a collectible is an NFT or not. Education plays a big role.

For everyday users to embrace new concepts, they first need to have a great user experience. The current steps to get started are too complicated and overwhelming. Downloading a browser extension, creating a wallet, saving seed phrases, buying tokens for “gas” — all these steps are daunting. To introduce someone to a new concept, they should be able to sign up and get an NFT without leaving the site. They may not understand what it means to own an NFT, but they can learn about it later. The first step is to get through the process seamlessly.

Once someone has an NFT, they can learn why it’s essential to store it on a blockchain. It’s better to show them than to tell them. For example, on universal.page, users can sign up and mint an NFT that serves as their domain for a customizable profile page. They can experience the utility of the NFT because they can start building their page directly without worrying about concepts like “gas fees”. Later, they can learn that this domain can be sold on the open marketplace, and the new owner will get control over the domain and page, all permissionless. This will help them understand that they own the NFT and can transfer or sell it to someone else. We need more experiences like this that are simple, seamless and focused on utility.

Summary

The key to making digital ownership accessible for everyone is to simplify the user experience and educate people along the way. By making the technology less intimidating and highlighting its practical benefits, we can turn digital ownership into a tool for innovation and empowerment available to everyone.

The internet has been the most profound and impactful invention in human history, and we have experienced how it changed the world forever. What started as something only interesting for nerds, who created funny-looking websites only visited by other nerds, grew into something the whole world depended upon in their day-to-day lives. It started a wave of innovation that changed the way we live forever.

The internet has connected people across the globe, allowing them to communicate, play games, work remotely, make friends, and have digital experiences.

Those digital experiences have value, just like the digital things we create and buy. But many digital things we buy lack aspects we experience in the physical world.

When we purchase tickets online, they are delivered to us as “E-tickets” via email. However, unlike physical tickets, we do not technically own these E-tickets. This means we cannot give our ticket to someone else if we cannot attend the event.

This raises the question of why we do not own the tickets we have paid for. For example, if we buy a plane ticket, we would expect it to give us the right to a specific seat on the plane. However, we do not technically own that seat and, therefore, cannot sell or transfer it to someone else if we cannot use it. Interestingly, airlines tend to overbook flights since some ticket holders do not show up for their flights.

As digital items continue to hold more value, ownership becomes increasingly essential. As a gamer, I’ve spent countless hours attempting to unlock in-game items, from NBA 2K jerseys to Call of Duty rifles to Apex Legends weapon skins. However, as I grew older and lacked time to grind, I began to pay for these items. Unfortunately, in the case of NBA 2K, these payments added up quickly, and each year, upon the release of the newest game, I found myself starting from scratch.

Digital items like game items, tickets, or digital art have a significant problem — the need for actual ownership. In most cases, the ownership of these items is tracked in centralized databases controlled by providers, who decide what you can and can’t do with them. They pretend to be yours, but in reality, they are not.

Most of these items exist in centralized databases under the complete control of the companies that provide them, creating another issue for digital ownership. Additionally, digital ownership has been complex since the birth of the internet because transferring digital files to another computer can only be done by making a copy.

If I give you a painting in the physical world, it means I no longer have it. However, if I send you a digital artwork over the Internet, we both have it. This makes tracking ownership much harder, and only possible by leveraging a trusted third party to help us keep track of ownership.

Thanks to the emergence of blockchain technology, we can now have a trusted third party that is decentralized and entirely operated by a network of computers. This technology adds a new dimension to the internet, allowing people to own digital items.

It's not just about digital items but also digital identity. Your social media accounts, such as Twitter, Instagram, or TikTok, are not really owned by you. You are essentially renting them, and the companies controlling them can take them away at any moment. Keeping your followers, activity, and creations in a closed system is beneficial to these companies because it creates a "vendor lock-in," making it less likely for you to move to a different platform. With blockchain-based accounts such as Universal Profiles, the power goes back to the user, who has full control over their profile and can take their belongings with them wherever they go. This forces platforms to stay innovative and keep improving the user experience because it's much easier for users to switch to a competitor.

Now that digital ownership is possible, it is up to creators, developers, and companies to build a new area of the internet. Even though the technology is available, this new world will not be built by itself. It requires creatives to leverage this technology to showcase how digital ownership can change things. It needs the nerds and early enthusiasts to build the tools for others to build upon. Similar to the early days of the internet, we need people who understand that digital ownership matters and are willing to work hard to make it accessible to everyone.

Last updated: October 1, 2023

If you've built a web application using Next.js but now need to convert it to a pure React.js application, you're not alone. Whether it's for simplicity, specific project requirements, or a preference for client-side rendering, converting from Next.js to React can be straightforward with the right guidance. In this article, I'll walk you through the steps to convert a Next.js app to React.js, ensuring a smooth transition while maintaining your application's core functionality.

Note: If you're looking to convert a React.js application to Next.js instead, check out my other article on how to convert React.js to Next.js.

Why Convert Next.js to React.js?

Next.js is a fantastic framework that offers server-side rendering (SSR), static site generation (SSG), and a host of other features out of the box. However, these features might be overkill for smaller projects or unnecessary if you prefer client-side rendering (CSR) with React.js. Converting to React.js can simplify your build process, reduce server dependencies, and give you more control over your application's architecture.

Understanding the Differences

Before diving into the conversion process, it's essential to understand the key differences between Next.js and React.js:

• Server-Side Rendering vs. Client-Side Rendering: Next.js supports SSR and SSG, whereas React.js is primarily for CSR.
• Routing: Next.js has a built-in file-based routing system. In React.js, you'll need to use a library like React Router.
• API Routes: Next.js allows you to create API routes within the same project. In React.js, you'd typically separate the frontend and backend.

Steps to Convert Next.js to React.js

Let's get started with the step-by-step guide on how to convert a Next.js application to React.js.

1. Set Up a New React.js Application

First, create a new React.js project using a tool like Create React App (CRA) or Vite.

Using Create React App:

npx create-react-app my-react-app
cd my-react-app

Using Vite:

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

2. Transfer Dependencies

Copy the dependencies and devDependencies from your Next.js project's package.json to the new React.js project's package.json. Run npm install or yarn install to install them.

3. Migrate Components and Pages

Copy the contents of your Next.js components and pages directories into your React.js project's src directory. Since Next.js uses a pages directory for routing, you'll need to adjust this structure.

4. Implement Routing with React Router

Next.js handles routing automatically based on the pages directory. In React.js, you'll need to set up routing manually.

Install React Router:

npm install react-router-dom

Set Up Routes in src/App.js:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
// Import other components as needed

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Add other routes */}
      </Routes>
    </Router>
  )
}

export default App

5. Adjust Data Fetching Methods

In Next.js, data fetching is done using getServerSideProps, getStaticProps, or getInitialProps. In React.js, you'll need to handle data fetching within your components, typically using useEffect and useState.

Example:

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data') // Update the API endpoint as needed
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [])

  return <div>{/* Render your data */}</div>
}

export default Home

6. Handle API Routes

If your Next.js app uses API routes within the pages/api directory, you'll need to migrate these to a separate backend service or adjust your frontend to fetch from external APIs.

Options:

• Create a Separate Backend: Use Node.js, Express, or any backend framework to set up API endpoints.
• Use External APIs: If possible, adjust your frontend to consume external APIs directly.

7. Update Environment Variables

Next.js uses environment variables prefixed with NEXT_PUBLIC_ for client-side variables. In React.js, create a .env file at the root of your project and prefix variables with REACT_APP_.

Example:

REACT_APP_API_URL=https://api.example.com

Access them in your code using process.env.REACT_APP_API_URL.

8. Remove Next.js Specific Configurations

Delete any Next.js specific configurations like next.config.js. Also, remove any Next.js-specific imports or packages that are no longer needed.

9. Test Your Application

Run your React.js application to ensure everything works as expected.

npm start

Go through each route and functionality to verify that the conversion was successful.

Conclusion

Converting a Next.js application to React.js involves setting up a new React project and migrating your components, adjusting routing, and handling data fetching differently. While Next.js offers many powerful features, a pure React.js application provides simplicity and flexibility, especially for projects that don't require server-side rendering.

By following this guide on how to convert Next.js to React.js, you should have a seamless transition.

Thanks for reading! If you're interested in going the other way around, check out my article on how to convert a React.js application to Next.js. For more updates on new projects or articles, follow me on Twitter: @jake_prins.

Last updated: October 1, 2023

If you're considering enhancing your React.js application with server-side rendering, improved SEO, and a better developer experience, migrating to Next.js is a great choice. In this article, I'll guide you through the process of migrating a React.js app to Next.js, ensuring a smooth transition while leveraging the powerful features that Next.js offers.

Note: If you're looking to convert a Next.js application to React.js instead, check out my other article on how to convert Next.js to React.js.

Why Migrate to Next.js?

Next.js is a React framework that provides out-of-the-box support for server-side rendering (SSR), static site generation (SSG), and easy routing, among other features. Migrating to Next.js can offer:

• Improved Performance: Through SSR and SSG, your app can deliver content faster.
• Better SEO: Server-rendered pages are more SEO-friendly.
• Simplified Routing: File-based routing system simplifies navigation setup.
• Built-in CSS Support: Easily manage styles with CSS Modules and styled-jsx.

Steps to Migrate React.js to Next.js

Let's dive into the step-by-step guide on how to migrate a React.js application to Next.js.

1. Set Up a New Next.js Application

First, create a new Next.js project. You can use the Next.js CLI to set up the project quickly:

npx create-next-app@latest my-next-app
cd my-next-app

2. Copy Public Assets

If your React app has a public directory containing assets like images or fonts, copy all the contents into the public directory of your Next.js app.

3. Install Necessary Dependencies

Copy the dependencies and devDependencies from your React app's package.json to the Next.js app's package.json. Then run:

npm install

4. Migrate Components

Copy your src/components directory from your React app to the Next.js app. Since Next.js uses the pages directory for routing, we'll handle pages separately.

5. Migrate Pages and Adjust Routing

In your React app, you might have a src directory with pages managed by React Router. In Next.js, you'll use the pages directory for routing.

Create Pages: Move your page components to the pages directory. For example, your Home.js component would become pages/index.js.

Example:

// pages/index.js
import Header from '../components/Header'

function HomePage() {
  return (
    <>
      <Header />
      <h1>Welcome to My Next.js App</h1>
    </>
  )
}

export default HomePage

6. Update Routing Logic

Since Next.js uses file-based routing, you don't need React Router. Remove React Router dependencies:

npm uninstall react-router-dom

Adjust any routing logic in your components to use Next.js's Link component.

Example:

import Link from 'next/link'

function Navigation() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  )
}

export default Navigation

7. Handle Static Assets and CSS

CSS Files: Next.js supports global CSS files in pages/_app.js.

Example:

// pages/_app.js
import '../styles/global.css'

function MyApp({ Component, pageProps }) {
  return <Component {...props} />
}

export default MyApp

CSS Modules: For component-level styling, you can use CSS Modules.

Example:

// components/Button.js
import styles from './Button.module.css'

function Button() {
  return <button className={styles.primary}>Click Me</button>
}

export default Button

8. Adjust Data Fetching Methods

Replace any data fetching in useEffect that should occur at build time or on the server with Next.js's data fetching methods.

• getStaticProps: For static generation.
• getServerSideProps: For server-side rendering.

Example using getStaticProps:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

function HomePage({ data }) {
  // Render your component using the fetched data
}

export default HomePage

9. Update Environment Variables

Next.js uses environment variables prefixed with NEXTPUBLIC for client-side variables.

Example:

NEXT_PUBLIC_API_URL=https://api.example.com

Access them in your code using process.env.NEXT_PUBLIC_API_URL.

10. Remove Unnecessary Packages

Since Next.js provides many features out of the box, you can remove packages that are no longer needed, such as:

• react-scripts
• react-router-dom
• Any custom SSR setup

11. Test Your Application

Run your Next.js application to ensure everything works as expected:

npm run dev

Navigate through your app to verify that pages load correctly, data is fetched properly, and styles are applied.

Conclusion

Migrating from React.js to Next.js can significantly enhance your application's performance and SEO capabilities. While the process involves several steps, Next.js's powerful features make it worth the effort.

By following this guide on how to migrate from React.js to Next.js, you should be able to transition smoothly. If you have any questions or encounter issues, feel free to reach out or leave a comment below.

Keywords: migrate reactjs to nextjs, migrate react to next.js, how to migrate react app to next.js

Thanks for reading! If you're interested in going the other way around, check out my article on how to convert a Next.js application to React.js. For more updates on new projects or articles, follow me on Twitter: @jake_prins.

The beginning of the story

It all started when the ChaptGPT/AI hype dominating Twitter got the best of me, and I wanted to experiment with whatever all the buzz was about. I decided to build a small project using The OpenAI API to learn more. I was careful to keep it small and manageable because I already work for Apideck, have two young children, and spend most of my free time working on universal.page. So basically, I didn’t have the time for this.

For a short period, I was blocked from progressing on universal.page due to some LUKSO contract updates, so this gave me a little window of time to experiment with AI stuff. That’s when I created TeamSmart AI, a browser extension allowing you to add different AI characters to your team and have them as sidekicks wherever you go. Within just one month, I made my first sale!

These are the steps I took I believe to have contributed most to the success of this side project.

1. Launch fast

I have developed a simple frontend application using Next.js without a backend or database (it even just utilized localstorage to store data). For rapid styling, I used TailwindCSS. I am familiar with this stack, allowing me to build UIs quickly. I released the first version in three weeks, and one week later, I made my first sale. However, I had to refund the customer due to a bug. After resolving the issue, I gained more satisfied customers. Within a month, I was able to validate the idea, which helped me decide whether to invest more time into it.

2. Build something cool

This may seem obvious, but it’s crucial to build something that people actually want. Personally, I prioritize creating a visually appealing product with a great user experience. However, quality and speed are often trade-offs, so you must choose which is more important for your project. My approach involves focusing on one feature at a time and making it exceptional before moving on to the next.

3. Share it everywhere

I submitted my product to several directories like ProductHunt, Hackernews, Indiehackers, Betalist, and others. Typically, this would generate some initial traffic, but this time was different. A surge of interest in AI has led to many AI newsletters and AI directories. I discovered a massive list of AI directories and submitted my link to all of them. I spent a full day just submitting my project on these websites. Then, some people started covering my project in newsletters, and all the other AI guys just took over. Mentions on Twitter by big names caused a little buzz on social media and caused a surge in Google searches. I don’t think this is very easy to replicate in a different time or space. It’s just a matter of riding the AI hype train.

4. Focus on SEO

I was inspired by Danny Postma’s Twitter thread on SEO and started using Ahrefs to find keywords. I generated separate pages for each AI assistant in my tool. One assistant used the Lexica API to show AI-generated images. “Lexica” was a highly searched term with low keyword difficulty. After creating a separate page with many keywords for my Lexica integration, I saw a lot of impressions on Google. Although most people just searched for the original website of Lexica, the total number of impressions became so big that the clicks to my Lexica page still outgrew the clicks to my main page.

5. Selling on Acquire.com

The product was free to use, but for a one-time $39, you could unlock more AI assistants and features. My monthly sales quickly reached 2–3K, and since I didn’t plan to focus on this project fully, I decided to list it for sale on acquire.com. After a month, it attracted a potential buyer who offered the asking price. We closed the deal and transferred assets within just three weeks.

Although the process went very smoothly, I experienced some trouble afterward. I had sold lifetime licenses and had just started an AppSumo deal. I recommended the new owner keep giving those customers access to the tool, even after they implemented a subscription-based model. However, previous customers started to lose access and reached out to me for refunds. People were really disappointed and started writing bad reviews (understandably). Next time, I will ensure that these agreements are included in the contract instead of just in the chat.

At the beginning of this year, I sold another side project and was interviewed by Andrew Gazdecki, the founder of Acquire.com. If you’re interested, you can check it out here and learn more about the process. Or check out my blog post: From Zero to Acquired: My Journey to Selling Serverless SaaS.

Important notes

If you’re a new indie hacker or developer, keep in mind that I have years of experience. I often reuse code, manage a component library, and have built many projects (even some Chrome extensions). Additionally, the hype surrounding AI certainly contributed to gaining early exposure. Newsletters and AI directories began to mention it, which resulted in some early sales.

However, don’t let that discourage you from building your own project. If you are new to this, I suggest you start small and set realistic goals when beginning your journey. It’s easy to get caught up in the success stories of indie hackers on social media. Don’t let unrealistic expectations discourage you from pursuing your dreams. Great things require patience, time, and effort.

When I first started, I made the mistake of working endlessly on a project that didn’t gain traction, had no business model, and lacked a strategy for attracting users. My following projects got more traction, but I still didn’t profit from most. However, after those experiences, it became relatively easy to spin up something new and make money from it. Experience matters, although learning from the mistakes of others can give you a massive head start.

I hope my story is inspiring to you. If you’re interested in my journey of building the leading platform for the next generation of digital collectibles, follow me on Twitter. Also, check out universal.page to learn more.

NFTs are digital assets stored on a blockchain to record ownership and authenticity. We have seen a lot of speculation around NFTs, but besides digital collectibles, we haven’t seen that much attention to the many more compelling use cases. With new NFT standards on the rise, we can expect more innovation in the space in the future. Here are some use cases to be excited about.

Gaming

I used to enjoy playing the NBA 2K MyCareer mode frequently. This mode enabled me to create my basketball player, level up their skills, modify their playing style, and earn points to buy in-game apparel. However, it required a lot of effort to progress, and when a new version of the game was released, I had to restart from the beginning. It became increasingly frustrating, mainly when 2K made it more difficult to earn rewards through gameplay and instead heavily promoted the purchase of loot boxes, virtual currency, and in-game items. Items you would lose as soon as the game's next version comes out. As a result, many players, like me, are done playing these games.

NFTs could bring a new opportunity for game developers to do this differently. They could offer players a new level of ownership and control over in-game items and have different options to monetize their games, like through royalties of items traded on open marketplaces.

The new LSP8 standard presents an exciting opportunity for game developers to enhance the gaming experience for players. With LSP8 collections, NFTs can now have token IDs that include addresses of other smart contracts. Paired with ERC725Y, a data store designed for on-chain information that can be dynamically updated, this offers developers more flexibility and options to create more advanced NFTs with new features.

Just picture having a game character, like that basketball player in MyCareer, but as an NFT 2.0. Your character would have its own smart contract with an infinite key-value store, allowing it to level up and be customized entirely on-chain. All of its progress and customizations could be stored on the smart contract. Plus, it could even own other in-game items (that are also NFTs). You could transfer or sell your character with all its progress and other owned items whenever you lose interest in the game. This could be revolutionary, especially for role-playing games that require a lot of time and grinding to level up.

NFTs could transform the gaming industry by empowering players to own their in-game assets, earn money from them, and provide game developers with new revenue streams. While there have been a lot of talks about Web3 gaming, we haven’t seen much true success stories yet. It takes a long time to develop a good game, so we have to keep an eye out on the space, but with better NFT standards and increased productivity through AI, it will be interesting to see how gaming will evolve.

LSP8 TokenID Type: Address

Traceable Verification Systems

Sustainability and ethical practices have become increasingly important, especially in the fashion industry. To address these issues effectively, traceable verification systems are necessary. NFTs offer a powerful solution to achieve this goal. They can provide a secure and transparent way to track the lifecycle of fashion products.

By tokenizing garments and accessories using NFTs, brands can create a digital passport that follows these items throughout their lifecycle. This record can be used to verify that products are indeed recycled. It can also incentivize sustainable consumer behavior, such as participating in take-back programs or choosing products made from recycled materials.

An exciting project to follow in this space is Candour.Digital, a new platform built on top of LUKSO, is leveraging the most current standards to help fashion brands to prove where & when a product is recycled.

The ERC-725 standard offers a dynamic on-chain key-value store, making it suitable for these use cases. The on-chain information gets updated over time to keep track of the current state of an item. Combined with the power of a Transaction Relayer Service, companies can offer a seamless user experience in which the user does not need to know about the technical underlies and deal with gas fees. These new offerings and standards can bring new applications that were impossible in the last few years.

https://www.circulaid.io/

Ticketing

Using NFTs for event ticketing is a great idea. By selling tickets in the form of NFTs, fans are provided with a secure digital asset that creates new opportunities for artists to connect with their fans.

Artists can easily airdrop new tickets or discounts for upcoming events. They can identify their most devoted fans, who attend all their events, and provide them with special treatment. Furthermore, they can even organize exclusive events or content solely for fans who, for example, attended a particular concert.

This use case is already something that is being used right now. For example, Avenged Sevenfold fans holding the artist’s NFTs were allowed to purchase tickets before others through Ticketmaster’s integration. This has already shown promising results, with 20% of the fan club members buying tickets with their crypto wallet.

NFTs also allow easy fan-to-fan ticket sales without a middleman. Artists could now also benefit from secondary sales, as they can enable royalties on secondary sales.

Ticketmaster taps the Flow blockchain to let event organizers issue NFTs tied to tickets | TechCrunch

Music

NFTs have the potential to revolutionize several aspects of the music industry. For instance, musicians can use NFTs as concert tickets, providing opportunities for long-term engagement with their fans. Additionally, NFTs can be utilized for token-gated music, as demonstrated by the partnership between Moonbirds and Spotify. Moonbirds holders can access the Moonbirds playlist by connecting their wallets, creating a new experience with a famous Web2 brand.

Moreover, NFTs can help upcoming and indie musicians cultivate a dedicated fan base and earn a living. For example, Sound.xyz is one platform that supports artists using web3-native music and economic tools, including NFTs, to enhance artist-fan connections and create unique listening experiences. Artists can sell limited edition NFTs of their songs, and buyers can receive special community access as perks.

As AI-generated music emerges, artists could allow their voices to be used in AI-generated songs, provided they receive royalties. NFTs 2.0 can store dynamic data and efficiently manage flexible royalties settings on-chain. The NFT 2.0 marketplace Universal Page provides a simple user interface for specifying different receiving addresses and their corresponding percentages. These flexible on-chain settings are ideal for handling AI-generated music royalties, allowing artists to “rent out” their voice while ensuring fair compensation for all creators involved.

NFTs enable artists and song creators to connect with their audience, offer rewards, and handle royalties. As AI-generated music gains popularity in this world with numerous intermediaries, NFTs could play a critical role in the future of the music industry.

Flexible Royalty Settings on Universal Page

Advertising and sponsorships

NFTs provide a new way for companies to engage with their audience and promote their brand. Companies can create branded NFTs representing their products or services, which can be used as a promotional tool or as a reward for loyal customers.

Let’s say a sports team is selling NFT tickets representing game entry. The team could partner with companies to offer sponsored NFTs that provide additional benefits to ticket holders, such as access to a VIP lounge or a meet and greet with team members.

A sports apparel company could sponsor a limited edition NFT that gives the ticket holder a discount on their products. The NFT could feature the company’s logo or branding and could be sold as a limited edition collectible. This would promote the apparel company’s products to sports fans and provide an additional revenue stream for the sports team.

The same would work for a music festival that sells NFT tickets. The festival organizers could partner with companies to offer sponsored NFTs that provide additional benefits to ticket holders, such as access to exclusive areas or merchandise. For example, a beverage company could sponsor a limited edition NFT that gives the ticket holder a free drink at the festival.

NFTs that feature branding are visible to both their owners and their connections. The emergence of Web3 social apps makes it easy to view the NFTs of your friends. In addition, if you have a personalized Universal Page showcasing all of your digital assets, anyone who visits your page can view your branded NFT, resulting in increased visibility.

Louis Vuitton to Budweiser: 6 Big Brands Breaking into NFTs | Bueno Blog

Evolving Digital Art

NFTs have revolutionized the world of Digital Art, making it easier for creators to sell their work and generating new revenue streams for struggling artists. The most well-known example of this success is digital artist Beeple, who made a record-breaking $69 million at a Christie’s auction.

With new standards on the rise and the power of AI-generated art, it will be fascinating to see what digital artists create. With ERC-725Y, contracts have an infinite key-value store to store information and new functions to update that data store.

With more flexibility and upgradability, imagine generative art that changes based on the number of holders or art that evolves after specific events. Think of a digital fashion item that varies based on the season or a music album that adds new songs over time. Think of royalty settings that adjust based on trading volume or your profile picture used in AI-generated art. The possibilities for fun mini-games, cool collectibles, or profound artworks are exciting.

Communities and communication

Many NFT communities were initially formed on Discord servers by holders of specific NFT collections, with the promise of “going to the moon.” However, as many prices have dropped and founders lost interest, these servers have become less active. Despite this, some NFT communities remain active and promising, but creating exclusive Discord servers for NFT holders seems to be just the beginning of leveraging blockchains for community building.

There is much room for growth, and leveraging Universal Profiles and their built-in permission systems could be the missing key in Web3 messaging. Just like you don’t want your email to be public for everyone, you also don’t want anyone that knows your wallet address to be able to message you. Managing permissions in your Universal Profile looks pretty suitable with a Web3 messaging protocol like XMTP.

NFTs could play a part in improving the user experience of managing these types of permissions. Instead of adding each allowed address one by one and specifying what permissions they should get, you could authorize everyone that is part of the same DAO or community. Or you could create special NFTs for your friend group to give them instant permission to send you messages.

We can expect to see much better tools for organizing Web3 communication, and it will be exciting to see the role of social dApps and chat platforms in building new communities.

“Open protocol and network for secure web3 messaging — XMTP.”

Certification and achievements

Online courses and certificates are difficult to verify as they are stored in various systems. For example, an individual can claim to have completed a course and display a badge on their LinkedIn profile, but there is no way to verify its authenticity. However, if the badge is an NFT 2.0, one can easily see who issued it and confirm its validity.

In a previous software development job, we used a gamification tool to award points and badges for achievements for completed work. It was a fun way to show and receive recognition, but unfortunately, these achievements would only be valuable in that closed system. They could not be shared with future employers. If they were NFTs, they would have retained their value even outside the organization and could have been helpful in my career progression.

Companies can now issue NFTs to their employees as digital certificates for completing courses or achieving certain milestones. These NFTs can prove an individual’s professional capabilities and be used for verification.

NFTs can also validate personal branding by representing accomplishments, endorsements, or testimonials. They can even be used just to express thoughts on specific topics. Coinbase, for instance, has launched a “Stand with Crypto NFT” free-to-mint digital asset that people can use to show their support. This NFT is not meant for trading and has no intended use other than as a commemorative item. Its purpose is to demonstrate that you are part of a growing community that has faith in the future of cryptocurrency.

Coinbase️ on Twitter

Phygitals

By establishing digital identities for physical products, creators can enable digital ownership, continuously gather their unique and singular data history, and have lasting and direct access to their owners.

Phygitals, or physical-digital hybrids, are a new type of NFT that combine physical goods with digital ownership. This could include fashion items, where the physical item is shipped to the buyer, but the ownership and authenticity are recorded on the blockchain. This opens up new possibilities for brands to create limited-edition collections authenticated through NFTs and sold as high-value collectibles. Digital fashion is an emerging trend in the NFT space. Designers create digital clothing items that can be worn in virtual environments like video games, social media, and virtual/augmented reality experiences.

For example, Nike uses NFTs to authenticate and sell limited-edition sneakers and other physical goods. This represents a new frontier for NFTs and could bring the technology into the mainstream.

Nike, RTFKT, Tiffany & Gucci Top NFT Profit Rankings: Full List

Tokenize real-world assets

As seen earlier in this article, we can make tracking the lifecycle of physical products more transparent and secure by utilizing NFT 2.0 standards. The same can be expected for tracking ownership of physical assets. This often involves many middlemen; some could soon be replaced by a trusted decentralized network that offers a transparent ledger.

However, this is a bit tricky since you’re dealing with both the transfer of the ownership (on-chain) and the physical asset. You can’t buy an NFT of a car on Universal Page and expect it to arrive at your doorstep magically. Therefore, we will always see some intermediaries involved in the transaction of physical assets. But, tracking ownership for real-world assets would be much more transparent when done on a decentralized network. It would involve fewer people (who take a cut of the transaction), making it more cost-effective. We have already seen real estate being sold using an NFT, demonstrating the potential of tokenized assets. With more flexible standards and a better on-chain reputation system, we’ll see the process of tokenized assets improving and potentially transforming how we buy and sell property.

The First NFT Home Just Sold for $175,000 | Entrepreneur

Profiles, websites & usernames

NFTs could power domains, profiles, and usernames. With Web3 social apps, you own your username and can easily switch from one app to another and bring all your data. A powerful example is the Lens Profile NFT, the main object in the Lens Protocol. The NFT contains the history of all posts, mirrors, comments, and other content you generate. Plus, it records on-chain relationships.

A more powerful example of on-chain profiles is Universal Profiles, although it is important to note that it differs from an NFT or NFT Profile. Universal Profiles are made of a collection of smart contracts that serve as your account and offer a multitude of features. Additionally, it doubles as a wallet, allowing it to own tokens and NFTs.

We’ve also seen a lot of adoption of ENS (Ethereum Name Service). This unique digital asset represents the ownership of a decentralized human-readable domain name for wallets, websites, & more.

ENS allows users to create or purchase domain names ending in .eth, which can be used to identify their cryptocurrency wallet addresses, decentralized websites, or decentralized applications (dApps). These domain names are represented as NFTs, which ensures their uniqueness, ownership, and transferability within the Ethereum ecosystem.

Another example is the Universal Page Name (UPN), an NFT that users can mint to create their personal website or NFT storefront.

This NFT uses the LSP8 standard with the token ID type `string`. This means the unique name you choose is stored inside the token ID. You fully own that name and can easily sell or transfer it. And when you do, the new owner’s Universal Profile details will appear on the customized page. This makes creating, customizing, and trading personal websites easy without any middlemen involved.

Universal Page

Digital Fashion

The fashion industry is undergoing a digital revolution that challenges traditional business models. One exciting development in digital fashion is using NFTs to create unique clothing pieces that can be owned and traded like physical items.

This opens up exciting possibilities for fashion enthusiasts — imagine owning a one-of-a-kind digital dress that can be worn in virtual reality or displayed on social media. Similarly, you could purchase a limited edition digital t-shirt from your favorite band’s online store.

While our digital lives and identities become increasingly important, it makes sense to see that people start to care more about their online appearances. Everything we care about in real life moves slowly to the virtual worlds of the web. People who use fashion to express themselves, to stand out, or to flex will also want to do that in their digital lives, and NFTs are the perfect tool for that.

The Dematerialised, an experimental NFT marketplace on LUKSO, is the space leader of Digital Fashion, working with big brands like Karl Lagerfield, RTFKT, and many more.

MCQ is Launching Its First NFT Collection on THE DEMATERIALISED

Conclusion

In conclusion, the potential of NFTs 2.0 goes far beyond just digital collectibles and art. It’s clear that with the rise of new standards like LSP8 and ERC-725, a wide range of applications and use cases are emerging. From revolutionizing the gaming industry to traceable verification systems in fashion, ticketing, music, digital art, and the tokenization of real-world assets, NFTs are paving the way for innovations. Moreover, the transformation of communities, communication, and certifications through NFTs highlights the numerous possibilities to create value and change the way we live and interact with each other in the digital world.

As the NFT space matures, I’m looking forward to witnessing the growth of these great use cases and the new ideas they inspire.

Prerequisites

• Node.js and npm installed on your machine
• A basic understanding of React and TypeScript
• An OpenAI API key — you can sign up for an account and generate an API key from the OpenAI website.

You can view my complete project by visiting TeamSmart.AI. It's a Chrome extension that lets you choose from a variety of AI assistants to aid you with your everyday tasks.

What we will build

Following this tutorial, we will use the OpenAI API to create a simple chat application like ChatGPT.

Step 1: Setting up the project

We will use the Next.js Starter Kit from Apideck to set up our project. It comes with TypeScript, TailwindCSS, and the Apideck Components library pre-installed.

1. Create a new project using the command line:

yarn create-next-app --example https://github.com/apideck-io/next-starter-kit

2. Choose your project name and navigate to your new folder. Inside, create a .env.local file at the root of your project and add the following line (replacing YOUR_OPENAI_API_KEY with your actual key):

OPENAI_API_KEY=YOUR_OPENAI_API_KEY

Step 2: Writing the API client

To not expose your OpenAI API key, we will create an API endpoint instead of making requests to the API directly from our browser. Follow these steps to set up your endpoint using a Next.js API route:

1. Locate the pages folder of your project and create a new subfolder named api.
2. Inside the apifolder, create a new TypeScript file named createMessage.ts
3. In the createMessage.ts file, we can either use the OpenAI SDK or issue an HTTP request to the OpenAI API to generate a new message for our “conversation” with the AI. We will use the direct API call in this tutorial.

Here is the code for our API route.

import { NextApiRequest, NextApiResponse } from 'next'

export default async function createMessage(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { messages } = req.body
  const apiKey = process.env.OPENAI_API_KEY
  const url = 'https://api.openai.com/v1/chat/completions'

  const body = JSON.stringify({
    messages,
    model: 'gpt-3.5-turbo',
    stream: false,
  })

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${apiKey}`,
      },
      body,
    })
    const data = await response.json()
    res.status(200).json({ data })
  } catch (error) {
    res.status(500).json({ error: error.message })
  }
}

For this example, we’re utilizing the gpt-3.5-turbo model, as it’s currently available at the time of writing. If you possess access to GPT-4, you can alter the value as necessary.

The messages value is an array that stores messages from our chat-based conversation with the AI. Each message contains both a role and content. The role can be either:

• system This is the initial prompt sent to the AI, which gives it instructions on how to behave. For example, you may use “You are ChatGPT, a language model trained by OpenAI.” or “You are a software engineer who develops software programs, web applications, and mobile applications using various programming languages and development tools.” Experimenting with different initial system messages can help you fine-tune the AI’s behavior.
• user This represents the user’s input. For example, the user could ask, “Can you provide a JavaScript function fetching the current weather?”
• assistant This is the AI’s response, which the API endpoint will return.

Step 3: Creating the messaging functions

Now that the endpoint is ready to interface with the AI, we can begin designing our user interface to facilitate interaction. To start, we’ll create the sendMessage function. Here’s how:

1. Create a new file named sendMessage.ts in the utils folder.
2. Add the following code to sendMessage.ts:

import { ChatCompletionRequestMessage } from 'openai'

export const sendMessage = async (messages: ChatCompletionRequestMessage[]) => {
  try {
    const response = await fetch('/api/createMessage', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ messages }),
    })

    return await response.json()
  } catch (error) {
    console.log(error)
  }
}

With this function in place, you can establish communication between the user interface and the AI via the API endpoint.

Now let’s setup the logic to create new messages inside a useMessages hook. Inside the utils folder, create a file named useMessages.ts and add the following code:

import { useToast } from '@apideck/components'
import { ChatCompletionRequestMessage } from 'openai'
import {
  ReactNode,
  createContext,
  useContext,
  useEffect,
  useState,
} from 'react'
import { sendMessage } from './sendMessage'

interface ContextProps {
  messages: ChatCompletionRequestMessage[]
  addMessage: (content: string) => Promise<void>
  isLoadingAnswer: boolean
}

const ChatsContext = createContext<Partial<ContextProps>>({})

export function MessagesProvider({ children }: { children: ReactNode }) {
  const { addToast } = useToast()
  const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([])
  const [isLoadingAnswer, setIsLoadingAnswer] = useState(false)

  useEffect(() => {
    const initializeChat = () => {
      const systemMessage: ChatCompletionRequestMessage = {
        role: 'system',
        content: 'You are ChatGPT, a large language model trained by OpenAI.',
      }
      const welcomeMessage: ChatCompletionRequestMessage = {
        role: 'assistant',
        content: 'Hi, How can I help you today?',
      }
      setMessages([systemMessage, welcomeMessage])
    }

    // When no messages are present, we initialize the chat the system message and the welcome message
    // We hide the system message from the user in the UI
    if (!messages?.length) {
      initializeChat()
    }
  }, [messages?.length, setMessages])

  const addMessage = async (content: string) => {
    setIsLoadingAnswer(true)
    try {
      const newMessage: ChatCompletionRequestMessage = {
        role: 'user',
        content,
      }
      const newMessages = [...messages, newMessage]

      // Add the user message to the state so we can see it immediately
      setMessages(newMessages)

      const { data } = await sendMessage(newMessages)
      const reply = data.choices[0].message

      // Add the assistant message to the state
      setMessages([...newMessages, reply])
    } catch (error) {
      // Show error when something goes wrong
      addToast({ title: 'An error occurred', type: 'error' })
    } finally {
      setIsLoadingAnswer(false)
    }
  }

  return (
    <ChatsContext.Provider value={{ messages, addMessage, isLoadingAnswer }}>
      {children}
    </ChatsContext.Provider>
  )
}

export const useMessages = () => {
  return useContext(ChatsContext) as ContextProps
}

Step 4: Implement the message UI components

Having set up our functions, we can now design UI components that will use these functions to create an interactive chat interface. Follow the steps below:

1. Create a new file called MessageForm.tsx in the components folder of your project and add the following code:

import { Button, TextArea } from '@apideck/components'
import { useState } from 'react'
import { useMessages } from 'utils/useMessages'

const MessageForm = () => {
  const [content, setContent] = useState('')
  const { addMessage } = useMessages()

  const handleSubmit = async (e: any) => {
    e?.preventDefault()
    addMessage(content)
    setContent('')
  }

  return (
    <form
      className="relative mx-auto max-w-3xl rounded-t-xl"
      onSubmit={handleSubmit}
    >
      <div className=" supports-backdrop-blur:bg-white/95 h-[130px] rounded-t-xl border-t border-l border-r border-gray-200 border-gray-500/10 bg-white p-5 backdrop-blur dark:border-gray-50/[0.06]">
        <label htmlFor="content" className="sr-only">
          Your message
        </label>
        <TextArea
          name="content"
          placeholder="Enter your message here..."
          rows={3}
          value={content}
          autoFocus
          className="border-0 !p-3 text-gray-900 shadow-none ring-1 ring-gray-300/40 backdrop-blur focus:outline-none focus:ring-gray-300/80 dark:bg-gray-800/80 dark:text-white dark:placeholder-gray-400 dark:ring-0"
          onChange={(e: any) => setContent(e.target.value)}
        />
        <div className="absolute right-8 bottom-10">
          <div className="flex space-x-3">
            <Button className="" type="submit" size="small">
              Send
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
                className="ml-1 h-4 w-4"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
                />
              </svg>
            </Button>
          </div>
        </div>
      </div>
    </form>
  )
}

export default MessageForm

Now that we have set up the message UI components, we need to create the component to render the list of messages.

2. Create a new file called MessagesList.tsx in the components folder and add the following code:

import { useMessages } from 'utils/useMessages'

const MessagesList = () => {
  const { messages, isLoadingAnswer } = useMessages()

  return (
    <div className="mx-auto max-w-3xl pt-8">
      {messages?.map((message, i) => {
        const isUser = message.role === 'user'
        if (message.role === 'system') return null
        return (
          <div
            id={`message-${i}`}
            className={`fade-up mb-4 flex ${
              isUser ? 'justify-end' : 'justify-start'
            } ${i === 1 ? 'max-w-md' : ''}`}
            key={message.content}
          >
            {!isUser && (
              <img
                src="https://www.teamsmart.ai/next-assets/team/ai.jpg"
                className="h-9 w-9 rounded-full"
                alt="avatar"
              />
            )}
            <div
              style={{ maxWidth: 'calc(100% - 45px)' }}
              className={`group relative rounded-lg px-3 py-2 ${
                isUser
                  ? 'from-primary-700 to-primary-600 mr-2 bg-gradient-to-br text-white'
                  : 'ml-2 bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'
              }`}
            >
              {message.content.trim()}
            </div>
            {isUser && (
              <img
                src="https://www.teamsmart.ai/next-assets/profile-image.png"
                className="h-9 w-9 cursor-pointer rounded-full"
                alt="avatar"
              />
            )}
          </div>
        )
      })}
      {isLoadingAnswer && (
        <div className="mb-4 flex justify-start">
          <img
            src="https://www.teamsmart.ai/next-assets/team/ai.jpg"
            className="h-9 w-9 rounded-full"
            alt="avatar"
          />
          <div className="loader relative ml-2 flex items-center justify-between space-x-1.5 rounded-full bg-gray-200 p-2.5 px-4 dark:bg-gray-800">
            <span className="block h-3 w-3 rounded-full"></span>
            <span className="block h-3 w-3 rounded-full"></span>
            <span className="block h-3 w-3 rounded-full"></span>
          </div>
        </div>
      )}
    </div>
  )
}

export default MessagesList

We do not want to show the initial system message, so if the role is system we return null. Next, we adjust the styling of the messages based on if the role is either assisten or user.

While we are waiting for a response, we show a loading element. For this loader element to animate, we need to add some custom CSS. Inside the styles folder, create a globals.css file and add the following:

.loader span {
  animation-name: bounce;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.loader span:nth-child(2) {
  animation-delay: 50ms;
}
.loader span:nth-child(3) {
  animation-delay: 150ms;
}

Make sure to import the CSS file into your _app.tsx file:

import 'styles/globals.css'
import 'styles/tailwind.css'

import { ToastProvider } from '@apideck/components'
import { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <ToastProvider>
      <Component {...pageProps} />
    </ToastProvider>
  )
}

3. We can use our message UI components in our application now that we have built them. Locate the pages directory and open index.tsx. Remove the boilerplate code in this file.

import Layout from 'components/Layout'
import MessageForm from 'components/MessageForm'
import MessagesList from 'components/MessageList'
import { NextPage } from 'next'
import { MessagesProvider } from 'utils/useMessages'

const IndexPage: NextPage = () => {
  return (
    <MessagesProvider>
      <Layout>
        <MessagesList />
        <div className="fixed bottom-0 right-0 left-0">
          <MessageForm />
        </div>
      </Layout>
    </MessagesProvider>
  )
}

export default IndexPage

We have wrapped our components with the MessageProvider so we can share the state between the components. We also added a container div to the MessageForm component, so it has a fixed position at the bottom of the page.

Step 5: Running the chat application

Nice job! We now reached the point where we could see our chat application in action. Here’s how you can test your ChatGPT application:

1. Make sure your development server is running. (yarn dev)
2. Navigate to the root URL of your application in your browser. (localhost:3000)
3. You should see the UI rendered on the screen. Type a message in the text field at the bottom and hit Send. The AI chatbot will respond to your message.

You can now engage in a conversation with your AI chatbot! Feel free to experiment with different types of messages and see how the AI responds.

Final words

Thank you for reading! The complete source code can be found here.

If you found this tutorial useful, please connect with me on Twitter or visit my personal website at jakeprins.com.

In addition, be sure to check out TeamSmart AI for my complete ChatGPT application. It’s a Chrome extension that allows different AI team members to help you with your daily tasks.

The trick is to spot these by-products and see opportunities. So, I wondered if I had created any by-products. I was working full-time and had launched multiple products I had created during nights and weekends, but none of them had made much money or gained any significant traction.

The trick is to spot these by-products and see opportunities.

I had created my own boilerplate of code that I re-used to bootstrap new projects. It was a simple React project, with all the packages I regularly used installed, and it included a couple of simple code generators. Could this be considered a by-product?

I decided to give it a try, so I bought a landing page template and set up a website. I named the project React Milkshake – it sounded cool – and used the 🥤 emoji as the logo. I also bought the reactmilkshake.com domain.

To make the product available, I connected my site to Gumroad. People could then buy the code of the boilerplate for $29.

Within a weekend, I had set up the new product and scheduled a launch on ProductHunt. This was the first time I had spent so little time on a project, and it felt really strange.

I launched and sold two items worth $58. The next day, I made another sale, bringing my total to $87 in two days. The sales would end there, but that was alright. I had earned more money with this weekend project than I had with the other projects I had launched that never made a profit.

Improving the Product

I found a project people would pay for and realized time savings were the reason. So, I decided to add features many developers need when starting new projects. I created a new version of React Milkshake, which included Firebase authentication (login, signup, reset password). I also improved the code generators, documentation, and overall look.

I sold this new version as React Milkshake Firebase and charged $49. It wasn't an instant hit, but there were some people who bought it. And, with the higher price, I got better returns.

For my next iteration, I added a database with Firebase Firestore. I created a CLI that would allow users to generate CRUD actions with views and Firestore integration. I named it React Milkshake Serverless and built it with the new framework Next.js.

Sales were slow, but I achieved better returns with a higher price point ($79).

Creating a SaaS Starter Kit

I had the idea of creating a SaaS starter kit from scratch, with everything you need, like a landing page, CMS, authentication, dashboard, admin features, and more. This eventually became Serverless SaaS.

I decided to do things differently this time. Instead of first building everything and then setting a launch date, I started with the landing page. I shared updates on Indiehackers.com and through the mailing list. By the time I launched, I had 200 people subscribed. The launch was a success, and I made $2,000 in the first two weeks! The month after, I had my best month in terms of sales: $3,600.

You can read more about my journey and the things I did before the launch here.

Selling Serverless SaaS

In the first year after launch, I spent a lot of time improving the product and releasing new updates. The following year, I didn't invest as much time. Two years after launch, I had lost most of my interest in the project and sales had decreased slightly, so I decided to put it up for sale on Acquire.com.

The process was simple. I created a listing on their website and provided all the details. I evaluated potential buyers and accepted a letter of intent (LOI). During due diligence, I shared evidence with the buyer to prove my numbers and other details. An asset purchase agreement (APA) was established, and Escrow.com was used to deposit the money. Finally, I transferred all assets and the buyer released the funds.

I was happy with the sale and the process. I had a great experience with the buyer and the team at Acquire. I can highly recommend this platform to anyone looking to sell their product.

Summary

In this article, I shared my journey from developing side-projects that barely made any money to selling a successful project on Acquire.com. I identified a by-product that people would pay for, iterated and improved it, and eventually sold it. I shared my journey with the trials and tribulations of building, launching, and selling a side project. I hope this article has been inspiring or useful to those who have read it. If you have any questions or comments, please don't hesitate to reach out to me on Twitter. And please subscribe to the mailing list to stay up to date with my latest articles.

However, not all NFT marketplaces enforce royalties. Some marketplaces even removed royalties or made them optional. This is a concerning trend, as it undermines the ability of creators to earn a continuous return on their work and could ultimately harm the growth of the NFT market.

One of the main reasons that some marketplaces are removing royalties is that they are scared to lose market share and desperately try to make their platforms more attractive to buyers. Without the added cost of royalties, buyers may presumably be more likely to purchase NFTs on these platforms. However, this approach needs to pay attention to the fact that creators are driving the popularity of NFTs.

Gifted artists should be able to create and share their work and be incentivized to do that in a way that allows them to thrive. NFT marketplaces must enforce royalties to ensure that creators are fairly compensated for their work. Without the ability to earn royalties, creators are less likely to create and sell their work using these technologies, ultimately harming the growth of the NFT market.

99.9% of all the artists disappear. That’s what happens. — Tim Ferris

Enforcing royalties helps to support the overall health of the space by ensuring that creators have a financial incentive to continue creating and supporting their work. NFT projects need fuel to make them run. It doesn’t matter if it’s from a single artist or a company of people with a roadmap who wants to deliver to their community. In either case, there needs to be fuel.

Marketplaces that Neglect Royalties

Marketplaces like sudoswap and X2Y2 are popular among traders specifically because they’re royalty-free. Existing NFT marketplaces have felt pressure to adjust so they won’t lose market share, despite the potentially catastrophic consequences for creators and the NFT market overall.

Magic Eden, the popular NFT marketplace on Solana, recently raised over 150 million dollars. While this influx of capital has its benefits, it also has drawbacks. To succeed, Magic Eden needs to grow at all costs and do everything to remain the most prominent platform on Solana. To maintain its leading position on Solana, Magic Eden decided to make royalties optional, despite anticipating backlash from the community. This decision has been criticized by many in the NFT community, who believe that enforcing royalties is essential for supporting creators and ensuring the growth of the NFT market.

LooksRare, an Ethereum NFT marketplace, recently made it optional for buyers to pay creator royalties when trading NFTs. Despite the pushback from many NFT artists and creators against the race to the bottom of rejecting royalties, LooksRare chose to let buyers opt out of paying royalties. Although they claimed to still “support creators” by sharing protocol fees, this meant that creators only received a 0.5% share of the sales price on secondary sales, paid out in the LOOKS token.

Royalties: Here to Stay?

While we are seeing many NFT marketplaces move to 0% royalties, it doesn’t mean that royalties will be a thing of the past. Many people from the industry have spoken up against these developments. The NFT community seemed to understand that royalties play an essential role in the development of the space. Prominent artists and creators are making their views known.

The NFT ecosystem would be a tiny fraction of what it is today if it weren’t for creator royalties. — Wylie Aronow, Co-Founder of Yuga Labs

These noises seem to affect how NFT marketplaces look at the situation. Top marketplace OpenSea was saying that it may follow the trend of no longer enforcing creator royalties on secondary sales. Still, after the backlash of these statements, it decided to shift.

Positive Developments in the Royalties Discussion:

• The new platform Universal Page proposed a standard for NFT 2.0 royalties, allowing creators to enforce royalties only when people sell and profit from their work but not take royalties when they sell at a loss. On universal.page creators can also set multiple receiving addresses with different percentages or fixed amounts.
• OpenSea launched a tool for on-chain enforcement of creator fees and decided to continue enforcing creator fees for collections.
• Magic Eden created an open-source Open Creator Protocol to protect royalties. New collections can launch with this protocol to protect royalties.
• Many NFT marketplaces, like Rarible, Nifty Gateway, MakersPlace, and more, created the Royalty Registry: a smart contract that enables creators to apply on-chain royalty enforcement to their work.

Conclusion

The importance of NFT royalties cannot be overstated. Without the ability to earn royalties, it’s unlikely that creators will continue to create and sell their work using blockchains, ultimately harming the growth of the space. There should be clear royalty standards, and every NFT marketplace must enforce royalties to support the creators who are driving the growth of this exciting new technology.

The removal of NFT royalties by some marketplaces has caused concern among creators. However, the recent developments in the NFT royalties discussion show that there is hope for a brighter future. Many marketplaces are listening to the community and implementing new protocols and standards to protect creators and enforce royalties. This demonstrates that a significant part of the NFT industry is committed to supporting creators and ensuring fair compensation for their work.

Current standards are too limited

Most NFTs are based on the ERC-721 standard, which makes it easy to exchange “non-fungible” tokens. Launched in 2017, the standard was used by CryptoKitties, a popular online game that was one of the first big projects that showed the potential of NFTs.

In essence, contracts using this simple standard include a base URI and incremental IDs representing individual tokens. Add the tokenID to the base URI, and you should have a URL that can be used to fetch the token’s metadata.

This allowed creators to build collections of multiple unique NFTs. The metadata is often stored on IPFS, a distributed storage network, but plenty of NFT projects just use a centralized service like Google Drive. Buyers of NFTs often don’t realize that if the creators delete or move the files, their NFT is nothing more than a pointer to an unknown location.

But this is in itself not the biggest problem with this standard. There is currently no way to validate if an NFT project is solid.

One of the most critical aspects of art is the creator, but nothing about the creators is being stored on-chain.

The only data attached to an ERC-721 contract is a name and symbol.

The collection pages on platforms like OpenSea seem rich with information, but most of this data is not coming from the smart contract of the NFT. It’s something that has been added through an input field on the platform itself, meaning it lives inside the database of that specific marketplace. NFT collections could potentially have very different information shown on other websites.

If your favorite marketplace no longer exists five years from now, all your NFT represents is a name, symbol, and ID.

Most importantly, your NFT says absolutely nothing about its creators. Although the smart contract has the owner’s public key, this key could belong to anybody and holds no information about the original creators.

The creators of an NFT, and their reputation, are an essential aspect of the value of an NFT or any kind of art. Especially when more professional designers and creators use NFTs, think of digital fashion and big brands working with well-known designers. Don’t you want your NFT to hold some information about them?

Would most paintings be as worthy if no one knew who painted them? Would you even trust if it’s real or just a scam?

Being able to buy directly from an artist with an on-chain reputation would drastically reduce the number of scams. But with current standards, all this data does not exist.

Most of the creators' profiles now live on centralized marketplaces and could vanish over time. Current platforms have evolved way faster than the underlying standards. The standards are lacking behind and are holding the industry back.

For NFTs to grow far beyond pointers to a file of a monkey picture, we might need to take a giant leap to use new standards built from the ground up and designed for the future of Web3.

Introducing NFTs 2.0

The creator of the ERC-20 standard, Fabian Vogelsteller, has developed new standards to take web3 to the next level. He started a new blockchain, LUKSO, and proposed LSP7 Digital Asset and LSP8 Identifiable Digital Asset, also referred to as NFT 2.0.

With these, NFT and token metadata inputs are very extensible. The on-chain metadata inputs could be changed, allowing NFTs to evolve over time. The contract can have multiple creators attached to it, and instead of just some public keys, these are addresses of Universal Profiles. These profiles show the face and the reputation of the original creators. The NFTs can also inform receivers of assets, making complex smart contract automation possible.

LSP7 and LSP8 are using the ERC725Y standard as their base. By using a generic data key-value store, a contract now comes with much-needed features:

• Attaching an unlimited amount of information makes the asset more customizable and unique.
• Knowing when the metadata has been altered
• Having metadata as a hash reference instead of a URL reference

This base will allow more customization and upgradability of the metadata over time. Summarized, these standards will be:

• Authentic & Verifiable Smart contracts can now verify whether a specific Universal Profile created an NFT.
• Flexible & Updatable Metadata can be updated, enabling dynamic NFTs to change certain things over time.
• Secure metadata You can now add unlimited secure metadata that can also be smart contract readable.
• Safer NFTS can only be sent to Universal Profiles or a smart contract that can work with them, preventing the lock of NFTs.

Summary

The current standards representing NFTS are limiting the industry as they lack standardization and many powering features.

ERC-721 is the most used NFT standard but is not much more than a representation of incremental tokenIDs without proper metadata or asset representation. It has no standard interaction between sender and receivers and no security measurements to ensure safe asset transfers.

NFT 2.0 is a collective name for the new token and NFT standards LSP7-DigitalAsset and LSP8-IdentifiableDigitalAsset.

They have been designed from the ground up and have new standards for flexible metadata, more secure transfers, more asset representation, and more interactive transfer.

Combining NFTs 2.0 with the use of Universal Profiles, we could now have a way to allow creators to build on-chain reputations.

NFTs 2.0 could bring the much-needed industry's much-needed innovation if it ever wants to evolve from trading profile pictures for pure speculation.

Mint your first NFT 2.0 for free

When you start with UniversalPage, you can mint a free NFT that will hold your UniversalPageName. This name will serve as an identifier for your personal website, meaning your page will be created under the subdomain: your-name.universal.page.

You can use UniversalPage to create your personalized website to showcase and sell digital assets. Or discover and collect new NFTs on the open marketplace.

The user experience of web apps has improved drastically in the last 5–10 years. Everybody uses the web to quickly book flights, make reservations, send money, schedule meetings, read the news, connect with friends, etc.

Internet companies do everything to make their web applications as fast and user-friendly as possible. You only need an internet connection to get started.

Now think of the web3 applications and summarize the steps you must take before starting. And what can go wrong along the way:

• Download a browser extension Most people start with installing the Metamask browser extension.
• Create a wallet Write down 12 words that you need to keep safe. “Lose your keys, and you lose your funds” - a scary message for newcomers.
• Sign up on a crypto exchange This usually requires KYC verification, which could take a couple of days to complete. Not something you want to do if you just want to try out web3. You have to be highly motivated to go through this process.
• Deposit money If everything goes well, you can now deposit some money into your account. If you don’t have a credit card, you might need a wire transfer, which could take a couple of days.
• Buy tokens Many days later, you can finally buy some ether (or another native token) needed to cover the transaction fees (gas) for interacting with the blockchain.
• Send tokens to your wallet Now you need to send that ether to your wallet. This can go wrong; if it does, you might not be willing to give web3 another try anytime soon. You probably also get charged for that transaction, and with high gas fees, this could mean you end up with much less ether in your wallet than you anticipated.
• Make a transaction Finally, after your ether has arrived in your wallet, you can try to do a transaction. Maybe you want to buy an NFT, but you don’t have enough ether to cover the gas fees because you didn’t expect the transaction fees to be that high. Now you need to go back to the crypto exchange, buy more ether, etc.

A lot of effort must be spent before making your first transaction on a blockchain. Although crypto adoption seems to grow massively, it’s mostly still the early-adopter and tech-savvy people willing to go through this process.

Adoption vs. Speculation

Although it’s estimated that almost 1 of 5 adults in the US owns crypto, the number of people who have transacted with their own crypto wallet is likely only a fraction. A big group of crypto buyers is only involved in speculation and never gets their crypto off exchanges.

The benefits must be clear for web3 to get more widely adopted, and the initial onboarding needs to become way more effortless.

The steps you must go through to make your first interaction with a decentralized application are just too much of a hassle for the regular person. Every action the user needs to take increases the change they give up.

People expect fast and easy-to-use applications, and there is no reason to make an exception for applications powered by a blockchain.

Improving UX with Blockchain Accounts

We can not continue with the industry's current standards to solve the onboarding problem.

The user experience needs to be better for wider adoption ever to happen.

Fabian Vogelsteller, once a lead developer at the Ethereum foundation and the creator of the ERC-20 standard, has been working on solutions for the most important problems of the web3 experience. He started LUKSO, a new EVM chain much like Ethereum 2.0, and with his team, developed new standards that could help the industry forward. Potentially the most impactful one is Universal Profiles: smart contract-based accounts.

A Universal Profile (often called UP) can serve as your wallet and the public profile you use to interact with decentralized apps. They provide the flexibility needed to create better user experiences that key-based wallets like Metamask do not.

A Universal Profile can:

• hold funds (crypto/NFTs)
• interact with any address or contract
• have any information attached

Although the profile can be created like any other web profile, much more is under the hood. A Universal Profile contains three smart contracts that work together:

• The ERC725Account is a smart contract that contains some specific ERC725Y keys that describe the profile. This standard represents the core account contract, allowing the profile to interact with any address or smart contract on the blockchain.
• The Key Manager is a smart contract attached to an ERC725Account and can act as the profile owner. Permissions for an address are stored inside the key-value store of the ERC725Account contract, and the Key Manager can read those permissions and perform a transaction or restrict access. It also allows relay transactions, enabling third parties to pay a user’s transaction fees (GAS). This can solve the issue of losing all your funds when you lose your keys. You can now have a backup account that you can give specific permissions. You can also permit platforms to relay a transaction for you, meaning they can cover the gas fees. If a platform makes money, with a subscription model, for example, it can easily cover the gas fees for its users. This solves the issue of first needing to go to a centralized exchange. LUKSO will subsidize early adopters by running a public relay service, allowing anyone to interact with the LUKSO blockchain without complexity.
• Universal Receiver Delegate. This contract knows incoming transactions and handles those incoming value transfers by registering the data keys representing them. Your Universal Profile will be updated directly when it receives new tokens or NFTs, so you are always aware of what tokens you own. It can execute any custom logic. For example: - reverse all receiving tokens - reverse only the tokens that are not verified - automatically selling all incoming tokens directly through a decentralized exchange

LSP0 ERC725 Account overview (from the LUKSO documentation)

A platform-independent profile

A Universal Profile is an open standard and operates platform-independent. Consider current web2 accounts' limitations, like your Twitter profile. Going to a different social platform means you must build your following and reputation from scratch. You can not take all your Twitter data with you. It’s also not your data. You don’t own that account, you are renting it. The data lives inside the company's database and is controlled by them.

With Universal profiles, you own your data, and you can give platforms permission to access (parts of) it. If you don’t like the platform anymore, you can go to a competitor and take all your data with you. This puts users back in control and improves the user experience. With the click of a button, you can connect your profile to an app, and all your data is right there.

Summary

Web3 can give great benefits to people on the internet. From interacting with defi-protocols to gaining ownership over digital items to decentralized social networks that give back control and ownership to creators. It can improve the user experience because people only need to connect their wallet/profile and have all their data and belongings available.

But for web3 to get further adoption and see more people use blockchain applications (instead of only speculating on the price of tokens), we need a more frictionless onboarding experience and easy-to-use apps that demonstrate the benefits for the users.

There are solutions in the making, and Universal Profiles is one of them that has a lot of potentials. Initially available on Lukso, a new blockchain with a set of tools and standards for developers to take the current state of web3 to the next level.

Although you still need to download a browser extension, everything after that is way better than the current state of crypto wallets.

You can already experience the ease of creating a UP by downloading the browser extension and creating your profile.

You can mint your first NFT for free on Universal Page, the first NFT marketplace on LUKSO, which also allows you to turn your Universal Profile into a customizable website where you can showcase and sell digital assets.

I have made and sold a React boilerplate before, React Milkshake. In the week after launching React Milkshake I made just 29 dollars. I, later on, created upgraded versions of the boilerplate. Every new version sold a bit better than the previous one, but with my completely new project Serverless SaaS I have made more in one week than with all the previous projects combined in a year.

This didn’t just happen because I just got luckier this time. Here is what I did differently.

Landing page before product building

The first mistake I made in the previous projects was working by myself until it was time to launch. This meant I didn’t have an audience.

Inspired by the #BuildInPublic movement, I decided for my new project to first build the landing page and open up a mailing list so people could subscribe and follow the progress of me building the product. Every now and then I shared some updates and slowly grew the mailing list to over 100 people that were sincerely interested in what I was making.

Blogging

In the past, I had written some articles on Medium before, but I decided to at least write one or two new blog posts every month. In total, I have at least 10 new blog posts that are related to some of the technologies that are being used in Serverless SaaS. Most of them are tutorials like How to setup Next.js with Tailwind or How to implement Netlify CMS with Next.js, but also a series called stack choices in which I compare different frameworks or technologies with each other as Angular vs React vs Vue vs Svelte.

Writing these blog posts had multiple purposes and ended up with benefits:

• Learned a lot about these subjects
• Provided value for other people learning about these subject
• Earned some money with the Medium Partner Program
• Gave me the ability to drop a link to my new project
• Gave me the ability to drop a link to my personal site and Twitter
• Increased my followings on Medium

The people who read my blog posts could also be future customers because the starter-kit is mainly for developers (or people who work with developers).

Mailing list

This time I had built up a mailing list with around 100 subscribers, all with people who were interested in the boilerplate. Around 50% opened the emails I had to send and around 30% clicked the links to the site. This list is still growing because I still allow people to sign up to get regular updates.

Besides that, I already had a personal mailing list of people who had signed up for previous products I have to build like codestash, makermove, and raterfox.

Because I started blogging more I updated my personal site and also added a signup field for this personal mailing list to stay informed about blog posts or product updates. In total, I had around 1000 people on this list to send out an announcement, but just 20% of that list opened the email and only 2.5% clicked the link. Those numbers are not great, but most of these subscribers come from raterfox.com, a social platform for entertainment, which is clearly not my target audience.

Twitter

Twitter is a great platform for talking in public about the process and updates on your products. I wasn’t very active on Twitter and mainly used it to stay informed about tech-related stuff. I decided to be more active and did manage to gain some more Twitter followers. I think the slow growth is caused mostly by being more active on not just Twitter, but also on Indie Hackers and mentioning my handle in blog posts.

With the current 581 followers, I do not believe this had a very big impact on my launch. Twitter seems great for people with a couple of thousands of followers, but with < 1k followers it sometimes feels like you are talking to a black hole of nothing.

I still think it’s a great way to share your work and be reachable by others. Some people started to DM me with questions about the boilerplate. This was already a good sign. Also, people told me they were excited about the upcoming launch, even better! Besides that, someone reached out to say my guides online were really helpful, which is always great to hear.

Building a better product

The first boilerplate I had build, React Milkshake, was a bit of an experiment. I was using it myself and wasn’t sure if other people were going to pay for it. It was very basic and doesn’t have a lot of features when it launched, but the fact that people started to buy it was super exciting for me. It proved that people are willing to pay money for a starter-kit that helped them save time.

For my next project, Serverless SaaS, I decided to spend more time on it and take it to the next level. I had some proof of the market, but the product needed to provide more value.

Most Indiehackers and developers I met online were building SaaS apps. I also had some ideas for building a SaaS, so a boilerplate that could help me build new SaaS apps faster was very helpful. If the boilerplate wouldn’t sell, I could still use it myself. So I decided to implement multiple SaaS features, like a billing integration with Stripe, and market the product as a way to build SaaS apps faster.

This would be more aligned with the need for most of my target audience and also allows me to ask for a higher price. It provides much more value than my other boilerplates and people are also more willing to pay for products that help them save time or make money. This project could potentially do both.

Instead of rushing to market and going with a full-on MVP approach, I figured I should take my time and craft a product to be proud of. After that, I could soft launch it as “Early Access”, so I could ask my first customers for feedback and improve the product while it’s being used by actual paying customers. In this soft launch period, I made more money than I did in the last year of my old project, so I guess I’m doing something right.

Conclusion

After years of indie hacking, I have learned a lot of valuable lessons. Looking back at the months leading to the “soft” launch of my new product, I can tell that certain activities will highly increase your chances of a successful launch.

Building in public, by sharing your progress and thoughts on social platforms, could definitely help a lot.

Taking time to write articles and provide value to others helps you in building an audience and to connect with people that might end up being a customer.

Also, don’t rush the process of building a product. It can be helpful to launch fast and validate your idea as quickly as possible, but if you want to provide real value that could mean you need to put in some extra time. Once you have seen some proof of evidence that people are willing to pay for your product I think it’s good to not rush your project. Don’t put too much pressure on yourself. But, when you think that MVP is ready, just ship it.

Thanks for reading! You can find me on Twitter (@jake_prins) or read more at jakeprins.com/blog.

When you have a great idea and start working on it from scratch, you feel a rush of excitement. It’s great to work on an interesting idea, but instead of focusing on what makes your product unique, you first need to put in the hours to work on things that are less exciting: configuring a project, building authentication flows, integrating payments, building forms, etc.

If you want to launch faster, there are some things you might want to consider. You probably want to use a web framework to increase development speed. Nobody builds their SaaS with plain Ruby code. You’d much rather use a framework like Rails. And the same goes for styling your application. Instead of writing all the CSS yourself, you could use a framework like Bootstrap, Material, or Tailwind. But if you really want to save a lot of time, you should start with a SaaS boilerplate.

A SaaS boilerplate includes a lot of functionalities that cost a lot of time to build out yourself. Think about authentication or billing. These are things that every SaaS needs to have, so why build it all yourself?

You should launch your SaaS fast so you can get feedback as soon as possible. To do that, starting out with a boilerplate/starter kit can save you tons of time. Here is a list of seven boilerplates that could help you build your SaaS faster.

Serverless SaaS

The Serverless SaaS boilerplate is the perfect starting point for your next React app. It’s built with TypeScript, Next.js, Tailwind, and Firebase. You can tap into user authentication, payments with Stripe, teams, and more with zero effort.

Going serverless is a great way of cutting costs because the pay-as-you-go pricing model means you can start free and only pay when your startup gets real traction. You also don’t have to worry about scaling issues. With Serverless platforms you are outsourcing a lot of responsibilities which allows you to move quicker.

That makes this starter kit great for solo developers and small teams who want to launch something quickly without spending money.

Source: https://serverless.page/

Nextless.js

Nextless.js is a React SaaS Boilerplate that helps developers build scalable and production-ready SaaS products. It is a full-stack solution that includes all the essential features such as Authentication, Stripe Payment, Team Collaboration and Multi-tenancy, Dashboard, Landing pages, Emails, and more. The boilerplate is highly customizable and extensible using a layered architecture.

The entire codebase is written in TypeScript. The frontend is built with Next.js, React, and Tailwind CSS, while the backend is a Serverless Rest API. Additionally, the full-stack application can be easily deployed to AWS. It was created by a developer for developers to provide the best possible developer experience. Therefore, it comes with complete documentation, and email support to help you in the journey to build your SaaS product.

Nextless.js is the ideal boilerplate to launch your SaaS. With Nextless.js, you can create and deploy your SaaS product with ease, allowing you to focus on your business while saving time on development.

Source: https://nextlessjs.com

Jumpstart

Jumpstart is a great starter kit for your next Ruby on Rails app. You can skip the boilerplate set up and build your Rails app faster. It handles all the stuff you need like a user authentication system and even background processing. It also has very good documentation. You can even try out a lite version that is available for free on Github.

Source: https://jumpstartrails.com

Laravel Spark

Laravel Spark is a Laravel package that is built by Taylor Otwell, the creator of Laravel. An amazing project to help you build your next great product with PHP. It provides a lot of scaffolding features so you don’t have to code everything yourself. It also has the features that every SaaS business needs, like (two-factor) authentication, subscription billing, and invoices.

Source: https://spark.laravel.com/

Gravity

With Gravity, you can build a Node.js and React SaaS app at warp speed. It comes with a lot of features and pre-built components to get you up and running quickly. It even has a built-in user-onboarding flow feedback widget.

Source: https://usegravity.app

Sjabloon

Sjabloon is a modern Ruby on Rails SaaS starter kit that also includes all the SaaS features like authentication and payments with Stripe, but also comes with a huge UI components library that is built with Tailwind, the rising CSS framework. This allows you to focus on your core product right from the start. Just like Jumpstart, it also has a lite version that is available for free on Github.

Source: https://www.getsjabloon.com/

Wave

Voyager is a popular Laravel Admin Package and Wave is a starter kit built on top of both Laravel and Voyager. You can install this starter-kit on your own server and customize it to fit your needs. Wave integrates with both Stripe or Braintree and is well documented. It also has theme support for three different starter themes. You can choose from Bootstrap, UIKit, or Tailwind. Wave also checks all the boxes for all the other SaaS features so it will much likely speed up your development time when crafting a SaaS from scratch.

Source: https://wave.devdojo.com

Thanks for reading! I hope you find these helpful.

If you’re starting a new React project, you might want to consider Next.js and Netlify CMS. In this article, we take a look at why this would be a great choice and walk through the process of setting up a new project using these technologies.

Why Next.js?

As I stated in a previous article:

“There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.

Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code-splitting, pre-rendering for performance, and SEO or server-side rendering?

To build a complete React application, you need more than CRA provides you with. You can save yourself some time by using Next.js, a React framework that provides a solution to all of these problems.”

If you want to read more about CRA vs. Next.js, check out Stack choices: Create React App vs Next.js.

Why Netlify CMS?

Netlify CMS is an open-source Git-based content management system. It is based on client-side JavaScript and handles content updates directly in Git. Because all content is just stored in your Git repository, you don’t need to have anything hosted on a server. It’s completely free and a great fit to combine with Next.js to build landing pages or blogs that are manageable through a nice UI.

Let’s Begin

Let’s begin building our landing page with some basic text to get familiar with Netlify CMS. You can find the source code of this part of the tutorial on GitHub or check out serverless.page for a complete boilerplate that also includes features like authentication and billing.

Set up your project

You can start by creating a new Next.js project with npx create-next-app. In this example, we are going to use TypeScript. You can follow this tutorial on how to set up Next.js with Typescript.

Using Markdown Files for Our Content

Netlify CMS works with markdown files, and it’s a great way to manage the content of your landing page or blog. Let’s begin by creating a markdown file that will have some data we want to show on our home screen.

Make a content directory that will hold all our markdown files. Next, create a pages directory and a markdown file called content/pages/home.md. This file will hold the data that we want to show on our home page. Let’s start by adding a title, description, and image for the “hero” section of our landing page:

---
hero_title: Build a SaaS faster with React
hero_description: Serverless SaaS is aiming to be the perfect starting point for your next React app to build full-stack SaaS applications. Visit serverless.page for more info.
---

Next, we need to tell webpack how to load markdown files. Let’s use frontmatter-markdown-loader for this. Start by installing that package as a dev dependency:

yarn add frontmatter-markdown-loader -D

Next, create a new next.config.js file at the root of your project with the following content:

Create the home page

Cool, now let’s add some code to the index page to make it our home page.

In pages/index.tsx, add the following:

Let’s have a look at what’s going on here. The most important part is the exported getStaticProps function. If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

On our page, we import our markdown file called home.md and pass it a content prop to our component. Our home page can now use the hero_title and hero_description attributes of the markdown file.

Let’s try it out and see if it’s working:

yarn dev

You should see your amazing hero section, ready to be styled and managed with your upcoming CMS.

Implement Netlify CMS

There are different ways to add Netlify CMS to your project. We are going to use the official npm package:

yarn add netlify-cms-app

Add the configuration

Before we can initialize our CMS, we need to create a config file. Create a cms directory at the root of your project and paste the following configuration to your cms/config.js:

export default {
  cms_manual_init: true,
  backend: {
    name: 'github',
    repo: 'yourname/your-github-repo-name',
    branch: 'main',
  },
  media_folder: 'public/img',
  public_folder: 'img',
  collections: [
    {
      name: 'pages',
      label: 'Pages',
      files: [
        {
          label: 'Home',
          name: 'home',
          file: 'content/pages/home.md',
          fields: [
            {
              label: 'Hero Title',
              name: 'hero_title',
              widget: 'string',
            },
            {
              label: 'Hero Description',
              name: 'hero_description',
              widget: 'markdown',
            },
          ],
        },
      ],
    },
  ],
}

Netlify CMS has different options on how to handle authentication. We are going to use this config file to tell Netlify CMS that we want to use the GitHub for this. For repositories stored on GitHub, the github back end allows CMS users to log in directly with their GitHub account. Note that all users must have push access to their content repository for this to work.

If you haven’t done already, now would be a good time to create your repository on GitHub, add the name of your repo to the config file, and push your code to GitHub. Go ahead — I’ll wait.

Good, but before we move on, let’s take a look at the most important setting of our configuration: the collections. This determines how content types and editor fields in the UI generate files and content in your repository.

Inside collections, we create a pages collection that has some settings for the home page. For now, we only added the hero_title and hero_description fields. You can set which widget to use for the given property.

You can read about all other configuration options in the documentation.

Initialize the CMS

Next, let’s create an admin page for our CMS. Add the following code to pages/admin.tsx:

import dynamic from 'next/dynamic'
import config from '../cms/config'

const CMS = dynamic(
  () =>
    import('netlify-cms-app').then((cms) => {
      cms.init({ config })
    }),
  { ssr: false, loading: () => <p>Loading...</p> }
)

const AdminPage: React.FC = () => {
  return <CMS />
}

export default AdminPage

Now you should be able to navigate to http://localhost:3000/admin and see a GitHub login button. Hit the button and see your nice new CMS!

Try it out

Cool, now try it out! Select “Home” and you will see the edit page. You can edit the hero_title and hero_description properties and click the publish button. When you publish, Netlify CMS is making a commit to your repository with the changes you just made. You can take a look at the last commit after you have published some changes.

Now, all you have to do is git pull to get those changes locally and navigate back to http://localhost:3000/. You will see that the home page contains your changes. Sweet!

Adding Images

Most hero sections contain a pretty image. Let’s use the image widget to add an image to our hero section. Go to your cms/config.js file and add the following object to the fields array:

{
  label: 'Hero Image',
  name: 'hero_image',
  widget: 'image'
}

Next, we could simply add an image to our public/img folder and add it to our home.md, but to demonstrate how Netlify CMS works, we are going to use the CMS to do it.

First, we need to upload an image to our integrated media library. On the dashboard of the CMS, click the “Media” link in the top navbar and upload an image. After that, navigate to the edit screen of the home page.

You should now see the added hero_image field with a button that says, “Choose an image.” You can now select your uploaded image and publish the changes.

Great, we should now have a new commit to our repo with the new changes. If our application was already in production, we could see the changes live, but since we want to see these changes locally, we need to first pull them from GitHub.

After you have run git pull, there is really only one thing left to do, which is adding the image to our home page:

...
<img src={attributes.hero_image} alt='hero image' />
...

Now, run yarn dev and go to http://localhost:3000/ to see your added image!

Conclusion

Netlify CMS is a very useful library you can add to your Next.js apps. It’s just a client-side React application, and it uses Git to store content in your own repository. This has some nice benefits: You don’t need to host your CMS separately and it fits perfectly in your Git workflow. This is great for managing the content of a landing page or blog post.

If you are looking for a complete boilerplate, check out serverless.page.

Next Steps

We have covered a lot in this tutorial, but we have only seen the basics of how Netlify CMS works in a Next.js application. There is a lot more we can do! Stay tuned for upcoming articles to continue our work with:

• A blog
• More widgets for managing content
• Styling and CMS previews
• Customizing with additional configuration settings

View the source code of this tutorial on GitHub.

Thanks for reading!

Secondly, 18 months after the 1.0 release, the Tailwind team released v2.0 of their CSS framework. This new update included lots of improvements like a new color palette and dark mode support.

Using the latest version of Next.js with Tailwind CSS is a very powerful combination to create and style web applications. Let’s walk through the steps of setting a new project up.

Start a New Next.js Project

Assuming you have installed Yarn, open your terminal and run yarn create next-app in your projects folder.

You will get prompted with the following message:

What is your project named?

Fill in a name, hit enter, and wait until your project is ready. Then, type cd <your-project-name> to make sure you are inside that directory where you can run yarn dev to start the development server. You should now have your new Next.js 10 project up and running.

Install Tailwind and Its Dependencies

Tailwind CSS is a plugin built on PostCSS, a tool for transforming CSS with JavaScript. The v2.0 has been updated for the latest PostCSS release, which requires installing postcss and autoprefixer as peer dependencies alongside Tailwind itself.

Add Tailwind and install PostCSS as well as autoprefixer using npm or yarn:

yarn add tailwindcss postcss autoprefixer

Create Config Files

We need to add a tailwind.config.js and a postcss.config.js file to the root of our application. Use the following command to set this up:

npx tailwindcss init -p

This will create a tailwind.config.js file at the root of your project:

Learn more about configuring Tailwind in the configuration documentation.

It will also create a postcss.config.js file that includes tailwindcss and autoprefixer configured:

Import the CSS

Let’s create a styles folder and import Tailwind CSS from a CSS file:

touch styles/tailwind.css

Inside tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

To add global CSS to a Next.js app, we need to override the default App component. With Next.js 10, you should already have _app.js inside your pages folder. Now import the stylesheet we created:

import '../styles/globals.css'
import '../styles/tailwind.css';export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Cool, now we are ready to add some Tailwind CSS magic to our home page. Go to /pages/index.js (or /pages/index.tsx if you use TypeScript) and add some elements with Tailwind CSS classes. For example:

Run yarn dev to see your app on http://localhost:3000 in your browser.

Configure PurgeCSS

One problem with Tailwind CSS is the large file size, but PurgeCSS can fix this. PurgeCSS reduces the file size by scanning your HTML and removing any classes that aren’t used. We only want this in production because if we are developing, we want to be able to use any Tailwind CSS class without running the build process.

Now with Tailwind CSS v2, PurgeCSS is already included. All you have to do is update the tailwind.config.js file so Tailwind can tree-shake unused styles in production builds. Update your file like this:

For now, we check all of our code inside .js, .jsx, .ts or .tsx files that live in either the pages/ or components/ folder. If you plan to add HTML in other folders like containers/ or something, make sure you add that folder to this configuration file.

You can read the guide from Tailwind on optimizing for production to learn more about tree-shaking unused styles for best performance.

Conclusion

Now we are ready to work with the latest versions of Next.js and Tailwind CSS without having to worry about bundle sizes!

That’s it! Thanks for reading. I hope it was helpful.

To follow along, you should have an existing project. You can follow these other tutorials on Better Programming to set your project up:

• Start your new React project with Next.js and TypeScript
• Set Up Next.js With Tailwind CSS
• Set Up Next.js With Eslint and Prettier

Overview

In this tutorial, we are going to implement the following things:

• Implement a login, sign up, and reset password form.
• Store additional user data in a Firestore DB and fetch this data whenever the user logs in..
• Created a useAuth hook and use the Context API to provide the user data to all our components.
• Show a loading spinner icon whenever we are fetching data.
• Show error messages whenever something goes wrong.
• Created a hook to redirect the user when entering an authenticated and not being logged in.
• Create a logout button.

Create the Login and Sign Up Pages

Let’s start by setting up our authentication pages and make sure we can navigate between these in our app.

Create a file /pages/signup.tsx:

Let’s do the same for out Login page (/pages/login.tsx) and make sure that we can navigate between the two.

If you haven’t done it yet, start your server with yarn dev and navigate to /login in your browser to test if the page works.

Create the Forms

Now that we have our pages, let’s create the actual sign up and login forms. A great library for handling forms in React is react-hook-form. It helps you built performant, flexible, and extensible forms with easy-to-use validation. Let's install it first:

yarn add react-hook-form

Now we can create our sign up form:

Now import the SignUpForm component inside pages/signup.tsx and Replace the "todo" comment with the just created <SignUpForm />.

You can test the form by submitting the form and checking the logs in the console. It should show you an object that looks like this:

{
  name: Jake,
  email: jake@prins.com,
  password: secretpassword,
}

Also, try out if the validations are working. All fields should be required. The email should be validated to have the right format, and the password should at least be 6 characters long.

We are doing great, let’s do the same with the login form.

Create /components/forms/LoginForm.tsx and copy and paste your sign up form code. Change the name to LoginForm and remove the "name" input, because we only need email and password to log in. Also, adjust the LoginData interface

Your form should look like this:

Create a Firebase Project

Now that we have our forms ready, we need to integrate them with Firebase. Let’s start by setting up a Firebase Project.

First, we need to create a Firebase account. Go to https://firebase.google.com/, click the “Get started” button, and follow the instructions to create your project.

Once your project is created, you should register your app inside the Firebase console. From the project overview page, click the web icon to add Firebase to your web application. Once created, you will receive your firebase config, which should look something like this:

const firebaseConfig = {
  apiKey: 'xxxx',
  authDomain: 'your-project-name.firebaseapp.com',
  databaseURL: '<https://your-project-name.firebaseio.com>',
  projectId: 'your-project-name',
  storageBucket: 'your-project-name.appspot.com',
  messagingSenderId: 'xxx',
  appId: 'xxx',
  measurementId: 'G-xxx',
}

We should now activate the sign-up methods that we would like to add to our app. Navigate to Authentication and start by activating the Email/password method.

Add Firestore (optional)

If you want to save additional information during sign up, like a username or full name, you need to set up a database to save that data. Cloud Firestore is a flexible, scalable database from Firebase. It offers seamless integration with Firebase and other Google Cloud Platform products, like Cloud Functions. And just like Firebase, it starts completely free. Only when your application really starts to scale, you might exceed the free plan, but even then you only pay for what you use. A very interesting price model if you don’t want to spend a lot (or any) money when you are just starting out.

If you want to setup Firestore then navigate to Database and click the first Create database button to add Cloud Firestore to your project. Select the option to start in test mode. We will worry about the Firestore rules later.

Implement Firebase in Your Project

We are now ready to implement Firebase in our project.

First, install Firebase:

yarn add firebase

We need the save our Firebase configuration to some environment variables.

Next.js comes with built-in support for environment variables, which allows you to use .env.local to load environment variables and expose environment variables to the browser.

Go to your .env.local file (or create it if it's not there yet). Then, past in the example below and change the dummy data with your own Firebase credentials.

NEXT_PUBLIC_FIREBASE_API_KEY="yourapikey"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="yourappname.firebaseapp.com"
NEXT_PUBLIC_FIREBASE_DATABASE_URL="<https://appname.firebaseio.com>"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="yourappname"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="yourappname.appspot.com"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="yoursenderid"
NEXT_PUBLIC_FIREBASE_APP_ID="yourappid"
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="yourmeasurementid"

Only if you are on a Next.js version lower then 9.4 you should create a next.config.ts file and export your environment variables yourself.

Great, we can now access our data like this: process.env.NEXT_PUBLIC_FIREBASE_API_KEY. Double-check if .env.local is added to your .gitignore, so you don't accidentally commit this data. Also keep in mind that when you deploy your application, you first need to set your production environment variables. When deploying on Vercel you can configure secrets in the Environment Variables section of the project in the Vercel dashboard.

Next up, create a file /config/firebase.ts and add your configuration.

In this file, we first declare our Firebase configuration and then initialize Firebase in our project with firebase.initializeApp(firebaseConfig).

As you can see, we also exporting some functions that we are going to need when we’re developing our application.

Sign Up

Now that we are ready to use Firebase in our project, let’s go to our SignUpForm component and start by creating our signUp function.

...
import { auth } from 'config/firebase';
...
const signUp = ({ name, email, password }) => {
 return auth
  .createUserWithEmailAndPassword(email, password)
  .then((response) => {
   console.log(response)
  })
  .catch((error) => {
   return { error };
  });
};

Now you can try out your form:

const onSubmit = (data: SignUpData) => {
  return signUp(data).then((user) => {
    console.log(user)
  })
}

If you now try out the form, you will sign up for your firebase project. Go to your Firebase console, and go to the Authentication overview. You should see the submitted data here.

Amazing! With just those couple of lines, you built a sign-up form!

That’s great, but what happens to the name property? Well, if we want to store additional data, we also want to create the user in our Firestore database. So let’s create a function that creates the user document in our database and make sure that the UID of the record is the same.

...
import { auth } from 'config/firebase';
...

const createUser = (user) => {
 return db
  .collection('users')
  .doc(user.uid)
  .set(user)
  .then(() => {
   console.log("Success")
  })
  .catch((error) => {
   console.log(error)
  });
};

We can now call this function as soon as the user has successfully signed up. Go ahead and update your signUp function:

const signUp = ({ name, email, password }) => {
  return auth
    .createUserWithEmailAndPassword(email, password)
    .then((response) => {
      return createUser({ uid: response.user.uid, email, name })
    })
    .catch((error) => {
      return { error }
    })
}

If you now try again, you should get an error message, because you cannot sign up twice with the same email address. Make sure you have deleted the first entry in your Firebase console and then try again (or try with a different email).

After submitting the sign-up form, go and check inside Authentication and Database in the Firebase console to see if both records are created.

Great, you should now have a working sign up form!

Handle state

Based on the success response we can now redirect the user to a different route after they signed up, but the only problem is that we are going to lose our state. On the redirected page, we still need to be able to tell if the user is logged in. We also want to use the data of the current user in multiple places across our application.

At this point, we need to think about the global state. We could use a state management library like Redux, but that also introduces a lot of complexity and isn’t always what you want. Especially now that React has Context and Hooks, we don’t really need a state management library at this point.

Create an Authentication Provider

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Let’s start by creating our useAuthProvider hook and move our signUp and createUser functions to this hook. We also set the user state after success or error with useState.

Create a file called hooks/useAuth and add the following code:

Now let’s use Context to create a Provider. Add the following code above the code you just placed in hooks/useAuth.tsx

Great — now wrap your AppComponent with this provider so we use this useAuth hook everywhere in our app. In your _app.tsx:

import { AppProps } from 'next/app'
import { AuthProvider } from 'hooks/useAuth'

export default function MyApp({ Component, pageProps }: AppProps): any {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  )
}

Let’s also make a page that we can redirect to if we are successfully logged in: pages/dashboard.tsx.

Cool, now let’s try it out! If you want to try again with the same email then first delete your user data from Firebase before you submit the form (or use a different email). If everything is okay you should now be redirected to the dashboard page.

Noice! This is starting to look more like it. Let’s use our momentum and keep going.

Login

Let’s create our login feature. Inside useAuth.tsx add the following function.

const signIn = ({ email, password }) => {
  return auth
    .signInWithEmailAndPassword(email, password)
    .then((response) => {
      setUser(response.user)
      return response.user
    })
    .catch((error) => {
      return { error }
    })
}

Make sure you export it.

...
return { user, signUp, signIn };
...

Now inside LoginForm.tsx call that function on submit:

...
const LoginForm: React.FC = () => {
 const { register, errors, handleSubmit } = useForm();
 const auth = useAuth();
 const router = useRouter();const onSubmit = (data: LoginData) => {
  return auth.signIn(data).then(() => {
   router.push('/dashboard');
  });
 };
 ...

Cool, now let’s try if this works.

You should now be able to log in, accept we are missing the name. This is because the name is not coming from Firebase Authentication, but is stored in our Firestore database. We need to listen to the auth state change and get the data from the DB.

Inside the useAuthProvider hook add this function:

const getUserAdditionalData = (user: firebase.User) => {
  return db
    .collection('users')
    .doc(user.uid)
    .get()
    .then((userData) => {
      if (userData.data()) {
        setUser(userData.data())
      }
    })
}

Then, call this function after a successful sign-in request.

const signIn = ({ email, password }) => {
  return auth
    .signInWithEmailAndPassword(email, password)
    .then((response) => {
      setUser(response.user)
      getUserAdditionalData(user)
      return response.user
    })
    .catch((error) => {
      return { error }
    })
}

Great, now this should fix our problem. But it does not fix everything, because Firebase also helps us to keep users logged in. But after the user is logged in when they re-enter our application, we also need to fetch that additional data.

So let’s also subscribe to the onAuthStateChanged event and call getUserAdditionalData to fetch that data:

const handleAuthStateChanged = (user: firebase.User) => {
  setUser(user)
  if (user) {
    getUserAdditionalData(user)
  }
}
useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(handleAuthStateChanged)

  return () => unsubscribe()
}, [])

If you refresh the page, you should see your name. Magic! 🎩

To improve this some more, we could also make sure that whenever the user’s document is updated, we also update the user state in our application. We can do this by adding another effect to the useAuth hook that subscribes to the user’s document and updates the state whenever it changes.

useEffect(() => {
  if (user?.uid) {
    // Subscribe to user document on mount
    const unsubscribe = db
      .collection('users')
      .doc(user.uid)
      .onSnapshot((doc) => setUser(doc.data()))
    return () => unsubscribe()
  }
}, [])

Logout

We are now making sure we fetch the user data from our DB and update our local state so the user knows he or she is logged in. This is great, but we are not done yet. Let’s also make sure that the user can log out.

Add this signOut function to the useAuthProvider:

...
const signOut = () => {
  return auth.signOut().then(() => setUser(false));
};
...

We want to be able to call this function anywhere, so don’t forget to export it.

...
return { user, signUp, signIn, signOut };
...

Now, all we have to do is make a button that calls this function when it’s clicked. Add this button to your pages/dashboard.tsx:

...
<button
 onClick={() => auth.signOut()}
 className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out"
\>
 Sign out
</button>

Try it out!

If it’s working, you will end up with a white screen. That’s not really what we want. We actually never want users to be able to enter /dashboard if they are not logged in, so let's make a hook that will redirect users if they are not logged in.

Create the following hook at hooks/useRequireAuth.tsx

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useAuth } from 'hooks/useAuth'

export const useRequireAuth = () => {
  const auth = useAuth()
  const router = useRouter()
  useEffect(() => {
    if (auth.user === false) {
      router.push('/login')
    }
  }, [auth, router])

  return auth
}

Now use this hook inside dashboard.tsx . Replace the old const auth = useAuth() with our new hook:

...
const auth = useRequireAuth()
...

Again, magic! 🎩

You are doing amazing. We build a working sign up and login flow. Nice! Now grab some coffee, you deserved it. When you come back, we still need to code some more.

Reset Password

Because what happens when a user forgets their password? We need to handle this as well, so let’s add a function to our useAuth hook to send a reset password link.

const sendPasswordResetEmail = (email) => {
  return auth.sendPasswordResetEmail(email).then((response) => {
   return response;
  });
 };
 ...

return {
  user,
  signUp,
  signIn,
  signOut,
  sendPasswordResetEmail,
};

Now create a ResetPasswordForm component where the user can enter their email. On submit it should call that new sendPasswordResetEmail function.

Great. Now create the reset-password page that will show our new ResetPasswordForm component.

Also, add a link to this new reset-password page on our login form. Add this code right below the password input:

...
<div className="mt-4 flex items-end">
 <div className="text-sm leading-5">
  <Link href="/reset-password">
   <a
    href="#"
    className="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150"
   >
    Forgot your password?
   </a>
  </Link>
 </div>
</div>
...

Nice. Now test things out and see your brand new authentication flow!

here is always room for some improvements. Let’s handle our loading states and error messages.

Loading States and Error Messages

It’s great that we now have a working authentication flow, but there is still a lot of room for improvement. Let’s start by handling the loading states and make sure we show an error message when something goes wrong.

Inside your SignInForm component, import useState and use it to set the state for isLoading and error. When we submit the form we set isLoading to true and clear the error. After the response is returned we set isLoading back to false and only if an error is present we set the error.

import { useState } from 'react';const \[isLoading, setIsLoading\] = useState(false);

const [error, setError] = useState(null);const onSubmit = (data: LoginData) => {
 setIsLoading(true);
 setError(null);
 return auth.signIn(data).then((response) => {
  setIsLoading(false);
  response.error ? setError(response.error) : router.push('/dashboard');
 });
};

If the error is present, we want to show it inside our form:

{
  error?.message && (
    <div className="mb-4 rounded border border-dashed border-red-600 p-2 text-center text-red-500">
      <span>{error.message}</span>
    </div>
  )
}

We also like to show the user that we are fetching data, so let’s change the text of our submit button whenever isLoading is true.

Because we are using this button on all of our forms, let’s create a reusable button component that we can import in different places.

interface ButtonProps {
  title?: string;
  isLoading?: boolean;
}
const Button = ({
  isLoading,
  title,
  children,
  ...buttonProps
}: ButtonProps &
  React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element => {
  return (
    <button
      className="focus:shadow-outline-indigo flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white transition duration-150 ease-in-out hover:bg-indigo-500 focus:border-indigo-700 focus:outline-none active:bg-indigo-700"
      {...buttonProps}
    >
      {isLoading ? 'Loading...' : title}
      {children}
    </button>
  )
}

export default Button

Now we can use our button inside our form components like this:

import Button from 'components/elements/Button';

...
<Button title="Login" type="submit" isLoading={isLoading} />
...

That’s a lot better. We can make it even nicer by showing a spinner icon instead of the “Loading…” text.

At icons/spinner.tsx, create the spinner icon component:

const Spinner = (props: React.SVGProps<SVGSVGElement>): JSX.Element => {
  return (
    <svg viewBox="0 0 100 100" {...props}>
      <path d="M90.9 58.2c-3.8 18.9-20.1 32.7-39.7 33-22 .4-40.7-17-41.9-39C8 28.5 26.9 8.8 50.4 8.8c19 0 35.5 13.1 40 31.2.3 1.2 1.4 2.1 2.7 2.1 1.8 0 3.1-1.7 2.7-3.5C90.6 18.1 72 3.3 50.4 3.3c-27.2 0-49 23.4-46.6 51.1 2.1 23 21 41.2 44 42.4C71.6 98 91.7 81.9 96.2 59.4c.3-1.7-1-3.3-2.7-3.3-1.3-.1-2.4.8-2.6 2.1z" />
    </svg>
  )
}
export default Spinner

Now in our Button component, replace the loading text with the spinner component:

{isLoading ? (
 <Spinner width="20" fill="white" className="animate-spin" />
) : (
 title
)}

Note: make sure you are at least on Tailwind version 1.7 so you can use the animate-spin class.

Noice! Now go ahead and do the same for the sign-up and reset-password forms and call it a day.

Summary

• We have implemented different pages for our authentication forms.
• We have implement login, sign up, and reset password forms.
• We store additional user data in a Firestore DB and fetch this data whenever the user logs in.
• We implement a logout button.
• We have created a useAuth hook and used the Context API to provide the user data to all our components.
• We show a loading spinner icon whenever we are fetching data.
• We show error messages whenever something goes wrong.
• We have created a hook to redirect the user when entering an authenticated and not being logged in.

That’s it! Thanks for reading. I hope it was helpful. Good luck with the next steps of your project.

How to Set Up Tailwind CSS V2.0 With Next.js 10

Why Next.js?

There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler like webpack and transformed using a compiler like Babel. Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code-splitting, pre-rendering for performance, and SEO or server-side rendering?

To build a complete React application, you need more than CRA provides you. You can save yourself some time by using Next.js, a React framework that provides a solution to all of these problems above. If you want to read more about CRA vs. Next.js, check out Stack choices: Create React App vs Next.js.

Why Tailwind CSS?

Tailwind CSS is a CSS framework, but it’s different than most other frameworks like Bootstrap, Material, or Ant Design. It’s a utility-first framework, which means it doesn’t focus on predesigned components like buttons, cards, and alerts. It provides low-level utility classes that let you build completely custom designs without leaving your HTML.

Although it requires some time to learn all the utility classes, you barely need to write any CSS anymore once you start using it. It can give you a huge boost in productivity, and not needing to switch files while styling your HTML elements can feel like a blessing.

Let’s Start

If you haven’t got a project set up with Next.js, first open your terminal and run yarn create next-app in your projects folder.

You will get prompted with the following message:

What is your project named?

Fill in a name and hit enter. The next message will be:

Pick a template

Choose “Default starter app” and wait until your project is ready. Then, type cd <your-project-name> to make sure you are inside that directory where you can run yarn dev to start the development server. You should now have your new Next.js project up and running.

Adding Tailwind CSS

Start by adding the Tailwind CSS library to your development dependencies using npm or yarn:

yarn add tailwindcss -D

Then, we need to add a tailwind.config.js file to the root of our application. Use the following command to set this up:

npx tailwind init

You should now have a tailwind.config.js in your project containing the following:

Adding PostCSS

Next up, we need to configure PostCSS, a tool for transforming CSS with JavaScript because Tailwind CSS is a PostCSS plug-in. Let’s create a postcss.config.js and add the following so Next.js will load the defined plug-ins.

In the root of your project, run:

touch postcss.config.js

Then add the following to that file:

module.exports = {
  plugins: \['tailwindcss'\],
}

Besides TailwindCSS, we should also add the PostCSS Preset Env module, which converts modern CSS into something most browsers understand:

yarn add postcss-preset-env -D

Now let’s update our postcss.config.js to include this module:

module.exports = {
  plugins: \['tailwindcss', 'postcss-preset-env'\],
}

Now let’s create a styles folder and import Tailwind CSS from a CSS file:

mkdir styles touch styles/tailwind.css

Inside tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

To add global CSS to a Next.js app, we need to override the default App component. Next.js uses the App component to initialize pages, and if we need to control the page initialization, we need to create a file called pages/_app.js:

touch pages/\_app.js

Now import the stylesheet we created:

import '../styles/tailwind.css';export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Cool, now we are ready to add some Tailwind CSS magic to our home page. Go to /pages/index.js (or /pages/index.tsx if you use TypeScript) and add some elements with Tailwind CSS classes. For example:

Run yarn dev to see your app on localhost:3000 in your browser.

PurgeCSS

One problem with Tailwind CSS is the large file size, but we can use PurgeCSS to fix this. PurgeCSS reduces the file size by scanning your HTML and removing any classes that aren’t used. We only want this in production because if we are developing, we want to be able to use any Tailwind CSS class without running the build process. To set this up, we start by installing the PurgeCSS module as a dev dependency in our project:

yarn add @fullhuman/postcss-purgecss -D

Then update your postcss.config.js file with the following code:

The order of exports matters. First, we tell PostCSS to load Tailwind CSS. Then, we purge the unused CSS (only in production). Finally, we let the PostCSS Preset Env plug-in do its thing to make the remaining CSS compatible for all browsers.

For now, we check all of our code inside .js, .jsx, .ts or .tsx files that live in either the pages/ or components/ folder. If you plan to add HTML in other folders like containers/ or something, make sure you add that folder to this configuration file.

Finally, it’s recommended to only apply PurgeCSS to Tailwind CSS’s utility classes — not to base styles or component classes. This will ensure you don’t accidentally purge important base styles when working with Next.js The easiest way to do this is to use PurgeCSS’s whitelisting feature to disable PurgeCSS for non-utility classes. Add this to your tailwind.css file:

/\* purgecss start ignore \*/
@tailwind  base;
@tailwind  components;
/\* purgecss end ignore \*/@tailwind  utilities;

Cool, now we are ready to work with Next.js and Tailwind CSS without having to worry about bundle sizes!

That’s it! Thanks for reading. I hope it was helpful.

Combining ESLint with Prettier is a nice way to perform both automated syntax scans on your code and reformatting. This will ensure that consistent rules are being followed for indentation, spacing, semicolons, etc.

Let’s set up these technologies to use them in a Next.js project that uses TypeScript. If you are starting a new project, you can read my article about how to set up Next.js with TypeScript.

ESLint

Let’s start by adding the core ESLint linting library, the parser to lint TypeScript code, a TypeScript-specific plug-in, and a React-specific plug-in to our project.

In the terminal, go to the root of your project and run the following command:

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react

We should now create a .eslintrc.json file at the root of our project. We can add our linting rules in this file:

touch .eslintrc.json

You can already add the default options to that file. We will add our options as we go:

{
  "parser": {},
  "extends": \[\],
  "rules": {},
  "globals": {}
}

By default, ESLint depends on a parser to read JavaScript code. We use @typescript-eslint/parser (an alternative parser that can read TypeScript), so we need to tell ESLint to use it instead. Besides that, we use @typescript-eslint/eslint-plugin (a list of rules you can turn on or off). We also extend the plug-in react/recommended, which contains React-specific linting rules.

To configure the parser and extend the plug-ins, we need to modify the file we need to update our config like this:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "@typescript-eslint",
    "react/recommended"
  ],
  "rules": {},
  "globals": {}
}

Next.js does not require you to import React into each component, which means you will start getting errors if you use this config in a Next.js application. We can fix this by adding React into our global and turning the react-in-jsx-scope rule off.

Our final config will look like this:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "@typescript-eslint",
    "react"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "globals": {
    "React": "writable"
  }
}

Prettier

Now let’s add Prettier and some plugins to make it work nicely with ESLint:

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier will disable any linting rule that might interfere with an existing Prettier rule, and eslint-plugin-prettier will run Prettier analysis as part of ESLint.

Let’s add them to our ESLint config to finish up our ESLint configuration. Make sure to put Prettier last so it can override other configs:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:prettier/react",
    "plugin:prettier/@typescript-eslint"
  ],
  "plugins": [
    "@typescript-eslint",
    "react",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "globals": {
    "React": "writable"
  }
}

Configure Prettier

Prettier is opinionated and intentionally limits the number of options (read why). If you want, you can overwrite some rules of Prettier by creating a .prettierrc file in the root of your project:

touch .prettierrc

The following configuration is an example file. I personally use this as my setting, but you can find all available configurations in the official documentation.

{
	"semi": true,
	"singleQuote": true
}

Add a git hook

Optionally, you can use husky and pretty-quick to add a git hook that will always lint and format your changed files.

First, install them as dev dependencies:

yarn add pretty-quick husky -D

Now add the following husky and lint-staged configuration to your package.json:

"scripts": {
  ...
  "lint": "eslint --ext .ts,.tsx",
},

Add the pre-commit hook in your package.json:

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged && npm run lint"
   }
},

Now, whenever you commit your changes, it will format and lint your new code.

Code Editor Extensions

If you haven’t done so already, I recommend installing the Prettier and ESLint extensions for your code editor. If you don’t want to format your file manually every time, you can format it on save as well. I highly recommend this. For Visual Studio Code, all you need to do is open your VSCode User settings/preferences and set the Format On Save option to true.

That’s it! Thanks for reading. I hope it was helpful.

Why Next.js

There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler, like webpack, and transformed using a compiler, like Babel.

Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code splitting, prerendering for performance, and SEO or server-side rendering?

To build a complete React application, you need more than CRA provides you with. You can save your self some time by using a Next.js, a React framework that provides a solution to all of these problems.

Why TypeScript?

TypeScript is an open-source language that builds on JavaScript by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation and allowing TypeScript to validate that your code is working correctly.

TypeScript seems to be taking over front-end development. Almost 90% of developers (who filled in the State of JS survey) admit they’d like to use or learn to use TypeScript in their next project. Besides that, it’s one of the most loved languages, according to the 2019 developer survey by Stack Overflow.

It’s very popular and has lots of benefits during development. I’ve specified these benefits some more in “Stack Choices: JavaScript vs TypeScript.”

Let’s Start

If you start from scratch, open your terminal, and inside your projects folder, run yarn create next-app (Yarn is used in this example, but you could, of course, also go with npm).

You’ll get prompted with the following message:

What is your project named?

Fill in a name, and hit enter. The next message you’ll see is:

Pick a template

Choose Default starter app, and wait until your project is ready. Then, type cd <your-project-name> in your terminal to make sure you’re inside the directory where you can run yarn dev to start the development server.

If everything is fine, we can set up TypeScript. Start by creating an empty tsconfig.json file in the root of your project:

touch tsconfig.json

Try restarting the development server (yarn dev). You’ll get a warning message, like this:

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Follow the instructions to install TypeScript:

yarn add --dev typescript @types/react @types/node

Now, try starting the development server again. After starting the server, Next.js will:

• Populate the tsconfig.json file for you. You may customize this file.
• Create the next-env.d.ts file, which ensures Next.js types are picked up by the TypeScript compiler. You should not touch this file.

Now let’s try it out by changing the index.js to index.tsx. If nothing breaks, that means you can now use TypeScript for your Next.js application.

And that’s it! Good luck with your project, and feel free to ask any questions if you have any.

Thanks for reading.

IndieHackers

IndieHackers is a place where the founders of profitable businesses and side projects can share their stories transparently, and where entrepreneurs can come to read and learn from those examples.

Link: https://www.indiehackers.com/contribute

ProductHunt

ProductHunt is now the forefront when it comes to showcasing your product to the startup directory world. It has a voting system that enables your product to rise in the list of new products. The benefits of Product Hunt if something goes viral, it can very quickly. It is a great platform to promote services on technology, games, or books, and well, pretty much everything.

Link: https://www.producthunt.com/

HackerNews

If you have a technology-related startup and/or looking for some feedback, you can post it at HackerNews. Do not forget to mention that you are looking for feedback or give it an overly promotional title. Hacker News is a great platform if you have a startup serving a technical audience.

Link: https://news.ycombinator.com/

MakerMove

MakerMove is a platform for startup founders and makers to discover useful resources & tools. There are many curated lists of resources out there, but MakerMove has put them all together in a nice interface so you can easily discover cool products. It also has a full list of directories to post your startup.

Get inspired by the best books & podcasts to help you grow. Find journalists to get press coverage or get connected with investors to fund your startup. Discover & find anything you need to boost your project. MakerMove has it all in one place.

Link: https://www.makermove.com/

Startupbase.io

Discover The Best New Startups Every Day. StartupBase is a community of makers and early adopters to share & discuss the latest products and ideas. It is a place to discover and get early access to exciting new startups.

Link: https://startupbase.io/submit

BetaList

BetaList is the place to discover and get early access to tomorrow’s startups. If you are fine giving finer details about your startup and product, it is worth registering and filling the format and BetaList.

Link: https://betalist.com/submit

Inspire

Explore, share, and get inspired by beautifully designed landing pages for mobile applications to design or improve your website.

Link: https://pageam.com/inspire/

SideProjects

Show off, give feedback and grow. SideProject.net is a relatively new platform that is perfect to submit your side project. It does not have a huge community behind it yet, but that can change.

Link: https://sideprojects.net/

Owwly

Find the best digital products & learn from makers like you.

Link: https://owwly.com/

Reddit-Entrepreneur

Reddit-Entrepreneur is not a place to submit your startup, but you can tell stories for free about your product to of 100k+ subscribers. There is a likely chance with more discussion around your startup story or entrepreneurial concept, that you may get featured on the front page. The only limitation is that you need over 10 karma points, but if you’re an avid Reddit user, this is perfect to launch your startup in a startup directory.

Link: https://www.reddit.com/r/Entrepreneur/

Uplabs

UpLabs is the place to find high-quality design resources for designers, creative agencies and developers.

Link: https://www.uplabs.com/submit

All Top Startups

Founded in February 2010, Alltopstartups has become a great resource site for young entrepreneurs starting and growing businesses. AllTopStartups is committed to sharing resources for entrepreneurs and startups, providing essential tools and resources to start, grow, and manage a startup.

Link: https://alltopstartups.com/submit-startup/

Inc42

Inc42 is a leading Indian media and information platform, known for its end-to-end coverage of the Indian startup ecosystem.

Link: https://inc42.com/startup-submission/

StartupBlink

Have you ever wondered how the strength of your local startup ecosystem compares to others? What about the vital factors that help empower a growing ecosystem? StartupBlink’s comprehensive global startup ecosystem map and research center provides users with all the data they need to make better-informed business decisions.

Stackshare

Find the right developer tools and the companies that use them.

Link: https://stackshare.io/create-stack/new-company

Mashable

Mashable often covers consumer-based startups directories (or anything which is of interest to its users) so it is worth submitting to it too here. If you get covered fine if not, that is OK. Do try to send them something newsworthy rather than just telling the features of the startup.

Link: https://mashable.com/submit/

Launching Next

Very similar to BetaList, Launching Next is an impressive platform that features the most promising startups on a daily basis. Why do I mention impressive? It has great guides and content in relation to launching startups to gain early user traction and successful case studies of entrepreneurs launching startups at a low-cost. Further related to their content, they have individually interviewed startup founders launching their startups, and asking them their experiences of launching startups, and what lessons they learned.

Link: https://www.launchingnext.com/submit/

Looking for more places? Check out the full list at MakerMove.

Note: If you are looking to convert a Next.js application to React.js, check out my other article on how to convert Next.js to React.js.

Let me start by saying I’m a big fan of Next.js. It’s an amazing framework for building React applications, especially when you need Server-Side Rendering (SSR). One day, I’ll write an article covering all the great things about this framework, but luckily a lot of people are already doing that.

Instead, I’m now going to explain why I migrated one of my many side projects from Next.js to Create React App. Note: If you don’t care about the background story, scroll down and go straight to the conclusion.

Start Free

When you have many side projects (that don’t make you any money), it’s nice if you can host them for free. I have a Ruby on Rails project hosted on a custom domain on Heroku that’s already costing me more than 30 dollars a month, which is fine — if you have just one project or if that project is making you some money… The cool thing about building a React application with Firebase and Firestore is that you can build a full-stack application and go live without any costs (except for the custom domain name). I did that with side projects like FlowReads and MakerMove. I also made React Milkshake, a boilerplate for creating apps with this stack. For a new side project, I was going for that same approach but with Nextjs, and although that’s working nicely, there was one issue I ran into.

Deploying on Vercel

The best place to deploy your Nextjs application is Vercel (formerly Zeit). Although you can start for free, I had to upgrade to the team plan (starting at 20 dollars a month) if I wanted to keep my current project live. With Next.js, you can choose whether you want your pages to be statically generated or server-rendered. If your page is server-rendered, it means that a serverless function is created for your page during the build. The team at Zeit just decided to limit the number of serverless functions to 12 — and my application had 14 pages. That meant I could no longer deploy this application — it would fail during the build process due to this limitation. I can understand the decision to limit the number of serverless functions on the free tier, but the most frustrating part of this is that my site was already deployed. After Zeit has added this limitation I couldn’t deploy any changes without upgrading! You might be thinking “But why are you server rendering every single page? Couldn’t you just statically serve at least a couple of pages?” That’s what Zeit also recommended and it’s exactly what I wanted. The only problem is that with my current implementation (using Redux), I can’t. Let me explain.

SSR vs SSG

With Next.js you can use getIntialProps (or since version 9.3 getServerSideProps and getStaticProps) inside your page components, which determines if a page should be server-rendered of statically generated (read more about that here). If you don't need any data inside your page it will be statically generated, but when you use getInitialProps inside _app.js all your pages are server-rendered. You will get this warning message when building your application: "You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app." Now, when you use Redux as your state management library, you probably use next-redux-wrapper, so you don't have to implement anything complex to make your client state of the store in sync with the server, etc. At least, that’s what I did, and here’s the problem: This library calls getInitialProps on your _app.js file, so all your pages will implement server-side rendering. To be honest, my application didn’t need server rendering, because everything is behind a login screen. I basically only used Next.js because I wanted to experiment with it. I probably had more options than to just refactor my project to CRA, but I figured the hassle that can come from server-side rendering (even with Next.js) is not worth the time for a project that doesn’t even benefit from it that much. I also like to host things for free as long as I’m still in the development phase and with Next.js I’m not sure I can.

Conclusion

If you use redux inside your Nextjs application (with next-redux-wrapper) and have more than 12 routes, you will need to upgrade to the team plan if you host your project on Zeit. If you don’t need SSR, are using redux, and also want to host it for free, you probably don’t want to go with Next.js. Also, if you want to use the SSG options of Next.js, you should not go with Redux. Otherwise, I can recommend you give Next.js a try because it’s a really good framework!

As a developer, there are many choices to make when building your next application. The rise of serverless technologies allows developers to build and run applications without thinking about servers and this also allows front-end developers to create full-stack applications and build SAAS web apps.

In Stack Choices, we take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. In the last episodes, I took a look at JavaScript vs TypeScript and React vs Vue vs Angular vs Svelte. This time, let’s take a look at Create React App (CRA) vs Next.js.

CRA is a tool that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. You simply run one command and Create React App sets up the tools you need to start your React project. This is great to start focusing on building your application from the start and don’t waste time configuring your webpack etc. But for building performing production-ready applications, you might need a little bit more. You might need serverside-rendering for SEO, or code-splitting to increase performance. You could use a boilerplate that has some features built-in (like React Milkshake), or you can take a look at a framework like Next.js.

Next.js

Next.js is a framework built by Vercel. It’s open-source, based on Node.js and Babel, and it integrates with React to develop single-page applications. It makes Serversside rendering very easy. According to nextjs.org:

With Next.js, server rendering React applications has never been easier, no matter where your data is coming from.

Next.js also supports static exporting, pre-Rendering, and has a lot more nice features like automatic building size optimization, faster dev compilation, and preview mode.

In my opinion, the current version of Nextjs is what React was missing for a long time. It has all the features you need when you build a production-ready application that needs to perform. Also, the docs are nice and it’s becoming more and more popular among front-end developers.

Next.js is really good, but that doesn’t mean you should always go with this framework.

Although it makes server-side rendering a lot easier, it still introduces some complexity. For instance, if you use Redux, your store should also be in sync on the server. And when you use translated labels inside your application, be aware that this must also be handled on the server.

Also, for every server-rendered route that you have, a serverless function will be created. Currently, the free tier a limitation of 12 serverless functions, so if you use SSR and your app has more than 12 routes you need to pay for hosting. This might not be a problem for everybody, but when you build your app with CRA you are sure you can host it on platforms like Vercel, Netlify, or Render for free. I wrote an article that dives a little deeper into this, you can read it here: Why I Migrated From Next.js to Create React App

Conclusion

CRA is a great starting point for your next app, but to take things to the next level I think Nextjs can come in handy. It does introduce a little more complexity in certain areas and I’m not really happy with serverless functions limitations, but I think Next.js offers so many nice features that my decision is clear: Next.js.

If you think differently, please try to change my mind! Any other opinions? Leave them in the comments.

If you’re interested in saving time on your next project and skip implementing authentication, payments, etc. then subscribe here to follow my progress in building the SAAS starter-kit for JavaScript developers. You can also follow me on Twitter, or at www.jakeprins.com.

In Stack Choices, I take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. In the last episodes, I took a look at JavaScript vs TypeScript, React vs Vue vs Angular vs Svelte, and Create React App vs Next.js.

This time, let’s take a look at some options for styling the application. I’ve worked with different approaches like CSS modules, Styled-Components, frameworks like Bootstrap, or just vanilla CSS. In this post, we are going to focus on three of my favorites: SASS, CSS-in-JS, and Tailwind.

SASS

Going with classical CSS, using a preprocessor like SASS has been my way of styling applications for years. CSS is easy to learn but very hard to maintain. That’s why, as your project grows larger, you need a proper structure. BEM (Block Element Modifiers), is a naming styling that tries to solve the naming problem and structure that CSS often run into. BEM also provides a better structure for your CSS code and scalable CSS.

CSS preprocessors in combination with BEM definitely improve the development experience a lot, but that doesn’t mean it’s perfect. When your codebase grows, you might start to wonder in which files you should put certain styles and how it should be scoped. You also wonder if old styles are still being used. And you also have to think about performance: you don’t want to load in every single line of CSS on the first page when most of it is used on other pages.

There are many solutions to these problems, but one approach that I personally like is writing your CSS in JavaScript.

CSS-in-JS

There are multiple CSS-in-JS libraries out there, like Styled-Components, Emotion, and Styled-JSX, and it has some benefits over using classic CSS. I personally really like the fact that it makes it simple to add specific CSS to a component. All styles are only applied to the component, so this also means you do not have to learn methodologies like BEM, use long class names, or need to think about where you put your styles.

The other main advantage is that styles are rendered only if the component is on screen. You don’t have to worry about performance or unused styles. Also, because of the component-based architecture, we can have changes controlled by props. If you are a JavaScript developer I think you don’t need a lot of time to feel very familiar with writing your styles in JavaScript as well.

At first look, CSS-in-JS might look difficult, because the learning curve is a little bit bigger than using SASS. But if you are working on a component-heavy JavaScript project, I think CSS-in-JS is definitely worth trying out.

TailwindCSS

Tailwind is a CSS framework, but not like Bootstrap or Ant Design. It’s a utility-first framework, which means it doesn’t focus on predesigned components like buttons, cards, and alerts. It provides low-level utility classes that let you build completely custom designs without leaving your HTML.

If you go for a framework, you usually need to stick to the components of that framework, which can lead to overriding unwanted styles or battling specificity wars. Tailwind is different, it’s basically a different way of styling your application.

There are great benefits of using Tailwind, like development speed. Tailwind provides almost all the tools you need to build out a site in just HTML, so you rarely need to write any custom CSS.

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="[https://cdn-images-1.medium.com/fit/c/32/32/1\*\_SiS1xvFOqiK6TnkiGcZ2A.jpeg](https://cdn-images-1.medium.com/fit/c/32/32/1*_SiS1xvFOqiK6TnkiGcZ2A.jpeg)" alt="Jake"/>
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="text-sm tracking-wide uppercase text-cloud-burst-600 font- bold">Marketing</div>
      <a href="#" class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

Tailwind was built from the ground-up to be super customizable. It comes with a default configuration, but you can simply override the default configuration with a tailwind.config.js file in your project.

Also, any changes you make will be made in your templates, therefore only affecting the page you’re working on.

Besides that, all its utilities are also generated with responsive versions which are very helpful if you want to make your application look nice on mobile, tablet, and desktop.

One thing I didn’t like about using Tailwind is the long class names you can end up with. The more styling you need on a single element, the longer that class name is going to be. This harms the readability of your HTML files a bit, but after a while, I got used to it and it doesn’t bother me that much anymore.

The other problem with Tailwind is the large file size, but you can use PurgeCSS to fix this. PurgeCSS reduces the file size by scanning your HTML and removing any classes that aren’t used. Luckily, setting up PurgeCSS to work with Tailwind is easy, so this could make Tailwind an absolute winner.

Conclusion

There are many ways to manage the styling of your application. In the beginning, this is easy, but when your projects start to grow you will encounter difficulties. Using a traditional approach to CSS is not a wrong decision, but nowadays there are other options you could consider. Personally, I like CSS-in-JS a lot and as a JavaScript developer, it makes sense to me to go with this approach.

On the other hand, I’ve been working a lot with TailwindCSS lately and I don’t think I’ve ever been that excited about a CSS framework. I made some projects, like RemoteRocket.io, with TailwindCSS and I’ve noticed a huge boost in productivity while working on it. Although it requires some time to learn all the utility classes, you barely need to write any CSS anymore once you master those. And not needing to switch files while styling your HTML elements feels like a blessing.

With all that in mind, I’ve made my stack choice: TailwindCSS. If you think differently, please try to change my mind! Reach out top me on Twitter: @jake_prins.

5 min read

As a developer, there are many choices to make when building your next application. The rise of serverless technologies allows developers to build and run applications without thinking about servers and this also allows front-end developers to create full-stack applications and build SAAS web apps.

In Stack Choices, we take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. In the last episode, I took a look at JavaScript vs TypeScript. This time, let’s take a look at the JavaScript frameworks.

Angular

This JavaScript framework, developed by Google, has been around for a while and it’s not really the cool kid on the block inside the frontend community. The move from angular 1 (AngularJS) to Angular 2, which was so different it required complete rewrites, seems to left some scars, but times have changed and lots of progress has been made.

Updating your application to the next major version of Angular has never been easier. Since Angular 8, you can just use ng update it to update your application and its dependencies. Besides that, with the new Angular CLI, you can generate components, routes, services, and pipes with a simple command. Besides that, Angular is very stable and has support for great technologies like Typescript and Web Workers, etc. Also, the new Ivy renderer is officially released in Angular 9, which decreased payload size and has a lot of other interesting benefits.

My opinion

After first working with React for quite some time I joined a team that worked with Angular. I have now worked with them for over a year and although I was a bit skeptical at the beginning, I started to like Angular more and more. Some people complain about the file size or that the framework is too bloated, but I think it’s nice to have a framework that has lots of features built-in. It’s not as easy to pick up as Vue or React, and I also wouldn't choose it for smaller side-projects, but for production applications, especially those that you need to work on with multiple people, Angular is a very nice framework.

React

According to NPM trends, React is by far the most downloaded framework. Stack Overflow Trends also reveals that React receives the largest percentage. It’s easy to see why lots of people choose React for there new applications: it’s a save bet. Large companies such as Airbnb and Netflix have been using React.js for many years now, and we see that the technology is being embraced by more and more companies. The interest in React among developers is huge and that makes it a technology that will probably gain even more popularity in the upcoming years.

My opinion

Most popular doesn't mean it’s the best, also React has its flaws. But personally, I absolutely like working with it. I have made most of my side-projects with React, like RaterFox, Codestash, MakerMove, and more. I think it’s easy to get started with React, but when you build large applications you find yourself reaching for a lot of other libraries just to get some basic things done, like routing or global state management. These libraries usually all have there strong points and weaknesses. It’s nice to have the freedom to choose but at some point, I think it would help the developer community if we could just all go for the same thing. Instead of introducing yet another state management library or another way to implement CSS-in-JS, I think it might be beneficial to sometimes have fewer choices.

I’ve made a React boilerplate called React Milkshake that can give you a headstart with your new project. And I’m working on a React starter-kit with Nextjs to build full-stack SaaS applications. You can sign up here to get notified when it launches.

Vue

Another amazing JS framework is Vue.js. With very detailed documentation and a fairly low learning curve, Vue.js is a suitable choice when you want to experiment with a new framework as a developer.

Because of the resemblance to React and Angular in terms of architecture, it is an easy transition from other frameworks. Loved for its small size, speed and flexibility, Vue.js delivers even better performance compared to other frontend frameworks.

Vue.js currently still has a much smaller market share compared to React. Due to the positive opinions from the developer community and the growth in the use of Vue, it seems likely that Vue.js will continue to develop positively.

My opinion

I have little personal experience with Vue, but to experiment with it I made RemoteRocket, a platform with all the remote jobs from popular remote job sites. It’s easy to pick up, especially with the Vue CLI, and I definitely recommend giving Vue a try (if you haven’t already).

Svelte

The big underdog of the frontend frameworks: Svelte. It’s been around for a couple of years and in April 2019 version 3.00 was released. Svelte is a little different than React, Vue, or Angular because it compiles your code to tiny, framework-less vanilla JS. And it’s not just very performant, with no run-time dependencies, it’s also very elegant and easy to learn the framework. It’s npm downloads have more than tripled over the last year, and in the results of the 2019 State of JS survey, it showed that 44.9% of JS developers were interested in learning Svelte. Time has to tell if people will actually adopt it in production applications, so I’m curious about what the future will bring for Svelte.

My opinion

I personally haven’t got the time to try out Svelte, but it’s very high up on my list of technologies to explore. If you want to learn more I can recommend you this video of Rich Harris’ (the creator of Svelte) talk about Rethinking reactivity or to listen to this podcast episode of the Syntax.fm where Scott Tolinski teaches Wes Bos about Svelte. It got me really excited and I can’t wait to start trying it out myself!

Conclusion

Angular, React, Vue, or Svelte, these are all great frameworks. I’ve worked with all of them except Svelte. I would really love to work with Svelte, but for my plan to build the best JavaScript boilerplate for building a SAAS business, I need to go with a framework I’m very experienced with. Besides that, popularity plays an important role, and for that reason, my choice has become: React.

If you think differently, please try to change my mind! Any other opinions? Leave them in the comments.

If you’re interested in saving time on your next project and skipping implementing authentication, payments, tests, etc. then subscribe here to follow my progress in building the SAAS starter-kit for JavaScript developers. You can also follow me on Twitter, or at www.jakeprins.com.

For example, when a visitor enters your application on the homepage, there is no need to load in all the code related to a completely separate page. That user might not even go to that route at all, so we only want to load it when the user navigates to that page. If we can load only the code necessary for the home page this means our initial loading time will be al lot faster, especially on slow networks.

In this post we will take a look at how we can boost the performance of our React applications by implementing code-splitting using React Loadable. If you rather save time and start with a boilerplate that includes code-splitting, try out React Milkshake.

Route-based splitting

A great way to get started is to implement route-based code splitting, which means we load code chucks according to the current route.

Normally, our routes could something look like this:

import React from 'react'
import { Route, Switch } from 'react-router-dom'

import Home from 'pages/Home'
import Example from 'pages/Example'

const Routes = () => {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/example" component={Example} />
    </Switch>
  )
}

export default Routes

Now, let's refactor these route to implement code splitting using React Loadable. The Loadable higher-order component takes an object with two keys: loader and loading.

import React from 'react'
import { Route, Switch } from 'react-router-dom'
import Loadable from 'react-loadable'

const AsyncHome = Loadable({
  loader: () => import('./pages/Home'),
  loading: <div>Loading...</div>,
})

const AsyncExample = Loadable({
  loader: () => import('./pages/Example'),
  loading: <div>Loading...</div>,
})

const Routes = () => {
  return (
    <Switch>
      <Route path="/" exact component={AsyncHome} />
      <Route path="/example" component={AsyncExample} />
    </Switch>
  )
}

export default Routes

With this simple setup, the code related to the Example component will only load when that route is active. If you open your inspector in your browser and go to your network tab (js), you can see that if you change your routes a new code chunk will be loaded.

Pro tip. If you want to give your chunk a name instead of a generated hash, so you can clearly see which chunk just loaded, you can set the webpackChunkName like this:

const AsyncExample = Loadable({
  loader: () => import(/* webpackChunkName: "Example" */ './pages/Example'),
  loading: <div>Loading...</div>,
})

Sometimes components load really quickly ( < 200ms) and the loading screen only quickly flashes on the screen. A number of user studies have proven that this causes users to perceive things taking longer than they really have. If you don't show anything, users perceive it as being faster. Thankfully, your loading component will also get a pastDelay prop which will only be true once the component has taken longer to load than a set delay. Be default, delay is set to 200ms.

To do that, let's create a Loader component that we can use in our sample component that will now look like this:

const AsyncExample = Loadable({
  loader: () => import(/* webpackChunkName: "Example" */ './pages/Example'),
  loading: Loader,
})

And our Loader component:

import React from 'react'

const Loader = (props) => {
  if (props.pastDelay) {
    return <h2>Loading...</h2>
  } else {
    return null
  }
}

export default Loader

But what if something goes wrong while loading the code? Well, luckily React Loadable also provides use with an error prop. This means our final Loader component will look like this:

import React from 'react'

const Loader = ({ pastDelay, error }) => {
  if (error) {
    return <h2>Sorry, there was a problem loading the page.</h2>
  } else if (pastDelay) {
    return <h2>Loading...</h2>
  } else {
    return null
  }
}

export default Loader

And that's it!

Load on hover

Now we can even go a little further. We can also start loading the next chunk as soon as the user starts to hover over the link. To achieve this, all we have to do is call preload() on our Loadable component. It will look something like this:

import React, { useState } from 'react'
import { Link } from 'react-router-dom'

import { AsyncExample } from 'routes'

const SideBar = () => {
  return (
    <div className="sidebar">
      <Link to="/" exact={true}>
        Home
      </Link>
      <Link to="/example" onMouseOver={() => AsyncExample.preload()}>
        Example
      </Link>
    </div>
  )
}

export default SideBar

And that's it, awesome!

Component-based splitting

Now that we now how to code split based on the current route, let's take it even a little further and look at how we can code split on component level. Inside your container component you might render different components based on a certain state, like if an user is logged in or not. We can achieve this with the same Loadable component. Take a look at this example, in which a component is only rendered into the view once the user clicks on the button.

import React, { useState } from 'react';
import Loadable from 'react-loadable';
import Loader from 'components/Loader';

const SomeComponent = Loadable({
  loader: () => import('components/SomeComponent'),
  loading: Loading
});

const App = () => {
  const [showComponent, setShowComponent] = useState(false);

  return (
    if (showComponent) {
      return <SomeComponent />;
    } else {
      return (
        <>
          <h1>Hello! 👋</h1>
          <button onClick={() => setShowComponent(true)}>Click me!</button>
        </>
      );
    }
  );
};

export default App;

Obviously with such a simple component it doesn’t make a difference, but with larger components in an app it can be a good idea to implement code-splitting on component-level like this.

And with this, you should be ready to implement code splitting in your React apps! Checkout the repo of React Loadable for more options. If you are looking for a nice boilerplate that comes with code-splitting out of the box, try out React Milkshake.

Thanks for reading! If you want to ben notified when I release new projects or articles then follow me on twitter: @jake_prins.When your app's bundle starts to grow it will slow things down. That's why we see a lot more use of code-splitting in modern web development. Code-splitting is the process of taking one large bundle containing your entire app, and splitting them up into multiple smaller bundles which contain separate parts of your app. This technique allows you to load chunks of code only when needed.

Serverless SaaS is a boilerplate that will give you a great starting point for your next React app to build SaaS applications. For the last couple of months, I have been working hard to implement features like authentication, billing, teams, and a lot more. And now it's time to start early access.

If you are interested you can be one of the first to work with this starter-kit and save lots of time building your next (SaaS) application. In the upcoming days, you can still get it with a 50% discount!

Just visit serverless.page to find all the information you need. If you have any questions or feedback please let me know.

You can reach out to me on Twitter: @jake_prins.

In Stack Choices, we take a closer look at some technologies that can help us to build these types of applications and try to make a good decision on what to use. This time, let’s take a look at going with plain old JavaScript or the rising star: TypeScript.

What is TypeScript?

TypeScript is an open-source language that builds on JavaScript by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly.

You can easily use Typescript when starting a new React application by running yarn create react-app my-app --template typescript or work with Angular, which comes with Typescript by default.

How popular is TypeScript?

TypeScript seems to be taking over front-end development. Almost 90% of developers (who filled in the state of js survey) admit they would like to use or learn TypeScript in their next project. Besides that, it's one of the most loved languages, according to the 2019 Developer Survey by Stack Overflow.

My personal experience

I have been working with Typescript full-time for over a year now, and I have experienced the benefits of using TypeScript when working in a team. Something I personally like is, for example, the rich IDE support. I’m using VSCode and it offers features like code navigation, autocompletion, and providing accurate suggestions. You also get feedback while typing like flagging type-related errors as soon as they occur. This can help you write more maintainable code.

Although TypeScript is really good, it’s not perfect. In the beginning, I didn’t like working with TypeScript at all. It requires some time to learn and you need to write more code than with just JavaScript.

Here are, in my opinion, the pros and cons of choosing Typescript for your next project.

Pros for using Typescript

• It has rich IDE support
• It has object-oriented programming features
• It helps to spot bugs early
• It is used in popular frameworks
• It’s growing in popularity

Cons for using Typescript

• Writing more code
• Takes time to learn
• Adds complexity

Conclusion

Although TypeScript requires you to write some more code and could take developers some time to learn, it’s benefits outweigh that in my opinion. We also see steady growth in the adoption of the language so I think this is not a hard decision to make. My stack choice: TypeScript.

If you think differently, please try to change my mind! Any other opinions? Leave them in the comments.

If you’re interested in saving time on your next project and skipping implementing authentication, payments, tests, etc. then subscribe here to follow my progress in building the SAAS starter-kit for JavaScript developers. You can also follow me on Twitter, or at www.jakeprins.com.

The world of web development is constantly changing and it is a challenge to keep a close eye on everything that is going on. Which frameworks will still be relevant in the coming year? And which tools are most suitable for your web application? Let’s discuss a couple of interesting frontend technologies for web development.

Svelte

The big underdog of the frontend frameworks: Svelte. It’s been around for a couple of years and in April 2019 version 3.00 was released. Svelte is a little different than React, Vue or Angular because it compiles your code to tiny, framework-less vanilla JS. And it’s not just very performant, with no run-time dependencies, it’s also very elegant and easy to learn the framework. It’s npm downloads have more than tripled over the last year, and in the results of the 2019 State of JS survey, it showed that 44.9% of JS developers were interested in learning Svelte. Time has to tell if people will actually adopt it in production applications, so I’m curious about what the future will bring for Svelte.

Expo & React Native

React Native, the framework for building native mobile apps with React has had a steady growth in the last couple of years. The 2019 State of JS survey from 2019 showed that last year 27.9% had used React Native and would use it again, together with 44.3% that was interested in learning React Native. I have been using React Native to build the mobile apps of RaterFox, and really enjoyed it. It was easy to pick up because I already built the frontend of RaterFox with React. One thing that's kind of annoying right now, is that I’m managing 2 codebases that really look alike. Especially all Redux code is mostly the same for the website as the mobile app. Luckily for me, the React Native teams have even bigger plans than just building for Android and IOS with one codebase. What about building for mobile, web and desktop, all with React Native? Sounds too good to be true, but it is very real. Expo, an open-source platform for making React Native apps, is on a mission to create the best possible end-to-end developer experiences for building and deploying apps on multiple platforms. I would definitely keep an eye out for Expo and highly recommend this talk from Evan Bacon about Expo for mobile, web, desktop and console: https://www.youtube.com/watch?v=ykBxY01j_rA

Btw, if you are looking for a nice boilerplate for your next React projects, check out React Milkshake.

TypeScript

TypeScript seems to be taking over frontend development. Almost 90% of developers (who filled in the state of js survey) admit they would like to use or learn TypeScript in their next project.

TypeScript is an open-source language that builds on JavaScript by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly.

Migrating an existing project from Javascript to Typescript is probably a huge task and maybe not worth it, but you should definitely try out Typescript in your new projects (if you aren’t already). You can easily use Typescript when starting a new React application by running yarn create react-app my-app --template typescript or work with Angular, which comes with Typescript by default.

Angular

Speaking of Angular, let’s talk about the great things of this framework. Yes, React is eating the world, and Vue has definitely proved itself in the last couple of years, but while everybody seems to be talking about the shiny new tools we might forget to pay a little attention to Angular. The JavaScript framework, developed by Google, deserves a little more love, even though it doesn’t have the best reputation inside the frontend developer community. The move from angular 1 (AngularJS) to Angular 2, which was so different it required complete rewrites, left some big scars. Times have changed though, and lots of progress has been made.

Updating your application to the next major version of Angular has never been easier. Since Angular 8, you can just use ng update to update your application and its dependencies. Besides that, with the new Angular CLI you can generate components, routes, services and pipes with a simple command. Besides that, Angular is very stable and has support for great technologies like Typescript and Web Workers, etc., the new Ivy renderer is officially released in Angular 9. Although the framework has made huge improvements in file size and runtime speed since the days of Angular 2, Angular apps often tend to be on the heavy side when it comes to file size and memory use. Ivy aims to change this. Compared with the current Angular View Engine, Ivy provides the following benefits:

• Rebuild times are significantly faster
• Decreased payload size
• Better template type checking, so you can catch more errors at build time
• The code generated by the Angular compiler is now much easier for humans to read and understand

And it’s broadly compatible with existing Angular applications. It’s also great to know that Angular is so wildly used inside Google, and it’s comforting to know that these updates have already been released to production on dozens of sites across Google before it gets to the public.

Also pretty cool is @Scullyio, the static site generator for Angular. It’s still in beta but it looks very promising!

Web components

Pure web components are framework agnostic and can work without a framework. That’s why a lot of people think that web components are the future. They are free from JS fatigue and are supported by modern browsers.

Prominent tools to know in this space are StencilJS, Lit-HTML (and Lit-element) and SkateJS. But you can also use Angular or Svelte to create web components.

Although the idea of web components sound very promising, the reality shows that there are also some reasons why you should be careful about fully betting on web components. There are many articles were written about the subject, but when the creator of Svelte posted Why I don’t use web components it resulted in some interesting discussions.

Personally I’m not (yet) completely convinced about the idea of web components, but it’s for sure a technology that I keep on my radar.

There are many more interesting topics I would like to discuss, but let’s wrap things up here for now. Add some of your great tools for frontend development in the comments and follow me on twitter @jake_prins to stay up to date about my latest work.

In this article, we distinguish between front-end and back-end technology. We start with three front-end development frameworks and then discuss three back-end development frameworks.

Front-end Frameworks

1. React.js

With React.js, developers can build reusable components, each with their own “state”. If one component has to be updated on the page (for example the user clicks a like-button), only that one part is modified by React (the thumb goes up) without having to refresh the complete page.

React uses a ‘virtual DOM’ for this. This is a representation of a user interface that is stored in the memory and is constantly synchronized with the “real” DOM. It does not matter which browser you use, the virtual DOM of React will always render faster because it works in a more efficient way.

Large companies such as Airbnb and Netflix have been using React.js for a number of years now, and we see that the technology is being embraced by more and more companies. The interest in React among developers is huge and that makes it a technology that will only gain popularity in the coming years.

In addition to React there is also React Native, a framework that makes it possible to develop mobile apps for both iOS and Android with only one set of source code. The framework has the same technical basis as React and with that, it has suddenly become much easier for web developers to develop mobile apps in addition to websites and web applications and this has been an interesting development for companies.

2. Vue.js

Another important newcomer in front-end development is Vue.js, the Javascript framework with the fastest growing and perhaps the most enthusiastic developer community at the moment. With very detailed documentation and a fairly low learning curve, Vue.js is a suitable choice when you want to experiment with a new framework as a developer.

Because of the resemblance to React and Angular in terms of architecture, it is an easy transition from other frameworks. Loved for its small size (only 20KB), speed and flexibility, Vue.js delivers even better performance compared to other frontend frameworks.

Vue.js currently still has a fairly small market share compared to React or Angular. Finding developers with experience in Vue.js can, therefore, be a little more difficult. Whether Vue will become as popular as React or Angular we’ll have to wait and see, but due to the positive opinions from the developer community and the growth in the use of Vue, it seems likely that Vue.js will continue to develop positively.

3. jQuery

But what about jQuery? Well, it seems that the developer community is slowly moving away from the most famous JavaScript library. One of the reasons may be that jQuery does not go well with newer libraries like React. Modern browsers nowadays also support many jQuery-like functions, which in many cases makes jQuery superfluous. For that reason, we see that a lot more use of pure JavaScript. For example, GitHub recently announced that it had replaced all jQuery with pure JavaScript.

jQuery may not always be the first choice when starting a new project, with 300,000 downloads per day it still achieved a good 300% growth compared to the beginning of 2017. Perhaps even more surprising: 90% of the top 500,000 websites still make use of jQuery! This shows that a library does not necessarily have to be new and cool to remain relevant. The choice to use a particular library depends entirely on the type of project which you want to use it for.

The changes in front-end web development are occurring incredibly fast. It seems impossible to follow everything, but by monitoring and understanding the most important frameworks, we can gain an insight and make better choices at the start of a new project.

Each of the frameworks/libraries has a different philosophy and each has its own strength, but one thing we can be certain of is that JavaScript is the basis of all these developments. Therefore, a development team that has strong knowledge and experience with JavaScript is essential for building modern websites and web applications.

Backend-Frameworks

4. Kotlin

A programming language that has grown enormously in popularity in recent years is Kotlin. It’s a modern alternative to Java that is easy to learn. The open source language started to grow especially last year when Google announced that it was an officially supported language for Android. Many companies started writing their Android apps with Kotlin, such as Slack and Netflix. Rob Fletcher, a senior software developer at Netflix, wrote:

“Kotlin is not revolutionary, but it feels like a very careful merging of some of the best features of other languages.”

It is interesting to see, as a research by Pusher showed, that Kotlin was used mainly by experienced developers in the first years (since 2011), but since the announcement of Google, it’s the young developers, especially students, who are causing the enormous growth. In addition, it is not entirely surprising that most of the developers now use Kotlin to build Android apps, even though it can also be used for developing back-end or server-side applications.

5. Elixir and Phoenix

Phoenix, built in the functional programming language Elixir, is a relatively new framework that is increasingly being talked about in the developer community. One of the reasons why developers are so interested in Phoenix is ​​because it is known for its fast performance. For example, processing a large JSON request, which takes about 1.5 seconds in Rails, only costs 400ms in Phoenix.

It remains important to check whether a technology is suitable for the type of project in which you want to apply it. For example, Elixir and Phoenix are strong in real-time applications, in which many connections have to be processed simultaneously (for example chat applications). But for applications that require a lot of computing power, Elixir could be less suitable.

The number of Elixir developers is currently quite limited. Elixir and Phoenix are relatively new and there are not many companies that work openly with the framework. This can certainly change in the future and that is why you should keep a close eye on Elixir and Phoenix.

6. GraphQL

You may have heard of GraphQL, an open-source query language developed by Facebook, and one of the most modern ways to build APIs. The popularity of GraphQL is growing rapidly and large companies such as Twitter, Shopify and Amazon have already started working with the technology.

GraphQL offers solutions for some very real problems that developers wrestle with a lot because it makes loading and processing data much easier. One of the important differences between a REST API and GraphQL, is that GraphQL offers the possibility to specify exactly which data you want to get back from the API. It ensures that the software calling the API receives all the data it needs in a single request.

This comes in handy when the application contains many nested models and associations. GraphQL helps, for example when developing mobile apps, to only load the relevant data and thus reduce the load on the mobile network. GraphQL takes care of a lot of the overhead that REST APIs have and that delivers benefits to both the backend and frontend.

Conclusion

As a developer, it is important to stay up to date with current technological developments as much as possible. You should look at the opportunities, but also consider the possible risks that new technology entails. Experimenting regularly with different frameworks helps to experience the potential benefits, but also the limitations.

The work of a developer consists mainly of solving technical challenges and that is why it is of great importance to work with proven technology, which is productive to work with and has a large community behind it.

Thanks for reading! Will write a new post with 6 other technologies to follow in 2020. Got suggestions?

// @NOTE: You can find me on Twitter @jake_prins.

Let me tell you five things I learned on a day filled with great talks, lots of coffee, and of course some beers.

1. Reactive programming

There will always be a new JavaScript framework to learn. Technology will continue to evolve and change, and developers will continue to rewrite applications. Tracy Lee talked about reactive programming, which can enable you to just copy-paste most of your code from framework to framework.

In her talk, Tracy showed why reactive programming can be a more efficient way to code. She also discussed how it has been adopted by industry leaders such as Netflix, Slack, Microsoft, and Facebook as the new standard for developing applications. It seems very promising, especially libraries like RxJS, that help developers deliver complex features quicker with less, more maintainable code.

The more developers adopt this concept, the better.

As Tracy mentioned in her blog post:

“The more people understand reactive programming, the more productive we as one modern web will all be. The only barrier to adoption is not understanding the paradigm and the language around it.”

I think it’s not such a bad idea to invest some time in learning reactive programming, and RxJS could be a great library to get you started.

Watch the full talkhere.

2. React Navigation

When implementing navigation inside your React Native app, you have two options: you can use a library that wraps the native navigation APIs for the platform, or you can use a re-implementation of those APIs using the same React Native primitives that you use throughout your app. Brent Vatne, who works at Expo, gave a nice talk about an open source project he works on: React Navigation.

Providing us with a clear overview of how you can use different types like switch or stack navigators throughout your app, Brent gave us a better understanding of how navigation works. He also showed how to do great looking transitions with the React Navigation library.

Besides that, Brent mentioned some great reasons to choose a “JavaScript-based navigation” over a “native-based” one. To learn how to take full advantage of it, I recommend reading the docs of the React Navigation library or check outthis postof Christian Falch about Fluid transitions with React Navigation.

Watch the full talk here.

Code

3. D3 and React, Together

One of the most impressive talks of the day was about D3 and React, byShirley Wu. D3 is a library for building data visualisations, and it can work together with React. The challenge of integrating D3 with React is that React and D3 both want to control the DOM. Mainly by letting D3 do all the calculations, and React do all the rendering, Shirley showed us how to deal with this challenge and why D3 and React can work together.

She also demoed this project that is worth checking out. Ending the talk with some live coding in front of a huge crowd showed why Shirley Wu is the real deal, and it made this one of the more interesting talks of the day.

Read more about this subject on her blog postor watch the full talkhere.

4. React Native VR + AR Made Simple

The React ecosystem has given developers the opportunity to target platforms that were once thought to be out of reach for JavaScript developers. Nader Dabit gave a nice talk about the Viro platform that opens the door to developing both Augmented Reality and Virtual Reality.

Creating your own AR app with React Native is actually pretty simple and straightforward if you’re using Viro React. It allows you to create fun apps like Nader’s demo app, which allowed users to upload pictures taken at the conference into a virtual room, as well as walk around and interact with them in AR.

Although this technology can be fun to experiment with, I can’t imagine myself using this technology for any useful implementations. I also think that most professional AR and VR developers are probably not building their stuff with React Native. But if you have the time and a good amount of creativity, you might want to checkout Viro.

Watch the full talk here.

5. React State Management in a GraphQL Era

Last but not the least, I want to mention the great presentation ofKristijan Ristovskialso known as Kitze. He talked about the (un)necessity of state management libraries when GraphQL takes care of managing data in our apps.

GraphQL is a well-documented data query language that provides an alternative to REST and ad-hoc web service architectures. It allows you to return complex data results through a single API call.

Or as Kitze said it:

“GraphQL is the thing that’s eventually gonna replicate REST, but you keep telling yourself that you don’t need to learn it.”

Kitze opened his enjoyable talk with a fun explanation of why the terms “Rockstar-”, “Senior-” or “Ninja-” developer are so stupid, which showed that he had more to talk about then just how great GraphQL is.

He explored all the possibilities and compared the combinations of React, Apollo, Redux, MobX, and Next.js. But instead of just praising all these genius projects, he kept it real and talked about the practical use cases.

For instance, Redux, a brilliant concept that is (over)used by many react developers. Even the creator of Redux said:

“It’s definitely overhyped, low level and often used unnecessarily”.

You can read more about that from the creator of Redux in his own blog post,You Might Not Need Redux.

Kitze continued and showed a simple question someone asked on Reddit:*“Hello Reddit, I just started my first React app. What should I use to do network requests?”The most upvoted answer?“Just use redux-saga.”*Who says JUST use redux-saga? As Kitz said, that is like having a friend tell you there is a bug in his house and you tell him to use a bazooka.

The front-end world is changing very rapidly, and the battles of different technologies will keep on forever. But the problem is that we are asking “What’s better?” instead of:

• What’s suitable for my app?
• What’s suitable for my team?
• What’s suitable for our use-case?

Kitze ended his talk with the question “Do we even need a state management library when using GraphQL?” The answer: maybe.

It all depends on your project. If you want a bit more specific advice, I recommend watching the full talk for some examples.

Moving from Redux to React Apollo blog

The only things left to mention about Kitze’s talk are these simple pieces of advice:

• Stop seeking external approval.
• Stop seeking answers to other people’s projects.
• Stop feeling insecure about your code, because today no one actually knows what they’re doing.
• For God’s sake: delete your Twitter account.

Watch the full talk here.

Final thoughts

Although there were a lot more interesting presentations besides the five talks I mentioned, not all of them were as engaging and interesting. Not every talk was as in depth as we’d hoped, and showing a lot of documentation that can easily be found online will not do it for everyone.

Besides that, most speakers demonstrated how passionate they are and the overall experience was great!

React Amsterdam is a well-organized conference that provided much to learn. Hopefully this post gave you a glimpse of a couple of interesting topics that you may want to dive into deeper.

Follow these steps and to turn your idea into reality. You’ll be publishing a real extension in the Chrome Web Store in no time.

What is a Chrome Extension?

Chrome extensions let you add functionality to the Chrome web browser without diving deeply into its native code. That’s awesome because you can create new extensions for Chrome with core technologies that web developers are very familiar with — HTML, CSS, and JavaScript. If you’ve ever built a web page, you’ll be able to create an extension faster than you can have lunch. The only thing you need to learn is how to add some functionality to Chrome through some of the JavaScript APIs that Chrome exposes.

If you’re not yet experienced building web pages, I recommend you first dive into some free resources to learn how to code, like freeCodeCamp.

What Do You Want to Build?

Before you start, you should have a rough idea of what you want to build. It doesn’t need to be a groundbreaking new idea, you can just do it for fun. In this article, I’m going to tell you about my idea and how I implemented itm making a Chrome extension.

The Plan

I’ve been using the Unsplash Chrome extension for a while. It allows me to have nice background images from Unsplash in my default tab. I later replaced it with the Muzli Chrome extension that turns the default tab into a feed of design news and shots from around the web.

Let’s use these two extensions as inspiration to build something new — this time for movie lovers. My idea is to show a random background image of a movie every time you open a new tab. On scrolling, it turns into a nice feed of popular movies and TV shows. Let’s get started.

Step 1: Setting Things Up

The first step is to create a manifest file, manifest.json. This is a metadata file in JSON format that contains properties like your extension’s name, description, version number, and so on. In this file, we tell Chrome what the extension is going to do, and what permissions it requires.

For the movie extension, we need permission to control activeTab, so our manifest.json file looks something like this:

{
 "manifest\_version": 2,
 "name": "Cool name",
 "description": "Super cool extension",
 "version": "1",
 "author": "Your name", "browser\_action": {
   "default\_icon": "tab-icon.png",
   "default\_title": "Have a good day"
 }, "chrome\_url\_overrides" : {
  "newtab": "newtab.html"
 }, "permissions": \["activeTab"\]
}

As you can see, newtab.html is the HTML file that should be rendered every time a new tab gets opened. To do this we need permission to control the activeTab, so when a user tries to install the extension they’re warned about all the permissions the extension needs.

Another interesting thing inside the manifest.json are the browser actions. In this example, we use it to set the title, but there are other options as well. For instance, to show a popup whenever you click on the app icon inside the address bar, all you have to do is something like this:

"browser\_action": {
  "default\_popup": "popup.html",
 },

Now, popup.html will be rendered inside the popup window that's created in response to a user's click on the browser action. It's a standard HTML file, so it’s giving you free rein over what the popup displays. Just put some of your magic inside a file named popup.html.

Step 2: Test Whether It Works

The next step is to create the newtab.html file and put in a "Hello world”:

<!doctype html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

To test it, visit chrome://extensions in your browser and ensure that the “Developer mode” checkbox in the top right-hand corner is checked.

Chrome Developer mode

Click “Load unpacked extension” and select the directory in which your extension files live. If the extension is valid, it will be active straight away, so you can open a new tab to see your “Hello world.”

Step 3: Making Things Nice

Now we have our first feature working, it’s time to make it look nice. We can style our new tab simply by creating a main.css file in our extension directory and loading it in our newtab.html file. The same goes when including a JavaScript file for any active functionality that you want to include. Assuming that you’ve created a web page before, you can now use your magic to show your users whatever you want.

Finishing the plan

All I further needed to finish the movie extension was HTML, CSS, and JavaScript, so I don’t think it’s relevant to dive deep into the code, but I’d like to go through it quickly.

Here’s what I did. For my idea, I needed some nice background images, so, in the JavaScript file, I used the TMDb API to fetch some popular movies, took their backdrop images, and put them in an array. Now, whenever the page loads it randomly picks one image from that array and sets it as the background of the page. To make this page a little more interesting I also added the current date in the top right corner. And for more information, it allows users to click the background, which links to the movie’s IMDb page.

I replaced the screen with a nice feed of popular movies when the user tries to scroll down. I used the same API to build cards of movies with an image, title, rating, and vote count. On clicking one of those cards, it shows the overview with a button to watch a trailer.

The result

Now, with that little manifest.json file and just some HTML, CSS and JavaScript, every new tab that you open looks a lot more interesting:

View the end result here.

Step 4: Publish Your Extension

When your first Chrome extension looks nice and works as it should, it’s time to publish it to the Chrome Store.

Simply follow this link to go to your Chrome Web Store dashboard (you’ll be asked to sign in to your Google account if you aren’t already). Then click the “Add new item” button, accept the terms, and you’ll go to the page where you can upload your extension. Compress the folder that contains your project and upload that ZIP file.

Chrome Web Store

After successfully uploading your file, you’ll see a form where you should add some information about your extension. You can add an icon, a detailed description, upload some screenshots, and so on.

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the “Preview changes” button. When you’re happy with the result, hit “Publish changes” and that’s it, you’re done!

Go to the Chrome Web Store and search for your extension by its title (it might take some time before it’s up there). If you’re interested, you can find mine here.

The only thing left to do is get some users. So, share a post about your life-changing Chrome extension on social media, tell your friends to check it out, add it to ProductHunt, and don’t forget to share your project here in the comments — I can’t wait to see what you came up with!

Conclusion

As a web developer, it’s easy to quickly create a Chrome extension. All you need is some HTML, CSS, JavaScript, and basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within 20 minutes. Building an extension that’s new, worthwhile, or looks nice will take a bit more time. But it’s all up to you!

Use your creativity to come up with something interesting and if you ever get stuck, the excellent Chrome extension documentation can probably help you out.

What are you waiting for? Time to start working on your own Chrome extension and turning your idea into reality.

Don’t forget to share your project in the comments and any questions or feedback.

Trello, Craigslist, Unsplash, AppSumo, Twitter, Gmail… what do all these successful companies have in common?

Yes, they can all trace their humble beginnings back to being something we might call a ‘side project’.

Side projects come in many forms and have lots of different purposes. Some people start them to create a nice product and eventually build a successful company, but there are many other reasons why working on side projects can be exceptionally important.

Accelerate your learning.

Learning and mastering a new skill can be tough, but with enough persistence and motivation, there is a lot we can achieve. Like learning how to code, it can be hard, frustrating and time-consuming. In the end, the most important thing to do is to keep going and gain experience.

Sure, it helps if you’re good at math, logical thinking and have a college degree in computer science. But for people with a non-technical background, like me, it’s still possible to become great developers with enough motivation and persistence.

In my own experience, I found working on side projects in my spare time not only fun but really helpful in developing my coding skills.

Every time I read something interesting on a blog, or was facing a challenge at work, or learned something new from a colleague, I wanted to implement it in one of my side projects as well.

Read about a better way to store images? Let’s try it! Learned how to work with AJAX? Let’s Ajax-ify everything! Stumbled upon a great Ruby gem? Let’s bundle that up!

And every time I improved my skills, I wanted to rewrite stuff to use better or cleaner code, which made me care about it more and more.

RaterFox

In my first year working as a developer I learned a lot. I also believe the side projects I worked on at night or over weekends gave my learning ability and motivation a big boost.

One of the projects I spend by far the most time on is called RaterFox. It’s a social platform for movies and TV shows that amongst other things, allows you to rate and review titles or recommend them to your friends.

I’ve used the TMDb API to get the movie and TV data. I used the Giphy API to create a gif picker so users can create ‘Reactions’ to show their initial thoughts about a movie or TV series.

I’m still working on improvements (because when will a project ever be finished?), but in case you’re interested you can check it out here. BTW, any feedback is always welcome and highly appreciated!

When side projects shine

Working on side projects can have different purposes. These can be improving some skills, experimenting with new technologies, testing out a product idea or building a startup.

But no matter what the goal may be, it’s the perfect way to create something new. Working on a side project is different from “regular” work because there is less pressure, no deadlines, and no rules. You’re free to play around and switch to something else whenever you feel like it.

This freedom sometimes may lead to unproductive, glitchy and half working “products”, but it can also result in something creative, inspiring and innovative. And that is when the beauty of a side project will shine.

At the company I work for, we have an ‘Experiment Day’ every month. This is great for trying out some interesting technologies. Similar ideas are found across a lot of tech companies — and it’s easy to see why.

For example, Facebook’s “Like” button started as the “awesome button” and was created during a Facebook hack-a-thon. This simple functionality is now a core feature and is used in various guises in all types of digital products.

During the hack-a-thon, the creators didn’t know that they were building a button that would have such an impact, but it did.

The huge tech giants like Facebook and Google inspired smaller companies to spend more time on side projects because the results were seen everywhere.

Gmail, Google talk, AdSense and Google News are some of the successful projects that were born out of Google’s famous “20% policy”. This allows employees to use up to 20 percent of their workweek at Google to pursue their own projects.

More success stories

Besides the awesome products that many of us use every day, like Gmail or Instagram, there are many more success stories of startups that are build out of side projects.

Take for instance Unsplash, the side project that did more than the creators could ever imagine: it saved their startup. Unsplash, which provides copyright-free and high-quality images, started off as a marketplace for hiring freelance designers and developers. It failed to gain traction until their side project (that was initially built in one afternoon) started to lift off.

The Crew team, the company beside Unsplash, launched many other side projects that have become the main sources of referral traffic to the Crew website.

“More people cared about us in a few hours than in the entire last year.”

If you are a developer, you likely have an account on Github, the Web-based Git version control repository hosting service (oh, and billion-dollar company).

Founders Chris Wanstrath and PJ Hyett were upset with how difficult it was to change open source code, so they built their own repository. They built their side project at nights and weekends and now serve over 20 million users.

“It all started with a domain, a cheap slice from Slicehost, and some stock art.”

You never know what you may end up with when you start a side project.

Take for instance The Point, a social network that connected users who wanted to rally behind a specific cause.

When founder Eric Lefkofsky saw users banding together to buy an item in bulk and receive a discount, he made some new plans for his project and ended up with Groupon… you know, that daily deals site that had a $1 billion valuation within two years of launching.

Another daily deal site you may have heard of is AppSumo. This startup shows that you don’t need a lot of money to start. Founder Noah Kagan had the idea of a discount site for online companies but only started with $50 to build a landing page and to collect emails. By investing time and effort he ended up with a startup that had $1 million in sales in their first year.

Now, it’s awesome to read about these side projects that lifted off to become great companies, but as I mentioned before, working on side projects could lead to many different benefits.

There are plenty of examples of people who learned how to code just by working on side projects. So if you want to learn a new programming language, improve your current skills, or use your creativity to solve a problem you faced, it’s never too late to start something new. So, how to start?

How to start

Once a while, we all have great idea’s running through our mind, but most of the time we don’t act upon them.

It’s not a mystery why. Ideas are not always realistic, but it’s not necessary to let you be overwhelmed by the size of some of our ideas and the thoughts of actually building it. Three things to keep in mind if you want to start on a new project:

1. Start small

The easiest way to start is to pick a small project you will find interesting, or will solve a problem you have. Then break it down into smaller components until one of them looks easy to implement. Complete that part and repeat the process until you have all of the parts you need to solve the original problem.

2. Keep it simple

The best approach is to keep it simple. Your project should have minimal complexity, minimal coding, and be focused on the main purpose it serves. If it’s an app that lets you find new recipes, it doesn’t need chat functionalities. You can always add new things later, but when you are just starting you should reduce features to the minimum.

3. No pressure

Starting a new project can be exciting. Although it’s fun to read about the success stories about projects that were converted into successful companies, one of the reasons why working on side projects can be so interesting is that it shouldn’t give you pressure to make money with it.

That means it also doesn’t matter if it fails. No deadlines and complete creative freedom mean you can choose which way you think your project should go. While gaining experience in your work, and doing something you love, you can build something to care about which will make you keep coming back when there’s more work to do.

Don’t dismiss your side project as just this thing you do on the side. It can become the thing you do that makes you happy and excited. Your little side project maybe even evolves into your “main project” one day. Just start small, be patient and improve it while you learn. You may end up with some unexpected products that the world didn’t know it needed.

Thanks for reading. Got a nice side project you work on? Share it in the comments!

// @NOTE: You can find me on Twitter @jake_prins .

// @NOTE: This was originally posted on Medium like 2 years ago.

At the start of 2016, I started on my first job as a web developer at Inspire. A couple of months before this I had finished an intense developer’s boot camp program. If you want to know what that was like you can read the blog of a fellow student here.

Not very long before I started that program I didn’t even know what a class or an object was in programming, and now I’m working on big and complex web applications that are used by thousands of people. If you are interested in what it’s like to switch a career to become a developer, you can read my first Medium post: ‘When athletes become developers’, but in this post, I partially zoom in to my personal experience as a starting web developer and even give some advice for new developers who are looking for a nice company to write code for.

I have to add that this may not only be interesting for new developers, but also for employers who are curious about what they can do to successfully add juniors to their team.

The company

The experience of working as a developer for the first time is of course impacted a lot by the type of company you work for. To give a quick summary, the company builds software for clients with different backgrounds, but most companies or organizations that have social relevance and are focused on improving people’s lives such as health care, educational publishers, research institutes, charities, and startups. At the moment it has about 10 employees and is based in the center of Utrecht, the Netherlands. Most applications they build are in Ruby on Rails and the developers are mostly very experienced.

What’s it like?

In my first days of working at Inspire, I and another intern got the assignment to improve the Team Happiness application that was built and used by the company itself. It’s a small app that basically sends an email every week, at a random day and time, to employees asking what their team's happiness is at that moment. Employees can reply with one of the five smileys, giving a score to how happy they are at that moment.

This application says a lot about the vision of the company and shows that it really cares about the employers. This is expressed in multiple ways, like the monthly one-on-one conversations with the founder, the flexibility to occasionally work from home, or the experimentation-days.

Experimentation-day is every last Thursday of the month and that day can be spend completely on learning a new technology that we’re interested in.

The nice thing about working on the Happiness App for the first days was that the consequences were not that great if you made any mistakes, because it’s only used by ourselves. This took off a lot of the pressure when your first pull request is going to be merged. Also, because every line of code is always reviewed by another developer, it’s very nice to get feedback on how to write better and cleaner code. This is one of the nice things about working in an environment of experienced developers.

After the first couple of weeks, I joined the team that was working on a much bigger and more complex application. By mostly working on small bugs and styling issues, I slowly started to get a nice feel about the whole project. Most of the time I could always ask someone for help so I didn’t have to stay stuck. But even with all the good intentions, it can still be a bit disturbing for colleagues when they are intensely focused on solving some big issues, to have somebody asking them about “easy” stuff all the time. So if you are hoping to start working on your first developer job soon, be prepared to figure a lot of things out yourself. Of course, the best friend of every developer, Google, is always there to have your back.

while ( ! ( succeed = try ( ) ) );

You will run into problems that look like you just can’t solve them at the moment, but most likely someone else did as well, so it’s really nice that there is an amazing community actively helping each other on platforms like StackOverflow. I’m not familiar with every programming language, but the Ruby community is great and can be your saving buddy in moments when you’re totally frustrated about things not working as you want them to.

Things to think about for starting developers

Which players are on my team?

Most of the time learning to code is a process that you do by yourself. You try, fail, try again, fail again, try another time, and fail another time. While thinking, trying, and reading, you break this infinite loop of failure with small achievements of success, only to be followed by that same loop again. It sounds depressing, but it’s not. It takes effort and determination to continue trying, but that process is what’s actually making you slowly become a better and smarter developer. That said, learning to write good code will take a lot more of your time and effort if you don’t have access to help, tips, tricks and code explanations from experienced people. When I first started to learn how to code, my best feedback has always been the fact that what I’m trying to achieve is working or that it’s giving me errors. For me, there was no difference between good and bad code, only code that’s working and code that’s not. Of course, my first pull request at Inspire had a lot of comments, and I was amazed by how much more reliable and cleaner my code looked after I finally had improved it together with a colleague so that my PR was mergeable. Having colleagues around you that can help you not only provide the understanding of every line of code but also the reason why certain code can be best written in a certain way, is an extreme advantage.

Do they have the time?

If you are looking for your first job as a developer, it’s very important to know if the company also has the capability of giving you the time you need to spend on educational needs. If there is only one medior/senior developer working at your next “dream job”, don’t expect him to be available to you every time when you might need some help. He is probably working on a lot of things that are usually more urgent than your personal development. One of the nice things about Inspire is that they have given me the responsibility to make sure I spend enough time learning. This means that I should schedule pair-programming sessions with colleagues and use some of my work time particularly for educational purposes like following a JavaScript course on Code School. Combining actual work with theoretical learning is a great way to develop your skills in your early development career.

Why do they want me?

Lots of startups are looking for junior developers and sometimes for the wrong reasons. If they are looking for a young developer because it saves them money, you can get in trouble if they have big expectations and small technical knowledge. It can be awesome to work at a nice new startup, but it can be a good thing if you first figure out if they have realistic expectations of you. You’re probably not yet ready to build the next Airbnb of whatever just by yourself.

To hire someone for an internship or a junior position can be a big investment for a company. You have to learn a lot on the job, your time may not yet be billable to clients and you need more help from colleagues than mediors/seniors do, but learning on the job and spending at least 40 hours a week coding will boost up your skills really fast. If you are a self-taught developer or just really passionate about programming, you shouldn’t be doubtful about going out for job interviews. I know it seems that most companies are just looking for experienced developers, but to build a great development team it’s also important to add juniors (read here why). There are a lot of companies looking for developers and sometimes you just have to be a bit lucky to find one that really fits you. If you are looking for your first job as a web developer you can find some great tips over here, or you could read this nice blog post.