<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.

TypeScript

10ten Web App

Bjorn Builds