<p>In this tutorial, we'll build a basic tic-tac-toe game with JavaScript, React, and Tailwind CSS.</p><h1>Step 1</h1><p>Let's start by writing two components we'll need to build the game.</p><p>First, We'll need a <code>Cell</code> component to represent each square in the tic-tac-toe grid.</p><pre><code>export default function Cell({ number, value, handleClick }) {
    return (
        &lt;div className="border p-2 w-8 h-8" onClick={() =&gt; handleClick(number)}&gt;{value}&lt;/div&gt;
    )
}</code></pre><p>Second, we'll need to use these <code>Cell</code>s to build the <code>Board</code> used in the game.</p><pre><code>import Cell from "@/components/Cell";

export default function Board({ board, handleClick }) {
    return (
        &lt;div className="flex flex-col"&gt;
            &lt;div className="flex"&gt;
                &lt;Cell number={0} value={board[0]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={1} value={board[1]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={2} value={board[2]} handleClick={handleClick}&gt;&lt;/Cell&gt;
            &lt;/div&gt;
            &lt;div className="flex"&gt;
                &lt;Cell number={3} value={board[3]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={4} value={board[4]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={5} value={board[5]} handleClick={handleClick}&gt;&lt;/Cell&gt;
            &lt;/div&gt;
            &lt;div className="flex"&gt;
                &lt;Cell number={6} value={board[6]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={7} value={board[7]} handleClick={handleClick}&gt;&lt;/Cell&gt;
                &lt;Cell number={8} value={board[8]} handleClick={handleClick}&gt;&lt;/Cell&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    )
}</code></pre><h1>Step 2</h1><p>Now we'll build the <code>Game</code> component, which includes all the good stuff: state, event handlers, game logic, and more. These are the important parts:</p><ul><li><p>Import <code>useState</code> from the react library.</p></li><li><p>Declare the <code>initialBoardState</code> variable. We'll represent this as an array of nine values, each set to null by default.</p></li><li><p>Declare two pieces of state to remember the board array and which player's turn it is.</p></li><li><p>Write some logic to determine whether a player has won or if not, whose turn it is. We'll worry about the <code>calculateWin</code> function in step 3.</p></li><li><p>Write an event handler function so when the player clicks on a <code>Cell</code> the state is updated and a mark is rendered in that <code>Cell</code>.</p></li></ul><p>Here's the final code:</p><pre><code>import {useState} from "react";
import Board from "@/components/Board";

const initialBoardState = [null, null, null, null, null, null, null, null, null];

export default function Game() {
    const [board, setBoard] = useState(initialBoardState);
    const [player, setPlayer] = useState(true);

    const winner = calculateWin(board);
    let winnerText;
    if (winner === true || winner === false) {
        winnerText = winner ? `Winner: player 1` : `Winner: player 2`;
    } else if (player) {
        winnerText = `Player 1's turn`;
    } else {
        winnerText = `Player 2's turn`;
    }

    function handleClick(number) {
        if (board[number] === null) {
            setBoard(board.map((e, i) =&gt; {
                if (i === number) {
                    const value = player ? 'X' : 'O';
                    setPlayer(!player);
                    return value;
                } else {
                    return e;
                }
            }));
        }
    }

    return (
        &lt;&gt;
            &lt;Board board={board} handleClick={handleClick}&gt;&lt;/Board&gt;
            &lt;div&gt;{winnerText}&lt;/div&gt;
        &lt;/&gt;
    )
}</code></pre><h1>Step 3</h1><p>Now that we have all the components and state setup, we need to calculate whether a player has won the game based on the state of the board. In tic-tac-toe there are three broad win conditions: three of the same mark in a row vertically, horizontally, or diagonally.</p><p>We'll use <code>for</code> loops to check each possible win in each of these three possible conditions.</p><pre><code>function calculateWin(board) {
    // Horizontal win conditions.
    for (let i = 0; i &lt; 7; i += 3) {
        if (board[i] === board[i + 1] &amp;&amp; board[i + 1] === board[i + 2]) {
            if (board[i] === 'X') {
                return true;
            } else if (board[i] === 'O') {
                return false;
            }
        }
    }

    // Vertical win conditions.
    for (let i = 0; i &lt; 3; i++) {
        if (board[i] === board[i + 3] &amp;&amp; board[i + 3] === board[i + 6]) {
            if (board[i] === 'X') {
                return true;
            } else if (board[i] === 'O') {
                return false;
            }
        }
    }

    // Top left to bottom right diagonal.
    if (board[0] === board[4] &amp;&amp; board[4] === board[8]) {
        if (board[0] === 'X') {
            return true;
        } else if (board[0] === 'O') {
            return false;
        }
    }

    // Top right to bottom left diagonal.
    if (board[2] === board[4] &amp;&amp; board[4] === board[6]) {
        if (board[2] === 'X') {
            return true;
        } else if (board[2] === 'O') {
            return false;
        }
    }

    return null;
}</code></pre><p>Overall, this code provides a basic implementation of a tic-tac-toe game using React and demonstrates how to use hooks to manage state in a functional component.</p>

This project is a simple example of a tic-tac-toe game powered by React and Tailwind. This question is common in front-end interviews!

React.js

JavaScript

HTML & CSS

Build a tic-tac-toe game with React and Tailwind

<p>If you are interested in learning how to build web applications using React.js, one of the first steps is to set up a development environment where you can write and test your code. In this tutorial, I will show you how to use Create React App and VS Code to create a simple React.js project and run it on your local machine.</p><p>Create React App is a tool that allows you to quickly bootstrap a React.js project without having to worry about configuring webpack, babel, eslint, and other tools. It provides a pre-configured setup that includes everything you need to start developing a React.js application.</p><p>VS Code is a popular code editor that supports many languages and features. It has a built-in terminal, debugger, code completion, syntax highlighting, and extensions that can enhance your productivity and coding experience.</p><h2><strong>Step 1 — Install Node.js</strong></h2><p>To follow along with this tutorial, you will need to have Node.js and npm installed on your machine. You can check if you have them by running the following commands in your terminal:</p><pre><code>node — version
npm — version</code></pre><p>If you don’t have them, you can download and install them from&nbsp;https://nodejs.org/en/.</p><h2><strong>Step 2 — Create React App</strong></h2><p>Once you have Node.js and npm installed, you can install Create React App globally by running the following command:</p><pre><code>npm install -g create-react-app</code></pre><p>This will allow you to use the&nbsp;<code>create-react-app</code>&nbsp;command to generate a new React.js project.</p><h2><strong>Step 3 — Install and configure VS Code</strong></h2><p>Next, you will need to install VS Code if you don’t have it already. You can download and install it from&nbsp;https://code.visualstudio.com/.</p><p>After installing VS Code, you can open it and create a new folder for your project. You can name it anything you like, but for this tutorial, I will name it&nbsp;<code>react-app</code>.</p><p>To create a new React.js project using Create React App, you can open the terminal in VS Code by pressing&nbsp;<code>Ctrl+~</code>&nbsp;or clicking on&nbsp;<code>Terminal &gt; New Terminal</code>&nbsp;in the menu bar. Then, navigate to the folder where you want to create your project and run the following command:</p><pre><code>create-react-app react-app</code></pre><p>This will create a new folder called&nbsp;<code>react-app</code>&nbsp;inside your current folder and initialize a React.js project with some boilerplate code and dependencies.</p><p>You can see the structure of the project by opening the&nbsp;<code>react-app</code>&nbsp;folder in VS Code. You should see something like this:</p><pre><code>react-app
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock</code></pre><p>The&nbsp;<code>public</code>&nbsp;folder contains static files that are served by the web server. The&nbsp;<code>index.html</code>&nbsp;file is the main HTML file that loads the React.js application.</p><p>The&nbsp;<code>src</code>&nbsp;folder contains the source code of the React.js application. The&nbsp;<code>index.js</code>&nbsp;file is the entry point that renders the&nbsp;<code>App</code>&nbsp;component into the&nbsp;<code>root</code>&nbsp;element in the&nbsp;<code>index.html</code>&nbsp;file. The&nbsp;<code>App.js</code>&nbsp;file defines the&nbsp;<code>App</code>component that contains the main logic and UI of the application.</p><p>The other files are either for testing, performance measurement, or configuration purposes. You can read more about them in the README.md file or in the official documentation of Create React App:&nbsp;https://create-react-app.dev/docs/getting-started/.</p><h2><strong>Step 4 — Running your project</strong></h2><p>To run the project locally, you can use the following command in the terminal:</p><pre><code>npm start</code></pre><p>This will start a development server on&nbsp;http://localhost:3000/&nbsp;and open it in your default browser.</p><p>You can now edit any file in the&nbsp;<code>src</code>&nbsp;folder and see the changes reflected in the browser automatically.</p><h2><strong>You’re all done!</strong></h2><p>Congratulations! You have successfully set up a development environment for a React.js project using Create React App and VS Code. You can now start building your own web applications using React.js.</p><p>I hope you found this helpful and informative. If you have any questions or feedback, please leave them in the comments below. Happy coding!</p>

Use Create React App and VS Code to create a simple React.js project and run it on your local machine.

Visual Studio Code

Set up a development environment for React with VS Code

<p>Here's a step-by-step tutorial for writing a simple to-do list application using React:</p><ol><li><p>Set up a new React project: You can use the <code>create-react-app</code> tool to quickly set up a new React project. Open your terminal and type the following command:</p><p><code>npx create-react-app todo-app</code></p><p>This will create a new directory called <code>todo-app</code> with all the necessary files and dependencies for a React project.</p></li><li><p>Create a new component: In the <code>src</code> directory of your project, create a new file called <code>TodoList.js</code>. This file will contain the code for your to-do list component. In this file, define a new functional component called <code>TodoList</code>.</p></li><li><p>Define the state: In the <code>TodoList</code> component, define the initial state of your to-do list. You can use the <code>useState</code> hook to define a state variable for the list items. Here's an example:</p><pre><code>import React, { useState } from 'react';
function TodoList() {
  const [items, setItems] = useState([]);
}</code></pre></li><li><p>Render the list: In the <code>TodoList</code> component's <code>return</code> statement, render the list of to-do items. You can use the <code>map</code> method to render each item as a list item element. Here's an example:</p><pre><code>function TodoList() {
    const [items, setItems] = useState([]);
    return ( &lt;ul&gt;{items.map((item) =&gt; (
        &lt;li key={item}&gt;{item}&lt;/li&gt; ))} &lt;/ul&gt;
    );
}</code></pre></li><li><p>Add a form to add new items: To add new items to the list, you can add a form element to the <code>TodoList</code> component's <code>return</code> statement. Here's an example:</p><pre><code>function TodoList() {
    const [items, setItems] = useState([]);
    const [text, setText] = useState('');
    function handleSubmit(event) {
        event.preventDefault();
        setItems([...items, text]); setText('');
    }
    return (
        &lt;&gt;
            &lt;ul&gt; {items.map((item) =&gt; (
                &lt;likey={item}&gt;{item}&lt;/li&gt; ))}
            &lt;/ul&gt;
            &lt;form onSubmit={handleSubmit}&gt; &lt;input type="text"value={text} onChange={(event) =&gt; setText(event.target.value)} /&gt;
                &lt;buttontype="submit"&gt;Add&lt;/button&gt;
            &lt;/form&gt; 
        &lt;/&gt;
    );
}</code></pre></li><li><p>Finalize the component: You can add more features to your to-do list component, such as the ability to mark items as completed or delete items from the list. Once you're happy with your component, you can use it in your main <code>App.js</code> file by importing and rendering it.</p></li></ol><p>That's it! You've just created a simple to-do list application using React. This is just a starting point, and you can customize your application as per your requirements.</p>

This project is an example of a simple to do list app build with React.js and Tailwind CSS.

Build a to-do list app with React and Tailwind

<p>Netlify is a popular platform for hosting static websites and web applications. It offers features such as continuous deployment, serverless functions, custom domains, and HTTPS. In this blog post, I will show you how to deploy a React.js project to Netlify in as few steps as possible.</p><h2><strong>Step 1: Create a React.js project</strong></h2><p>If you already have a React.js project, you can skip this step. Otherwise, you can use create-react-app to generate a new project. To do this, you need to have Node.js and npm installed on your machine. Then, run the following command in your terminal:</p><pre><code>npx create-react-app my-react-app</code></pre><p>This will create a new folder called my-react-app with all the necessary files and dependencies for a React.js project. You can change the name of the folder to whatever you like.</p><h2><strong>Step 2: Push your project to GitHub</strong></h2><p>Netlify can automatically deploy your project from GitHub, so you need to push your project to a GitHub repository. If you don’t have a GitHub account, you can create one for free at&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com">https://github.com</a>. Then, follow these steps:</p><ul><li><p>Initialize a git repository in your project folder by running git init in your terminal.</p></li><li><p>Add all the files to the staging area by running git add.</p></li><li><p>Commit your changes by running&nbsp;<code>git commit -m “Initial commit”</code>.</p></li><li><p>Create a new repository on GitHub by going to&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/new">https://github.com/new</a>&nbsp;and filling out the details.</p></li><li><p>Copy the remote URL of your repository from GitHub and add it to your local repository by running git remote add origin&nbsp;<code>&lt;your-remote-url&gt;</code>.</p></li><li><p>Push your local repository to GitHub by running&nbsp;<code>git push -u origin main</code>.</p></li></ul><h2><strong>Step 3: Connect your project to Netlify</strong></h2><p>Now that your project is on GitHub, you can connect it to Netlify and enable continuous deployment. To do this, follow these steps:</p><ul><li><p>Go to&nbsp;Netlify&nbsp;and sign up or log in with your GitHub account.</p></li><li><p>Click on the&nbsp;<strong>New site from Git</strong>&nbsp;button on the dashboard.</p></li><li><p>Select GitHub as the provider and authorize Netlify to access your repositories.</p></li><li><p>Choose the repository that contains your React.js project and click on&nbsp;<strong>Deploy site</strong>.</p></li><li><p>Wait for Netlify to build and deploy your site. You can see the progress and logs on the dashboard.</p></li><li><p>Once the deployment is done, you will see a message saying “Site deploy successful” and a URL for your site. You can click on it to see your site live on Netlify.</p></li></ul><p>That’s it! You have successfully deployed a React.js project to Netlify in as few steps as possible. You can now make changes to your code and push them to GitHub, and Netlify will automatically update your site. You can also customize your site settings, such as adding a custom domain or enabling HTTPS, on the Netlify dashboard. Happy coding!</p>

Deploy a React.js project to Netlify in just 3 steps and get your project live! Netlify is a popular platform for hosting static websites and web applications.

Managed Hosting

Deploy a React.js project to Netlify

<p>Rust is a modern, fast and safe programming language that aims to empower developers to create reliable and efficient software. VS Code is a popular and versatile code editor that supports many languages and features. In this blog post, we will show you how to set up a development environment for Rust in VS Code, using some of the best extensions and tools available.</p><h2><strong>Step 1: Install Rust</strong></h2><p>The first step is to install Rust on your system. You can do this by following the official installation guide at&nbsp;https://www.rust-lang.org/tools/install. This will install the Rust compiler, cargo (the package manager and build tool), rustup (the toolchain manager) and other useful tools. You can check if Rust is installed correctly by running&nbsp;<code>rustc — version</code>&nbsp;and&nbsp;<code>cargo — version</code>&nbsp;in your terminal.</p><h2><strong>Step 2: Install VS Code</strong></h2><p>The next step is to install VS Code on your system. You can download it from&nbsp;https://code.visualstudio.com/download. VS Code is a lightweight and customizable editor that supports many languages and extensions. You can also customize its appearance, settings, keybindings and more.</p><h2><strong>Step 3: Install Rust extensions for VS Code</strong></h2><p>To make your Rust development experience more productive and enjoyable, you will need to install some extensions for VS Code that provide features such as syntax highlighting, code completion, formatting, debugging and more. Here are some of the most recommended extensions for Rust:</p><ul><li><p><strong>Rust (rls)</strong>: This extension provides official support for Rust using the Rust Language Server (rls). It offers features such as code completion, error checking, formatting, refactoring and more. You can install it from&nbsp;https://marketplace.visualstudio.com/items?itemName=rust-lang.rust.</p></li><li><p><strong>rust-analyzer</strong>: This extension provides an alternative implementation of the Rust Language Server using rust-analyzer. It offers features such as code completion, error checking, formatting, refactoring and more. It is faster and more accurate than rls, but still experimental and may have some bugs. You can install it from&nbsp;https://marketplace.visualstudio.com/items?itemName=matklad.rust-analyzer.</p></li><li><p><strong>CodeLLDB</strong>: This extension provides a native debugger for Rust using LLDB. It offers features such as breakpoints, watch expressions, variable inspection, stack traces and more. You can install it from&nbsp;https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb.</p></li><li><p><strong>crates</strong>: This extension helps you manage your dependencies in cargo.toml files. It shows you the latest version of each crate, allows you to update them with one click, and highlights outdated or incompatible crates. You can install it from&nbsp;https://marketplace.visualstudio.com/items?itemName=serayuzgur.crates.</p></li><li><p><strong>Better TOML</strong>: This extension improves the syntax highlighting and formatting of TOML files, which are used by cargo and other Rust tools. You can install it from&nbsp;https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml.</p></li></ul><h2><strong>Step 4: Configure your settings and preferences</strong></h2><p>The last step is to configure your settings and preferences for VS Code and the extensions you installed. You can do this by opening the settings menu (Ctrl+,) and editing the JSON file or using the UI. Here are some of the most common settings you may want to change:</p><ul><li><p><code>rust-client.engine</code>: This setting determines which Rust Language Server implementation to use:&nbsp;<code>rls</code>&nbsp;or&nbsp;<code>rust-analyzer</code>. The default is&nbsp;<code>rls</code>, but you may want to switch to&nbsp;<code>rust-analyzer</code>&nbsp;if you prefer its features and performance.</p></li><li><p><code>rust-analyzer.cargo.loadOutDirsFromCheck</code>: This setting enables loading proc macro and build script output from&nbsp;<code>cargo check</code>, which is required for some crates to work properly with rust-analyzer. The default is false, but you may want to set it to true if you encounter any issues.</p></li><li><p><code>rust-analyzer.checkOnSave.enable</code>: This setting enables running&nbsp;<code>cargo check</code>&nbsp;on save, which will show you any errors or warnings in your code. The default is true, but you may want to disable it if you find it too slow or distracting.</p></li><li><p><code>editor.formatOnSave</code>: This setting enables running the formatter on save, which will make your code consistent and readable. The default is false, but you may want to enable it if you care about code style.</p></li><li><p><code>lldb.adapterType</code>: This setting determines which LLDB adapter to use: native or classic. The default is native, which is faster and more reliable, but you may need to switch to classic if you encounter any compatibility issues.</p></li></ul><p>You can find more settings and options for each extension in their documentation or by searching in the settings menu.</p><h2><strong>Conclusion</strong></h2><p>Now you should be set up to start writing code in Rust. Happy compiling!</p>

Set up a development environment for Rust in VS Code, using some of the best extensions and tools available. Rust is cool because it's super fast, but it's also more complicated to learn.

Rust

Set up a development environment for Rust with VS Code

<h1>10ten Web App</h1><p>An overview of the stack is below, followed by more in-depth background on important parts of the set up. See the <strong>Developing locally </strong>section at the end to get started ASAP.</p><h2>Core technologies</h2><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.mongodb.com/atlas">MongoDB Atlas</a></p></li><li><p>AWS (<a target="_blank" rel="noopener noreferrer nofollow" href="https://aws.amazon.com/blogs/mobile/amplify-next-js-13/">Amplify for Next.js</a>, S3)</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/">Next.js</a> framework for <a target="_blank" rel="noopener noreferrer nofollow" href="https://react.dev/">React</a></p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://mui.com/">MUI</a> component library and design system</p></li></ul><h2>Third-party services</h2><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/">tiptap</a> rich text editor</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.github.com/en/rest?apiVersion=2022-11-28">GitHub API</a> authentication and importing user and repo data</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://stripe.com/">Stripe</a> payments</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://posthog.com/">Posthog</a> product and data tools</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://sendgrid.com/">SendGrid</a> transactional email</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://crisp.chat/en/">Crisp chat</a> for support</p></li><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://unsplash.com/developers">Unsplash API</a> for random project images</p></li></ul><h1>Stack details</h1><h2>MongoDB Atlas</h2><p>We're using MongoDB Atlas for the database and <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.mongodb.com/docs/realm/">Realm</a> product. Realm handles authentication, client-side data fetching permissions, cloud functions, and more. The Atlas account was provisioned on the AWS marketplace so we can use AWS credits to pay for database and app services. We're also currently using serverless clusters, which can result in cold starts if there's low usage.</p><p>We've been using the <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.mongodb.com/docs/realm/web/">Realm Web SDK</a> wherever possible for authentication and database operations. This lets us keep most of that functionality on the front end. We also use the <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.mongodb.com/docs/drivers/node/current/">MongoDB Node Driver</a> for accessing data from API routes. The <code>github-auth</code> endpoint also uses the <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.mongodb.com/docs/realm/sdk/node/">Realm Node.js SDK</a>.</p><p>There are also a few <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.mongodb.com/docs/atlas/app-services/functions/">Atlas cloud funtions</a> needed for authentication that are not included in the repo. You can see them by logging into the MongoDB Realm dashboard. They're for:</p><ul><li><p>Custom authentication with GitHub. The Realm authentication system allows <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.mongodb.com/docs/atlas/app-services/authentication/custom-function/">custom function authentication</a> for providers that aren't built-in, which GitHub isn't.</p></li><li><p>Email confirmation. Required for sending customized account confirmation emails with SendGrid.</p></li></ul><p>Using the <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.mongodb.com/products/compass">MongoDB Compass</a> app is recommended for manual data querying.</p><h2>AWS</h2><h3>Amplify and Next.js</h3><p>We're using AWS Amplify to host Next.js on production and a staging environment. This allows us to do automatic deployments and preview branch environments with GitHub. Amplify recently released a Next.js service competing with Vercel. They are very similar in terms of functionality, but there are a few key differences:</p><ol><li><p>The evironment variable system is more cumbersome. It requires adding values for each branch, then putting each into a build <code>.yml</code> file, saving, and re-deploying. <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.aws.amazon.com/amplify/latest/userguide/ssr-environment-variables.html">Here's an article about it.</a></p></li><li><p>Deployments take longer. About 3-5 minutes in most cases.</p></li><li><p>Vercel has additional features that (1) improve performance in some cases, (2) give better performance metrics, and (3) allow you to comment on preview branches.</p></li></ol><p>Here's a <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.reddit.com/r/aws/comments/q15t5c/aws_amplify_vs_vercel_for_nextjs_ssr_hosting/">relevant Reddit thread</a> about the differences.</p><h3>S3</h3><p>We're using a public S3 bucket to store and host images for profiles and projects. The uploading routine uses the AWS Node.js SDK and follows <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/vercel/examples/tree/main/solutions/aws-s3-image-upload">this example</a>. It uses a pre-signed POST system to upload the image directly from the client, which is efficient, but a bit complex. I's worked fine so far.</p><h2>MUI</h2><p>The theme is customized in <code>/pages/_app.tsx</code> and there are further individual customizations elsewhere, especially where we're using the <code>AppBar</code> component.</p><h1>Developing locally</h1><p>Using <a target="_blank" rel="noopener noreferrer nofollow" href="https://code.visualstudio.com/">VS Code</a> is recommended due to its popularity, flexibility, and the ease of debugging Next.js API routes. <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jetbrains.com/webstorm/">Webstorm</a> is also okay if you prefer JetBrains products, but the debugger can be finicky.</p><h2>Prerequisites</h2><ol><li><p>Install or upgrade Node.js to version 16.8 or later: <a target="_blank" rel="noopener noreferrer nofollow" href="https://nodejs.org/">https://nodejs.org/</a></p></li><li><p>Upgrade NPM to the latest version and install all dependencies:</p><pre><code>npm install -g npm@latest
npm install</code></pre></li><li><p>Set up the your IDE to debug API routes. See the <a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/building-your-application/configuring/debugging">Next.js debug docs</a> for instructions.</p></li><li><p>Add a file named <code>.env.local</code> to the root directory and include development environment variables. If using VS Code, you may also want to install the <a target="_blank" rel="noopener noreferrer nofollow" href="https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv">DotENV extension</a> for syntax highlighting.</p></li></ol><h2>Let's go!</h2><p>Run the development server from your IDE or the command line:</p><pre><code>npm run dev</code></pre><p>Open <a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:3000">http://localhost:3000</a> with your browser to see the result.</p><p>Next.js has <a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/architecture/fast-refresh">Fast Refresh</a>, which automatically updates the browser with your latest changes without explicitly reoloading the page.</p>

How the current 10ten web application works and how to get started working on it.

Bjorn Hansen

Bjorn Builds

Oregon, USA

Links

Interests

Skills

Projects

Bjorn Builds